面接試験問題のscriptタグの中でasyncとdeferの属性の違い

面接試験問題のscriptタグの中でasyncとdeferの属性の違い
テキストを読む
最近ウェブページの性能の最適化の方面のものをして、chrome devToolsの性能の検査ツールのlighthouseで一回走った後に、その中の一つがEfficiently load third-party JavaScriptであることを発見しました.プロジェクトの中でscriptタグで引用した第三者の倉庫です.
まず私達はこのscriptタグをbodyの中に書くべきで、このようにブラウザーはファイルをロードする時jsを解析しないで、これでhtmlのレンダリングを阻止します.
どうやって第三者スクリプトをロードするのを最適化しますか?
その1つの方法は、scriptタグにasyncまたはdefer属性を付加することである.
このように:

<script defer src="script.js"></code></pre> 
 <h4>async</h4> 
 <p>async               ，  window   load       。                         DOM   。</p> 
 <p><span class="img-wrap"><a href="https://img.  .com/image/info9/f14f21aa7e914dec8ecf09527c2c3d63.jpg" target="_blank"><img alt="     script     async   defer      _ 1   " title="image" src="https://img.  .com/image/info9/f14f21aa7e914dec8ecf09527c2c3d63.jpg" width="650" height="179" style="border:1px solid black;"></a></span></p> 
 <h4>defer</h4> 
 <p>defer                    ，  window   DOMContentLoaded     。defer                     HTML       ，            。</p> 
 <p><span class="img-wrap"><a href="https://img.  .com/image/info9/fc73294c26ea492c8ed0b73ba16c001e.jpg" target="_blank"><img alt="     script     async   defer      _ 2   " title="image" src="https://img.  .com/image/info9/fc73294c26ea492c8ed0b73ba16c001e.jpg" width="650" height="182" style="border:1px solid black;"></a></span></p> 
 <ul> 
  <li>                  <code>async</code></li> 
  <li>                <code>defer</code></li> 
 </ul> 
 <blockquote>
        
  <br> 
  <a href="https://web.dev/efficiently-load-third-party-javascript/" rel="nofollow noreferrer">efficiently-load-third-party-javascript</a> 
 </blockquote> 
</article>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1327094549876645888"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">