页面装载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 相关文章推荐
学习javascript,实现插入排序实现代码
Jul 31 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
编写React组件项目实践分析
Mar 04 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 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导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
php类自动加载器实现方法
2015/07/28 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
详细介绍Python语言中的按位运算符
2013/11/26 Python
python uuid模块使用实例
2015/04/08 Python
详解Python中的Cookie模块使用
2015/07/06 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
python图片合成的示例
2020/11/09 Python
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
分公司经理岗位职责
2013/11/11 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
初中家长评语和期望
2014/12/26 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
Python面试不修改数组找出重复的数字
2022/05/20 Python