極致PCWeb性能 —— 圖說舌尖上的腳本

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

咱們經過分析主流瀏覽器Chrome，來了解一個腳本從無到有再到運行做用，到底經歷了什麼。如下將會用lodash爲做爲例子，瀏覽器的腳本生命週期。

HTML解析

在瀏覽器中，在HTML解析過程當中，當解析到帶有src的script標籤，便會即刻調度網絡模塊隊列，網絡模塊在有空餘請求線程時，會即刻執行隊列的請求。

舉個栗子：

<script>
    console.log("Hello Tmall")
</script>
<script src="lodash.js"></script>

瀏覽器會優先發起lodash.js的請求，然後執行console.log腳本。

接收腳本數據

瞭解TCP/IP協議的童鞋都知道，網絡服務器存在慢啓動機制，數據包會以遞增方式發送至客戶端(瀏覽器)，一個500KB左右的lodash.js會被以十多個包送達：

也許有童鞋已經發現，爲了極致的性能，Chrome在接收到首個數據包時，已經開始腳本的解析工做。

解析&編譯&執行

隨後，腳本的一系列連貫的生命週期，最後會發出一個load事件，代表腳本已就緒。

小結

整體看起來，腳本的確會阻塞後續HTML解析，一個完整生命週期大概是醬紫的。

MultiScript

那麼，當多個腳本並行加載，時間序列是怎樣的呢：腳本下載會並行發起，接收數據交替進行。而解析、編譯、執行，會根據HTML聲明順序，串行進行

以react react-dom lodash並行加載爲例，整個時序是醬紫的：