页面装载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 相关文章推荐
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 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教程 基本语法
2009/10/23 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
js 分栏效果实现代码
2009/08/29 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
详解webpack 多页面/入口支持&公共组件单独打包
2017/06/29 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
Python类属性与实例属性用法分析
2015/05/09 Python
在Django中创建第一个静态视图
2015/07/15 Python
详解python单元测试框架unittest
2018/07/02 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
对Django中内置的User模型实例详解
2019/08/16 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
无犯罪记录证明样本
2015/06/16 职场文书