angular.js - 一个页面的javascript脚本就执行了3-4秒,如何优化?
黄舟
黄舟 2017-04-10 15:36:21
[JavaScript讨论组]

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,是不是能加快效率?

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(1)
ringa_lee

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号