页面装载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 相关文章推荐
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
jQuery.each()用法分享
Jul 31 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
javascript倒计时效果实现
Nov 12 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
微信小程序canvas实现签名功能
Jan 19 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实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
取得父标签
2006/11/14 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python selenium 三种等待方式解读
2016/09/15 Python
用Python实现数据的透视表的方法
2018/11/16 Python
python绘制多个子图的实例
2019/07/07 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
Linux内核产生并发的原因
2016/11/08 面试题
3的组成教学反思
2014/04/30 职场文书
社区志愿者活动方案
2014/08/18 职场文书
质量主管工作职责
2014/09/26 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android