浅谈页面装载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 相关文章推荐
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
vue cli 全面解析
Feb 28 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
Vue 实现输入框新增搜索历史记录功能
Oct 15 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编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
python映射列表实例分析
2015/01/26 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
代码实例讲解python3的编码问题
2019/07/08 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
应用英语专业自荐信
2014/01/26 职场文书
村官工作鉴定评语
2014/01/27 职场文书
力学专业求职信
2014/07/23 职场文书
党委班子剖析材料
2014/08/21 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
python编写五子棋游戏
2021/05/25 Python