web性能优化之---JavaScript中的无阻塞加载性能优化方案

一、js阻塞特性

　　JS 有个很无语的阻塞特性，就是当浏览器在执行JS 代码时，不能同时做其他任何事情，无论其代码是内嵌的还是外部的。 即<script>每次出现都会让页面等待脚本的解析和执行（不论JS是内嵌的还是外链的），JS代码执行完成后，才继续渲染页面。

 

二、优化方案

1、尽管脚本的下载过程并不会相互影响，但页面仍然必须等待所有JS下载并执行完成才能继续。所以尽可能将所有<script>标签放置在页面底部，紧靠关闭标签</body>的上方。此方法可以保证页面在脚本运行之前完成解析。

注意：CSS文件本身是并行下载，不会阻塞页面的其他进程。但是，如果把一段内嵌脚本放在引用外链CSS的<link>之后会导致页面阻塞去等待CSS的下载。这样做是为了确保内嵌脚本在执行时能够获得正确的样式信息。所以，最好不要把内嵌脚本放在CSS的<link>之后。

2、减少外链接数量，减少请求。可以将脚本成组打包，这点现在的构建工具已经做得很好了。页面的<script>标签越少，页面的加载速度就越快，响应也更迅速。不论外部脚本文件还是内联代码都是如此。

3、有几种方法可以使用非阻塞方式下载Javascript：

1 ) .为<script>标签添加defer和async属性(仅IE和Firefox3.5以上)

• 设置了defer的script外链文件，在下载js文件期间不会阻塞HTML的解析，而且等js下载完毕时若HTML还没解析完毕，js会等到HTML文档解析完毕后再执行。如果有多个js下载文件，那么执行时也是按照顺序执行。
• 设置了async的script外链文件，在下载js文件期间不会阻塞HTML的解析，但是js下载完毕之后就会立即执行，无论现在HTML是否正在解析。

2）.动态创建<script>元素，用它下载并执行代码

3) . 在页面加载完成后才加载JS，即在window对象的load事件触发后在下载脚本。

4) .使用如common.js等js模块管理工具去动态加载js,比如在点击操作时候加载一个js模块。
5）.用XHR对象下载代码，并注入到页面