Javascript 加载和执行-性能提高篇_javascript技巧-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 17:45:01

Original

1162 Leute haben es durchsucht

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

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

复制代码代码如下:

页面在到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 var oScript = document.createElement('script'); 
　　　　 oScript.text = xhr.responseText; 
　　　　 document.body.appendChild(oScript); 
} 
} 
} 

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

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