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实现flash8类似的连接效果
May 03 Javascript
js获取json元素数量的方法
Jan 27 Javascript
jquery使用经验小结
May 20 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
Vue 中使用 typescript的方法详解
Feb 17 Javascript
vue实现移动端拖动排序
Aug 21 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
XENON基于JSON变种
2010/07/27 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
微信小程序日历效果
2018/12/29 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
python为tornado添加recaptcha验证码功能
2014/02/26 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
Python如何用filter函数筛选数据
2020/03/05 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
美国性感内衣店:Yandy
2018/06/12 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
星空联盟C# .net笔试题
2014/12/05 面试题
优秀党员转正的自我评价
2013/10/06 职场文书
计算机专业推荐信范文
2013/11/27 职场文书
小学运动会表扬稿
2014/01/19 职场文书
暑期教师培训方案
2014/06/07 职场文书
医生个人年终总结
2015/02/28 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
JS class语法糖的深入剖析
2022/07/07 Javascript