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数组之存放checkbox全选值示例代码
Dec 20 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 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
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
php跨域调用json的例子
2013/11/13 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
Python入门学习指南分享
2018/04/11 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
标准毕业生自荐信范文
2013/11/04 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
七年级思品教学反思
2016/02/20 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
python 逐步回归算法
2021/04/06 Python
MySQL update set 和 and的区别
2021/05/08 MySQL
python基于tkinter实现gif录屏功能
2021/05/19 Python
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
如何在Python中妥善使用进度条详解
2022/04/05 Python