页面装载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图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
node.js中的console用法总结
Dec 15 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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
我的论坛源代码(二)
2006/10/09 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
javascript中的面向对象
2017/03/30 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
在Python中处理XML的教程
2015/04/29 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
django 自定义过滤器的实现
2019/02/26 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
python tornado使用流生成图片的例子
2019/11/18 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
求职自我评价范文100字
2014/09/23 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android