浅谈页面装载js及性能分析方法


Posted in Javascript onDecember 09, 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 利用闭包模拟对象的私有属性
Dec 29 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
深入分析jquery解析json数据
Dec 09 #Javascript
WEB前端设计师常用工具集锦
Dec 09 #Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 #Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 #Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 #Javascript
jQuery on方法传递参数示例
Dec 09 #Javascript
jquery实现侧边弹出的垂直导航
Dec 09 #Javascript
You might like
php 字符转义 注意事项
2009/05/27 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
JavaScript实现区块链
2018/03/14 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
Python requests获取网页常用方法解析
2020/02/20 Python
python中adb有什么功能
2020/06/07 Python
python实现图片转字符画
2021/02/19 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
NULL是什么,它是怎么定义的
2015/05/09 面试题
土建资料员岗位职责
2014/01/04 职场文书
医院党员公开承诺书
2014/08/30 职场文书
办公室规章制度范本
2015/08/04 职场文书
2016党校培训心得体会
2016/01/07 职场文书
反邪教学习心得体会
2016/01/15 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js