展会信息港展会大全

页面装载js及性能分析方法介绍
来源:互联网   发布日期:2016-01-26 11:02:52   浏览:1343次  

导读:这篇文章主要介绍了页面装载js及性能分析方法,需要的朋友可以参考下一、装载先装载静态页面的引用js文件,然后查找引用文件中是否包含onload函数,比如main js中包含onload函数,在main js中查找是否有对其他js文 ...

这篇文章主要介绍了页面装载js及性能分析方法,需要的朋友可以参考下

一、装载

先装载静态页面的引用js文件,然后查找引用文件中是否包含onload函数,比如main.js中包含onload函数,在main.js中查找是否有对其他js文件的引用,优先装载引用js文件,被引用中文件的装载顺序和main.js的顺序一致。

装载完毕后,开始执行onload函数。由于js执行顺序是顺序执行的,为提高页面相应速度,一般做法是在onload中只画页面,一些事件的绑定函数,ajax方法等可延后书写。

二、响应速度分析

1.借助工具进行分析

各大浏览器的开发者工具(最喜欢使用火狐)可以方便的查看各个js文件、html文件、css文件及图片的装载及执行时间。

2.硬编码分析

在第一步中我们基本能定位到瓶颈js文件了,在瓶颈js中,可以使用console.time('test')和 console.Endtime('test')语句对js函数及代码块掐取执行时间。不过console语句只在非IE浏览器中执行有效,而在IE下会报错。如果你偏爱使用IE,那就使用时间戳吧。在掐取时,比较方便的方法是,直接掐住整个js文件,然后使用火狐浏览器,按F12可以在控制台中看到目标 js中所有函数及代码块的耗时,即可定位到瓶颈代码处。

赞助本站

人工智能实验室

相关热词: 性能分析 js

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港