页面装载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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
JSONP之我见
Mar 24 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
js cavans实现静态滚动弹幕
May 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
PHP 上传文件的方法(类)
2009/07/30 PHP
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
python生成特定分布数的实例
2019/12/05 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
python实现坦克大战
2020/04/24 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
心得体会范文
2014/01/04 职场文书
《画风》教学反思
2014/04/16 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
Docker部署Mysql8的实现步骤
2022/07/07 Servers