JavaScript的開銷（2018年篇）

建立一個具備交互性的網站須要將JavaScript發送給用戶，並且常常會發送不少。你是否在手機應用上經歷過點擊連接或者滑動網頁而沒有反應？總的來講，JavaScript在手機上仍是最耗費性能的資源，由於它會在不少方面拖累網頁的交互能力。

上圖是由WebPageTest測試的在CNN.com上JavaScript耗費的時間。高端的手機（如iPhone 8）運行JavaScript 用了約4s左右，而通常的手機（如Moto G4）耗費了約13s，低端手機（如Alcatel 1X）耗費了約36秒

這篇文章會講述提升JavaScript性能的一些策略：

• 爲了提升速度，只加載當前頁面所需的JavaScript。先加載用戶將會須要的代碼，用代碼分割對剩餘代碼的進行懶加載。這會使你在加載階段和交互階段最大限度的提升效率。默認使用基於路由的代碼分割會帶來巨大的好處。
• 學會接受性能目標。對於手機來講，壓縮後JS的目標是小於170KB，沒有壓縮的是0.7MB。高性能對成功來講是相當重要的，固然這包括團隊文化，結構和條例等因素。在沒有性能目標的開發是將會是倒退的和失敗的。
• 學會怎麼審計和優化JavaScript包。當你用到一個庫的一個功能時會發送整個庫，對一些瀏覽器不須要的polyfill，重複的代碼，這些都是極可能發生的。
• 每一次交互都是新的交互的開始；要根據實際狀況進行優化。網絡情況差的手機時要下降包的大小，CPU負擔大的下降JavaScript解析時間。
• 若是運行在客戶端的JavaScrip並不會提升用戶體驗，就要反思一下在服務端渲染是否會更快。服務端渲染和客戶端渲染的選擇若是作的很差可能會是一個很大的問題。

1. 網站從用戶體驗來看多是臃腫的

當用戶打開你的網站，你可能發送了不少文件，其中許可能是腳本文件。從網站瀏覽者的來看，可能看起來像這樣：
儘管我很喜歡JavaScript，但它始終是你網站最耗費性能的部分。我很樂意解釋爲何JavaScript主要的問題。

如今網站發送壓縮後的JavaScript的中位數是350KB(查詢網站，如今是桌面網站398KB，移動端384KB),解壓後瀏覽器須要運行1MB的腳本。

提示：若是你想要了解你的JavaScript包在用戶與網站交互時的性能，請查看 Lighthouse。

JavaScript的耗費時間主要取決於根據手機網絡情況的耗費下載代碼的時間和根據手機CPU耗費的運行時間。
讓咱們來看看全球手機網絡情況（中國是否是GW的緣由，統計不了？）

這張來自OpenSignal的圖片顯示了全球的4G狀況和各個國家的網速。咱們能夠看到，不少國家的網速比咱們想的慢的多。
網站有時候發送好多兆的須要瀏覽器運行的代碼，無論在PC端仍是在移動端都到達了天花板。如今的問題是，你能負擔的起這麼多的JavaScript嗎？

2. JavaScript 是耗費性能的。

提示： 若是你發送了太多腳本，考慮使用代碼分割進行打包或者用tree-shaking來提升JS的有效負荷。

如今的網站在它們發送的JS包中帶有下面的東西：

• 客戶端的UI框架。
• 全局狀態管理方案（如Redux）
• Polyfills（常常是如今瀏覽器所不須要的）
• 所有的工具庫（如loash，monent）。
• 一套UI組件（如Button，Input）。

這些代碼一點一點的相加，最後代碼越多，頁面所需加載的時間越多。
加載一個web頁面就像解析一部電影的三個關鍵時刻。
就是： 它發生了嗎？它真的有用嗎？它真的可用嗎？

• 它發生的時刻，就是你是否把內容顯示在屏幕上（導航是否開始？服務器是否開始有相應？）
• 它真的有用嗎，就是當你渲染完頁面用戶能夠從這個體驗中得到價值而且得到了所要的信息。
• 它真的可用嗎，就是用戶可以進行有意義的交互體驗而且獲得相應的反饋。

「交互」的真正的意義是什麼呢？

一個網頁具備交互性，它必須有能力對用戶的輸入有快速的反應。很少的JavaScript負荷能夠確保快速反應。當用戶點擊一個連接或者滾動頁面時，須要對他們的操做作出反饋。若是作不到這樣的用戶體驗會使用戶沮喪。人們在使用服務端渲染的頁面時這種狀況會常常發生，當後臺發送一堆JavaScript包時，觸發事件操做或其餘額外的動做。當瀏覽器運行你所須要的許多事件時，用戶輸入的操做也要在相同的進程運行，這個線程被稱爲主線程。在主線程中加載太多JavaScript就是問題的所在。把Js發送給Web Worker或者經過Service Worke進行緩存，這樣就會減輕對實時交互的影響。
在主線程運行太多的JavaScript會對可視的元素的交互產生延遲，這對不少公司都是一個挑戰

測試了Google新聞的交互時間，咱們觀察到高端手機（約7S）和低端手機（約55S)有巨大的差距。那麼，交互性的目標是什麼呢？

咱們以爲在緩慢的3G連接和中等性能的手機設備狀況下最低的交互應保證在5S內完成。「可是個人用戶都鏈接快速的網絡和高端手機！」真的嗎？
你可能鏈接咖啡店裏「快速」的wifi，，可是隻有2G或者3G的速度。還有各類其餘的緣由都會影響使用手機的效率。

誰減小了JavaScript 的加載而且下降了交互時間？

• Pinterest（相似於Tumblr的照片分享網站）將網站的JavaScript包從2.5MB減小到小於200KB，而且能夠開始交互時間從23s減小到5.6s網站的收入提升了44%，登陸數量提升了753%，手機端的周活躍數提升了103%。
• AutoTrader將網站的JavaScript包大小減小了56%，而且加載時間下降了約50%。
• Nikkei將網站的JavaScript包大小減小了43%， 而且加載時間減小了14s。

讓咱們設計更有彈性的網站，而不是依賴不少的JS負荷。
交互性受不少東西的影響。它可能受手機數據流量的限制，或者咖啡店wifi速度，又或者是斷斷續續的網絡鏈接。

當這些狀況發生時，網站可能須要運行不少js，用戶可能在頁面顯示以前關閉網站。或者在頁面顯示以後，用戶還需等一段時間才能開始交互。
理想的狀況是，傳遞越少的JS會緩解這些問題。

3.爲何javascript這麼耗費資源

爲了解釋javascript爲何這麼耗費性能。我須要帶你觀察當你向瀏覽器發送內容時發生了什麼，一位用戶把url輸入地址欄後發生了什麼。

當一個請求發送給服務器。服務器會返回一資源。而後瀏覽器會解析這些資源而且發現必要的CSS，Javascript，圖片等等。最後瀏覽器運行全部的資源。
這當中的一個問題是javascript每每成爲阻礙性能的一個瓶頸。咱們都想盡快的繪製畫面，是頁面具備交互功能。可是當javascript成爲那塊短板後，你只能看着畫面而不能進行交互。

在開發中想要加快運行javascript咱們要記住一件事，咱們必定要快速的下載，解析，編譯，執行它。

這意味着咱們須要在網絡上加快傳輸，在應用端加快運行。若是javascript引擎在解析編譯階段耗費了大量時間，這會形成用戶相同時間的延遲交互性體驗。
下圖是V8引擎運行不一樣網頁時各個階段耗費的時間：

橘黃色表示網頁接受js後解析所須要的時間。黃色部分表示編譯所須要的時間。這兩個階段相加佔到了總時間的30%以上。儘管V8在一個獨立的用於編譯的線程（background thread）編譯js，下降了20%的編譯時間，可是編譯和解析依然很是耗費時間，不多見到一個大型的腳本耗費時間低於50ms的。

另外一件須要注意的是相同大小的不一樣資源所需加載的時間是不一樣的。200KB的代碼和200kb的圖片的性能開銷的差異是巨大。

它們下載的時間多是相同的，但到運行階段所耗費的時間是大相徑庭的。
一張JPEG的圖片須要解碼，柵格化（rasterized），和在屏幕上繪製。一個JavaScript包須要解析、編譯、執行並且還有一系列的步驟須要引擎完成。請注意着不一樣的差異。

4. 手機有高低好壞的差異。

若是咱們幸運，咱們可能會有高端或者不錯的手機。然而現實是否是全部的用戶都有這些設備的。用戶多是低端的或者中等手機。這些手機等級的差異同一樣會帶來嚴重的消耗。散熱器（thermal throttling）,內存、cpu、gpu的不一樣,會給用戶帶來很是大的差異。你的使用低端手機的用戶甚至可能在美國。

下面是2018年不一樣手機在解析javascript的差異：

在頂部像iphone8這樣的高端設備運行腳本相對快一些，在通常的Moto4和更低端的Alcatel 1X則運行的慢一些。注意到運行時間的差異了嗎？
安卓手機通常便宜些，但運行慢，這些設備一般搭載低端的cpu和較小的內存，若是你理所固然的認爲用戶都用高端手機，你將失去這些用戶。

一些用戶沒有較快的網絡速度或者擁有最新的最好的手機，因此用真實的手機和網絡測試是重要的。不一樣的狀況是一個須要認真考慮的問題。

當不一樣狀況會使用戶體驗變差，制定出一條慢速的底線會使全部人收益。若是你的團隊能看一下分析報表瞭解一下用戶的真實狀況，會讓你知道到底用什麼手機進行測試。

5.如何下降發送的javascript代碼體積

成功的關鍵在於發送最少的腳本，讓用戶得到有用的體驗。代碼分割是一個不錯的選擇。
代碼分割就是像把一個巨大的披薩切成幾塊，而後一次給用戶一塊，把代碼分紅幾部分，只發送當前頁所須要的代碼其餘代碼，在須要的時候再發送。
代碼分割能夠應用在頁面、路由和組件層面。代碼分割經過像webpack和parcel這樣的打包器被現代框架完美支持。

另外一個方面，能夠把代碼審計帶入到工做流程中。
幸運的是，如今的生態遊許多工具能夠幫助代碼分析。這些工具讓你的javascript包的內容可視化：他們標記了大的庫，重複代碼，你可能須要的依賴。
代碼審計同時標記出能夠將重量級的包（如Moment.js）替換成輕量級的包（如date-fns）。
若是你正在使用webpack，你能夠咱們的github裏面找到常見庫的問題。

Get fast, stay fast.
Performance is a journey. Many small changes can lead to big gains.

Enable users to interact with your site with the least amount of friction. Run the smallest amount of JavaScript to deliver real value. This can mean taking incremental steps to get there.

In the end, your users will thank you.

6.變得更快，保持更快

性能的表現就像一場旅行。許多小小的改變就能得到巨大的收益。使你的用戶在瀏覽網頁時得到更好的用戶體驗。爲了一步一步的接近那個目標，用盡量小的JavaScript去傳遞有用的信息。最後，你的用戶會感謝你的。