页面装载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 相关文章推荐
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
javascript日期计算实例分析
Jun 29 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
js前端图片加载异常兜底方案
Jun 21 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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
python中的字典详细介绍
2014/09/18 Python
在Python中使用列表生成式的教程
2015/04/27 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
对python3新增的byte类型详解
2018/12/04 Python
pygame实现弹球游戏
2020/04/14 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
python中四舍五入的正确打开方式
2021/01/18 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
医学专业自荐信
2014/06/14 职场文书
大学生个人求职信例文
2014/07/07 职场文书
数学教育专业求职信
2014/07/22 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
雷峰塔导游词
2015/02/09 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
利用 JavaScript 构建命令行应用
2021/11/17 Javascript