極致PCWeb性能 —— 同步加載vs異步加載

做者：Jogis
原文連接：https://github.com/yesvods/Bl...
轉載請註明原文連接以及做者信息

同步與異步加載，每每是指網絡資源，像圖片、樣式、腳本等。本文探索在PCWeb下，同步&異步性能差距到底有多少？爲什麼移動端的優秀方案到PCWeb，會形成性能問題？

同步加載

咱們只聲明單一的靜態腳本資源。

<script src="./react.js"><script>

異步加載

使用簡單腳本發起資源請求。

<script>
    var s = document.createElement('script')
    s.src="./react.js"
    document.body.appendChild(s)
</script>

結果分析

看到結果很驚詫，僅僅是一個不同的加載方式，致使的是40ms與400ms的差別。那麼，這段時間裏面，瀏覽器到底去幹啥了。

經過圖示，說明了幾個問題

• HTML腳本執行優先於次於大多數插件腳本

• 異步發起的請求，屬於低優先級任務

• 低優先級任務，容易被其餘腳本執行而阻塞

• 在PCWeb，異步加載自己在瀏覽器過程緩慢，並且很是容易受插件影響

同步加載，是否會受插件影響？

分析：

• HTML解析伊始即時發起請求

• HTML解析結束後即時接受數據包

• 在接收數據包過程當中已經開始解析

• 在解析過程當中，瀏覽器利用空餘時間給插件執行空間

• 一旦解析完成，下一個任務調度就是腳本的編譯執行

能夠看到高優先級的資源，比部分插件腳本有更高執行優先級，瀏覽器會「儘量快」地加載執行。

無插件環境（類無線環境）

在插件環境下，加載會被各類插件干預，那麼純粹的異步(low)同步(high)在Webkit瀏覽器加載的差距是怎樣的呢？咱們經過切換至隱身模式，消除全部插件影響，注意須要將全部插件的」隱身可用「取消勾選。

在OSX環境下，Shift+CMD+N啓用隱身模式，在某些狀況有特別的妙用..

結論是：同步的高優先級得到優先系統調度，與異步加載有略微優點

結語

PCWeb下，同步加載的特性，比起異步加載有很是大的優點。在某些場景下，還有一些"絕妙"的用法。