標籤：

請問js非同步和同步載入在性能優化中有什麼區別？

01-02

這個話題只針對web頁面優化的，暫時不考慮代碼管理、工程構建等方面的因素。

為什麼要提出這個話題？是因為在 網站為什麼 JS 調用盡量放到網頁底部？這個話題中，對於同步載入和非同步載入對於TTI的影響有比較大的爭議，但該話題不再合適就此展開詳細的分析，故而開一個專門討論的問答。

避免誤解, 補充一下：

同步的意思是由文檔發起的js下載請求，且沒有添加async屬性；

非同步則是由已載入的JavaScript運行發起的無阻塞請求，例如由seajs和requirejs發起的非同步請求。

同步

&

&
....
&

調整javascript文件在文件里的位置，和同步非同步沒有關係，把javascript放在文件後面的方法，叫deferring（延後載入），除了手動把script移動到文檔末尾，還可以用

&

昨天在研究用CommonJS 來寫 Angular applicaiton的時候，看到了這篇文章，作者提到了RequireJS，分享一下：

Best Practices for Building Angular.js Apps

The ability for require.js to load modules on demand is also something that won』t work with Angular (at least, in a reasonable situation). That seems to be something people want, but I』ve certainly never worked on a project that needed it.

I want to emphasize that last point as people get this wrong: Module systems are not so that you only load the code you need. Yes require.js does do that, but it』s not why require.js is useful. Modules are useful to logically separate code for developers to reason about it easier.

弱弱的說一句，你說的那種方式貌似真的不算非同步，而且你說的那個肯定是腳本有依賴才會這樣載入，非同步的核心是引用一個腳本，不需要立即下載，也不需要立即執行，在頁面主體載入完成後利用空閑帶寬去載入執行，換句話說，真正的非同步載入的腳本，是不會參與到頁面渲染的

不用業界高手來回答了，同步的意思就是會阻塞住接下來所有的動作，等待網路返回，如果你的網路不好或者伺服器掛了，半分鐘不返回，你下面的操作這半分鐘之內都不會執行，結果可想而知。

區別就是, 同步是按順序, 異步不按順序. 用了RequireJS之類的話, 沒什麼區別.

硬要說有區別的話, 就是用同步來load必須用到的JavaScript包, 來展現登錄前首頁; Async來load用戶登錄後需要的包.

如果是Uglify + Concat之後的一個main.js文件的話, 而且還在main裡面寫了

$(function(){ /*...*/ })

就沒有區別.

推薦閱讀：

※vs code中，寫在<script></script>里的js代碼沒提示么？
※請問如何學習nodejs並且達到能開發類似fis,spm的水平 有好的教程嗎？
※對於前端，有哪些好的chrome插件或應用可以使用？
※HTML & CSS 現在還多人用嗎？
※react.js在伺服器端渲染有什麼好處？渲染是怎麼個流程？

TAG:前端開發 | JavaScript | 前端性能優化 |