页面装载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 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
vue开发移动端底部导航条功能
Apr 08 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
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
JS继承用法实例分析
2015/02/05 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
python3中for循环踩过的坑记录
2020/12/14 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
未婚证明书模板
2014/10/08 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
初中家长意见
2015/06/03 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python