一个页面的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,是不是能加快效率?

canvas JavaScript javascript性能 requirejs angularjs

初笩ㄓ蘾蘾 10 years, 1 month ago

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

红蝶Saika answered 10 years, 1 month ago

Your Answer