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

发布于 2022-09-01 15:55:50 字数 1556 浏览 14 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

愛放△進行李 2022-09-08 15:55:50

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文