页面装载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 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
jquery实现预览提交的表单代码分享
May 21 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 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下mysql数据库操作类(改自discuz)
2010/07/03 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
统计每一学生的平均成绩
2014/06/06 面试题
员工年终演讲稿
2014/01/03 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
个人校本研修方案
2014/05/26 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
2016高考感言
2015/08/01 职场文书
php中pcntl_fork详解
2021/04/01 PHP
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
vue特效之翻牌动画
2022/04/20 Vue.js