页面装载js及性能分析方法介绍


Posted in Javascript onMarch 21, 2014

一、装载

先装载静态页面的引用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中所有函数及代码块的耗时,即可定位到瓶颈代码处。

Javascript 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
Js冒泡事件详解及阻止示例
Mar 21 #Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 #Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 #Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 #Javascript
将中国标准时间转换成标准格式的代码
Mar 20 #Javascript
如何将php数组或者对象传递给javascript
Mar 20 #Javascript
js 触发select onchange事件代码
Mar 20 #Javascript
You might like
PHP4实际应用经验篇(8)
2006/10/09 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
原生JavaScript实现滚动条效果
2020/03/24 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
python字符串连接方式汇总
2014/08/21 Python
Python多进程编程技术实例分析
2014/09/16 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
python statsmodel的使用
2020/12/21 Python
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
总经理岗位职责
2013/11/09 职场文书
投标承诺书怎么写
2014/05/24 职场文书
优秀纪检干部材料
2014/08/27 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers