页面装载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面向对象编程
Mar 02 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 Javascript
JavaScript 定时器详情
Nov 11 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/12/28 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
学习YUI.Ext 第七天--关于View&JSONView
2007/03/10 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
Vue实现按钮级权限方案
2019/11/21 Javascript
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
python实现Zabbix-API监控
2018/09/17 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
postman传递当前时间戳实例详解
2019/09/14 Python
浅谈python出错时traceback的解读
2020/07/15 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
90后毕业生的求职信范文
2013/09/21 职场文书
阳光体育活动总结
2014/04/30 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript