一个页面的javascript脚本就执行了3-4秒,如何优化?
chrome的开发者工具“profile”里面,录制javascript CPU profile是这样的:
看不懂啊,什么意思,占时间最多的几项怎么优化?
程序结构大致如下:
用requirejs实现的,index.html只有一个script入口。
requirejs的主js文件里面是一个define(),作为define()参数的函数:
先执行了少量js,调整不同手机屏幕适配
然后requrie加载angular
最后监听横竖屏变化事件,避免横屏时界面乱掉。(如下图)
加载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,是不是能加快效率?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
问题已经解决,是因为$interval(fn,30000);执行后,不是立即执行fn而是要三十秒后才执行第一次。
我搞错了~