一个页面的javascript脚本就执行了3-4秒,如何优化?

chrome的开发者工具“profile”里面,录制javascript CPU profile是这样的:

clipboard.png

看不懂啊,什么意思,占时间最多的几项怎么优化?


程序结构大致如下:

用requirejs实现的,index.html只有一个script入口。

requirejs的主js文件里面是一个define(),作为define()参数的函数:

先执行了少量js,调整不同手机屏幕适配
然后requrie加载angular
最后监听横竖屏变化事件,避免横屏时界面乱掉。(如下图)

clipboard.png

加载angular部分最为庞大(红框部分):
angular模块获取后的回调函数里面,只有一个ngApp和一个ngController,下面是controller里面的内容:
--一系列的$scope.??? = ???
--请求一个叫Skycon的canvas绘图库;
--用$interval周期性发出jsonp请求;
--每次jsonp请求的回调里面:
----一系列的$scope.??? = ???
----通过Skycon更新一次canvas的动画播放;
----执行自己写的另一个canvas绘图;
----请求另一个jsonp
----jsonp请求成功回调函数里:
------一系列的$scope.??? = ???
------再请求第三个jsonp
--------jsonp回调中一系列$scope.??? = ???


1.频繁修改绑定在$scope上的数据模型(Model),或者就我这样的写法,会导致频繁调用$scope.$apply(),耗费很多时间吗?
2.requirejs的主文件里,操作dom的语句,如果单独写到一个文件里,作为和require(["angular"],fn)并列的另一个require()来获取,会不会加快速度?
3.require('skycons')只是一个canvas绘图模块,不依赖angularjs模块,那么取出来放到外面和require(["angular"],fn)并列会不会更快一些?
4.自己写的canvas绘图,也作为单独的文件独立出来,并在angular的controller里面用require()调用是不是可以?
5.三个jsonp请求其实并没有相互依赖关系,只是为了保证三者都已成功返回后再隐藏“加载中……”画面(否则不知道在谁的回调函数里面隐藏“加载中……”画面)。有没有更好的实现方法?
6.requirejs没个模块的加载是非阻塞的吗?上面说的把一些模块独立require,是不是能加快效率?

阅读 4.3k
1 个回答

问题已经解决,是因为$interval(fn,30000);执行后,不是立即执行fn而是要三十秒后才执行第一次。
我搞错了~

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题