页面装载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 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
jquery tools之tooltip
Jul 25 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
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 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php判断linux下程序问题实例
2015/07/09 PHP
PHP最常用的正则表达式
2017/02/13 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
Python中threading模块join函数用法实例分析
2015/06/04 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
python使用fork实现守护进程的方法
2017/11/16 Python
从0开始的Python学习016异常
2019/04/08 Python
python3 字符串知识点学习笔记
2020/02/08 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
《泉水》教学反思
2014/04/11 职场文书
2015新学期开学寄语
2015/02/26 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
药房管理制度范本
2015/08/06 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫