Javascript 加载和执行-性能提高篇


Posted in Javascript onDecember 28, 2012

Js的阻塞性
Javascript 在浏览器中的性能问题,可能是最重要的可用性问题
Js的阻塞性 浏览器用单一进程来处理UI进程和Js的执行
不管是内嵌的还是外链的,下载并立即执行 因为它有可能会修改页面

页面生存周期的概念
瀑布图中看到了下载时间和executing time
在head中加入script 和link body加载到前不会输出任何东西,因此会看到空白页面

<script type="text/javascript"> 
document.write("The date is" + (new Date().toDateString())); 
</script>

页面在到script时,不知道script里会做什么,所以必然阻塞,等它执行
Ie8 等浏览器能并行下载多个js等资源,但是还是对下载图片有影响
结论, 将脚本放在底部加载

组织脚本
目标 最小化迟延时间
问题
引用多个script文件 内嵌多个script标签
每个http请求都会带来性能上的开销
紧跟在link 后的script 是个错误 它会等待css的加载,以求获得最精准的描绘
结论:减少script标签的数量
将多个js文件合并成一个,打包工具
yahoo的合并处理器

无阻塞的脚本
js倾向于阻止浏览器的某些处理过程,如http请求处理和界面更新.这是最重要的性能问题。于是要减少js文件大小和限制http请求数
但是功能丰富与代码量之间的矛盾, 合并成单个文件却体积大会锁死浏览器一大段时间,于是我们需要逐步加载javascript文件
重点:在页面加载完成后加载javascript文件

1、延迟加载脚本
defer 属性
如果要下载的js文件不会进行dom操作,那么defer属性有很大的用处,它能让文件并行下载,并不会立即执行,而会在onload事件后再执行,适用于任何script标签
2、动态加载脚本
一个function

function loadScript(url,callback){ 
var script = document.createElement('script'); 
script.type = 'text/javascript'; 
if(script.readyState) { //IE 
script.onreadyStatechange = function(){ 

if(script.readyState == 'loaded' || script.readyState == 'complete') { 
script.onreadyStatechange = null; 


 callback(); 
} 
} else { 
script.onload = function(){ 
callback(); 
} 
} 
}

这里要注意浏览器的兼容性,删除事件,
如果有多个文件需要这样加载,那么可以
loadScript('file1.js', function(){ 
loadScript('file2.js',function(){ 
}) 
});

3、XHR脚本注入
var xhr = new XMLHttpRequest(); 
xhr.open('get','file1.js',true); 
xhr.onreadystatechange= function(){ 
if(xhr.readyState == 4) { 


if(xhr.status >= 200 && xhr.status <=300 || xhr.status==304) { 
var oScript = document.createElement('script'); 


 oScript.text = xhr.responseText; 


 document.body.appendChild(oScript); 
} 
} 
}

304表示从缓存取 text将ajax的内容放入text

它的优点
兼容性好,异步, 缺点:不能扩域 不能从cdn取内容

Javascript 相关文章推荐
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
js获取url传值的方法
Dec 18 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
javascript延时加载之defer测试
Dec 28 #Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 #Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 #Javascript
js获取网页高度(详细整理)
Dec 28 #Javascript
前台js改变Session的值(用ajax实现)
Dec 28 #Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 #Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 #Javascript
You might like
PHP内核探索之变量
2015/12/22 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
Python对象体系深入分析
2014/10/28 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
工程师求职简历的自我评价分享
2013/10/10 职场文书
心理健康教育制度
2014/01/27 职场文书
团队队名口号大全
2014/06/06 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
七一建党节慰问信
2015/02/14 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
博士生专家推荐信
2015/03/25 职场文书
文明旅游倡议书
2015/04/28 职场文书
公司备用金管理制度
2015/08/04 职场文书