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取内容

　　推荐阅读

　　一个背景云变换js特效 鼠标移动背景云变化

提到博客，不能不提到博客园cnblogs.com。绝对是国内非常非常牛逼的博客云集地。可能我关注博客的时间比较短，从2010年才开始，而那里的博主们基本4年以上的博龄了。 在群里有人要个比较个性的企业网站，诗缘妹子就>>>详细阅读

本文标题：Javascript 加载和执行-性能提高篇

地址：http://www.17bianji.com/kaifa2/JS/22676.html

 1/2    1