这篇文章主要给大家介绍了关于高性能的javascript之加载顺序与执行原理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们一起学习学习吧。 前言 javascript在浏览器中的性能，可以认为是开发者所面临的最严重的可用性问题，今天，自己看完高性能的javascript的加载和执行这一章，聊聊怎么解决js的加载顺序和执行的原理，下面话不多说了，来一起看看详细的介绍： 当浏览器遇到标签的时候，浏览器必须先话时间下载外链的文件然后并执行，在这过程中，页面渲染和用户交互是完全被阻塞的。</p> <p><span style="color: #ff0000"><strong>脚本放在哪里比较好？</strong></span></p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/dc28bc5804d079bd32dbd5b68ebce33e-1.png"></p> <p>这种情况无疑是存在严重的性能问题的，由于脚本会阻塞页面的渲染，直到它们全部下载并执行完成后，页面渲染才会继续，下面的图就是代码的执行顺序</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/dc28bc5804d079bd32dbd5b68ebce33e-2.png"></p> <p>第一个js文件下载，要等到第一个js文件下载完全才会执行第二个js文件，不过现在IE8，Firefox3.5,Safari4和Chrome2都允许并行下载js文件，遗憾的是，js下载过程还是会阻塞其他资源的下载，例如：图片</p> <p><span style="color: #ff0000"><strong>所以提高性能的方法之一：将脚本放在body底部</strong></span></p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/dc82a41b29238b83c4c963701b7747fb-3.png"></p> <p><span style="color: #ff0000"><strong>组织脚本</strong></span></p> <p>由于每个<script>标签下载时都会阻塞页面的渲染，所以减少页面包含的<script>标签数量是必不可少的，解决方法：可以把多个js文件合并打包成一个js文件,这样子做的好处就是可以最小化延迟时间将会明显的改善页面的总体性能，除此之外，还可以减少HTTP的请求。</p> <p>一般来说下载单个100KB的文件比下载4个25KB的文件快。</p> <p>如果有多个外链的js文件，可以合并成一个js文件</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/dc82a41b29238b83c4c963701b7747fb-4.png"></p> <p><span style="color: #ff0000"><strong>无阻塞的脚本</strong></span></p> <p>尽管下载单个较大的js文件只产生一次HTTP的请求，但是会假死浏览器一大段时间，为了避免这种情况，你需要向页面中逐步加载js文件。</p> <p><span style="color: #ff0000"><strong>延迟的脚本</strong></span></p> <p>defer属性指明本元素所含的脚本可以延迟执行，但是只有IE4+和Firefox3.5+的浏览器支持</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/dc82a41b29238b83c4c963701b7747fb-5.png"></p> <p>简单来说defer的机制就是知道DOM加载完成前才去下载js文件，不会阻塞浏览器的其他进程</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/8659708c1168fe97e3e14aa8d1c4748e-6.png"></p> <p>在不支持defer属性的浏览器弹出的顺序是：defer,script,load</p> <p>支持defer属性的浏览器弹出的顺序是:script,defer,load</p> <p>所以说defer是在onload事件执行之前被调用</p> <p><span style="color: #ff0000"><strong>动态脚本</strong></span></p> <p>动态脚本的注入有两种方式，第一就是动态创建script标签，第二就是通过XMLHttpRequest注入页面</p> <p><strong>先说说第一种怎么使用：</strong></p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/8659708c1168fe97e3e14aa8d1c4748e-7.png"></p> <p>这种技术的重点在于：无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程，但是使用动态脚本节点下载js文件时，返回的代码会立即执行（除了Firefox和Opera，它们会等待此前所有动态脚本节点执行完毕）</p> <p>在主流的浏览器会在<script>标签接收完成时触发一个load事件，但是ie浏览器没有，所以我们必须封装一个兼容所有的浏览器都可以使用的方法</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/8659708c1168fe97e3e14aa8d1c4748e-8.png"></p> <p>这种方式的缺点就是要清楚文件的加载顺序，当js文件多了，依赖关系复杂的时候，很难管理加载的依赖顺序</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/31eb9d88b81f295bb1a4888cb5a72016-9.png"></p> <p>就像这样子写的代码很难维护</p> <p><strong>第二种动态创建脚本方式</strong></p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/31eb9d88b81f295bb1a4888cb5a72016-10.png"></p> <p>实际上相当于创建一个带有内联脚本的<script>标签，一旦新创建的<script>元素被添加到页面，代码就会立即执行然后准备就绪。</p> <p><strong>优点：</strong>就是下载的js代码但是不立即执行，这样子可以把脚本的执行推迟到你准备好的时候执行，这种方法还可以兼容所有的浏览器</p> <p><strong>缺点：</strong>js文件必须与所请求的页面处于相同的域，js文件不能从CDN下载，一般大型web应用都不会使用这种方式</p> <p><strong>推荐使用无阻塞模式：</strong></p> <p>先添加动态所需的代码，然后假装初始化页面的剩下的代码</p> <p>[图片上传失败...(image-dd3f9-1515902024710)]</p> <p>上面介绍了那么多，给大家推荐一些动态延迟加载的库</p> <p>有YUI3，LazyLoad和LABjs等这些库，个人觉得LABjs库比较好用，但是没有用过，大家可以去了解一下，使用方法就不在这里说了。</p> <p><span style="color: #ff0000"><strong>总结：</strong></span></p> <p>提高js性能的几个方面</p> <p> 1.</body>闭合标签之前，将所有的<script>标签放到页面底部。这能确保在脚本执行前页面已经完成了渲染</p> <p> 2.合并脚本。页面中的<script>标签越少，加载也就越快，响应也更快。无论外链文件还是内嵌脚本都是如此</p> <p> 3.有多种无阻塞下载js的方法</p> <p> 3.1使用<script>标签的defer属性</p> <p> 3.2使用动态创建的<script>元素来下载并执行代码</p> <p> 3.3使用XHR对象下载js代码并注入页面中</p> <p>通过以上策略，可以极大提高那些需要使用大量js的web应用的实际性能</p> <p>上面是我整理给大家的，希望今后会对大家有帮助。</p> <p>相关文章：</p> <p><a href="http://www.php.cn/js-tutorial-402889.html" target="_blank">angularjs中有关scope作用域解释</a></p> <p><a href="http://www.php.cn/js-tutorial-402887.html" target="_blank">js中实现MVVM框架（详细教程）</a></p> <p><a href="http://www.php.cn/js-tutorial-402883.html" target="_blank">requireJS如何实现模块加载器？</a></p> <p><a href="http://www.php.cn/js-tutorial-402878.html" target="_blank">仿淘宝的JSsearch搜索（详细教程）</a></p>
