页面装载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 相关文章推荐
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
javascript 获取select下拉列表值的代码
Sep 07 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
jquery对表单操作2
Apr 06 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
js清空form表单中的内容示例
May 20 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 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
扩展你的 PHP 之入门篇
2006/12/04 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
Python 列表list使用介绍
2014/11/30 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
python数组循环处理方法
2019/08/26 Python
Python colormap库的安装和使用详情
2020/10/06 Python
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
无工作经验者个人求职信范文
2013/12/22 职场文书
水果超市创业计划书
2014/01/27 职场文书
请假条格式范文
2014/04/10 职场文书
2014年党建工作总结
2014/11/11 职场文书
小学生安全保证书
2015/05/09 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS