js怎么动态加载js文件（JavaScript性能优化篇）
<p>下面介绍一种JS代码优化的一个小技巧，通过动态加载引入js外部文件来提高网页加载速度</p><p> </p>
<ol class="exp-conent-orderlist">
<li class="exp-content-list list-item-1">
<div class="content-list-text">
<p><strong>【基本优化】</strong></p>
<p>将所有需要的<script>标签都放在</body>之前，确保脚本执行之前完成页面渲染而不会造成页面堵塞问题，这个大家都懂的。</p>
</div>
<div class="content-list-media">
<div class="content-list-image clearfix"><img src="https://img2018.cnblogs.com/blog/48590/201906/48590-20190618161105164-2094625089.jpg" alt=""></div>
</div>
</li>
<li class="exp-content-list list-item-2">
<div class="list-icon"> </div>
<div class="content-list-text">
<p><strong>【合并JS代码，尽可能少的使用script标签】</strong></p>
<p>最常见的方式就是带代码写入一个js文件中，让页面只使用一次<script></script>标签来引入</p>
</div>
<div class="content-list-media">
<div class="content-list-image clearfix"><img src="https://img2018.cnblogs.com/blog/48590/201906/48590-20190618161115314-347150387.jpg" alt=""></div>
</div>
</li>
<li class="exp-content-list list-item-3">
<div class="list-icon"> </div>
<div class="content-list-text">
<p><strong>【无堵塞加载JS】</strong></p>
<p>通过给script标签增加 defer属性或者是 async 属性来实现</p>
<p><script src="file.js" <strong>defer</strong>></script></p>
<p>注解：</p>
<p> </p>
<p><strong>async</strong>和<strong>defer</strong>不同之处是<strong>async</strong>加载完成后会自动执行脚本，<strong>defer</strong>加载完成后需要等待页面也加载完成才会执行代码</p>
</div>
<div class="content-list-media">
<div class="content-list-image clearfix"><img src="https://img2018.cnblogs.com/blog/48590/201906/48590-20190618161125326-1714084826.jpg" alt=""></div>
</div>
</li>
<li class="exp-content-list list-item-4">
<div class="list-icon"> </div>
<div class="content-list-text">
<p><strong>【动态创建script来加载-推荐】</strong></p>
<p>function loadJS( url, callback ){</p>
<p> var script = document.createElement('script'),</p>
<p> fn = callback || function(){};</p>
<p> script.type = 'text/javascript';</p>
<p> </p>
<p> //IE</p>
<p> if(script.readyState){</p>
<p> script.onreadystatechange = function(){</p>
<p> if( script.readyState == 'loaded' || script.readyState == 'complete' ){</p>
<p> script.onreadystatechange = null;</p>
<p> fn();</p>
<p> }</p>
<p> };</p>
<p> }else{</p>
<p> //其他浏览器</p>
<p> script.onload = function(){</p>
<p> fn();</p>
<p> };</p>
<p> }</p>
<p> script.src = url;</p>
<p> document.getElementsByTagName('head').appendChild(script);</p>
<p>}</p>
<p> </p>
<p>//用法</p>
<p>loadJS('file.js',function(){</p>
<p> alert(1);</p>
<p>});</p>
</div>
<div class="content-list-media">
<div class="content-list-image clearfix"><img src="https://img2018.cnblogs.com/blog/48590/201906/48590-20190618161136160-1032443968.jpg" alt=""></div>
</div>
</li>
<li class="exp-content-list list-item-5">
<div class="list-icon"> </div>
<div class="content-list-text">
<p>谷歌浏览器运行效果，script被动态创建在head中</p>
</div>
<div class="content-list-media">
<div class="content-list-image clearfix"><img src="https://img2018.cnblogs.com/blog/48590/201906/48590-20190618161147865-1669765637.jpg" alt=""></div>
<div class="content-list-image clearfix"><img src="https://img2018.cnblogs.com/blog/48590/201906/48590-20190618161157457-1553891099.jpg" alt=""></div>
</div>
</li>
<li class="exp-content-list list-item-6">
<div class="list-icon"> </div>
<div class="content-list-text">
<p>建议大家可以封装成类库，单独引入。</p>
<p>该原理实现的也有很多不错的js类库可以使用，如<strong>LazyLoad.js</strong>，支持数组的形式引入，打开浏览器在network中可看到js是同步加载的</p>
</div>
<div class="content-list-media">
<div class="content-list-image clearfix"><img src="https://img2018.cnblogs.com/blog/48590/201906/48590-20190618161207139-1786541205.jpg" alt=""></div>
<div class="content-list-image clearfix"><img src="https://img2018.cnblogs.com/blog/48590/201906/48590-20190618161216608-945902710.jpg" alt=""></div>
</div>
</li>
<li class="exp-content-list list-item-7">
<div class="list-icon"> </div>
<div class="content-list-text">
<p><strong>【XHR加载】</strong></p>
<p>使用ajax方式加载</p>
<p>代码：</p>
<p>var xhr = new XMLHttpRequest;</p>
<p>xhr.open('get','file.js',true);</p>
<p>xhr.onreadystatechange = function(){</p>
<p> </p>
<p> if( xhr.readyState == 4 ){</p>
<p> if( xhr.status >=200 && xhr.status < 300 || xhr.status == 304 ){</p>
<p> var script = document.createElement('script');</p>
<p> script.type = 'text/javascript';</p>
<p> script.text = xhr.responseText;</p>
<p> document.body.appendChild(script);</p>
<p> }</p>
<p> }</p>
<p> </p>
<p>};</p>
<p>xhr.send(null);</p>
</div>
</li>
<li class="exp-content-list list-item-8">
<div class="list-icon">8</div>
<div class="content-list-text">
<p><strong>【总结】</strong></p>
<p>最好的方式还是使用动态创建script的方式加载，当动态创建script，浏览器会分配一个线程去下载src指向的资源，多个script也是同步下载的</p>
</div>
</li>
</ol><br><br>
来源：https://www.cnblogs.com/telwanggs/p/11045773.html
頁:
[1]