大家好，我是易學前端筆記，今天給大家分享前端工程師必學的一些知識點，也希望本次分享對你工作中有所幫助。
什麼是真正的高性能的 JS 代碼？
現在我們知道我們的目標平臺是什麼，我們就可以回答下一個問題：什麼是高性能的JS代碼？
雖然沒有高性能代碼的絕的定義，但是我們確實有一個以用戶為中心的性能模型，我們可以把它作為參考:RAIL模型。
Respond （響應）
如果你的應用能在100毫秒內響應用戶操作，用戶就能感覺到立即響應。這適用於可點擊的元素，但不適用於滾動或拖動。
Animate （動畫）
在60Hz的顯示器上，我們希望在動畫和滾動時，以每秒60幀的幀為目標。結果是每幀大約16ms。在16ms的預算中，您實際擁有8個10ms來完成所有的工作，其餘部分被瀏覽器內部和其他的差異佔用。
Idle work
如果你有一個昂貴的且持續運行的任務，請確保將其分割為較小的塊，以允許主線程對用戶輸入做出反應。你不應該有任務延遲超過50ms的用戶輸入。
Load （加載）
你應該將頁面加載定位在1000毫秒以內。所有事情結束了，你的用戶開始變得焦躁等待。這在移動設備上是一個非常難達到的目標，因為它涉及到頁面交互，不只是把它繪製在屏幕和和可滾動的頁面上。在實踐中，它甚至更少：
解析，編譯和執行
從根本上說，大多數非性能的 JS 的問題不是運行代碼本身，而是在代碼開始執行之前必須要執行的所有步驟。
我們這裡討論的是抽象層次。計算機中的 CPU 運行機器代碼。你在計算機上運行的大多數代碼都是編譯後的二進制格式。(我說的是代碼，而不是程序，考慮到現在所有的電子應用程序。)也就是說，除了所有操作系統級別的抽象之外，它都是在你的硬件上本地運行的，不需要任何準備工作。
JavaScript 並不是預編譯的。它通過瀏覽器的可讀代碼到達(通過一個相對較慢的網絡)，所有意圖和目的，為您的JS程序的“操作系統”。
首先需要對代碼進行解析，然後讀取並將其轉換為可用於編譯的計算機可索引結構。然後，它會被編譯成字節碼和最後是機器碼，然後它才可以在你的 設備/瀏覽器 上執行。
另一件非常重要的事情是，JavaScript是單線程的，並且在瀏覽器的主線程上運行。這意味著一次只能運行一個進程。如果你的 DevTools 的性能時間線充滿黃色峰值，表示瀏覽器正在以 100％的使用率運行你的 CPU ，你會有長/丟幀，卡頓滾動和所有其他的討厭情況。
JS 解析時間與 JS 包大小雖然不一定是線性比例，但是你裝載的 JavaScript 肯定是越少越好。
你使用的每個JS框架(React，Vue，Angular，Preact …) 都是另一個抽象層次 (除非它是一個預編譯的框架，比如 Svelte )。它不僅會增加您的包大小，而且還會減慢你的代碼，因為你不會直接與瀏覽器對話。
有一些方法可以緩解這種情況，比如使用 service workers 在後臺和另一個線程中執行任務，使用 asm.js 編寫代碼，更容易編譯成機器指令，但這是一個完全不同的話題。
即使他們可能使用 CSS transitions ，合成屬性和requestAnimationFrame()，他們仍然在主線程的JS上運行。他們基本上只是每 16ms 用內聯樣式修改你的 DOM ，因為他們沒有別的辦法可以做到這一點。你需要確保你所有的JS都會在每幀 8ms 以內完成，以保持動畫的平滑。
另一方面，CSS animations 和 transitions ，會在 GPU 的主線上運行，如果能夠高效執行，則不會導致重新佈局(relayouts)/重排(reflows)。
考慮到大多數動畫都是在加載或用戶交互過程中運行的，這可以給你的web應用程序提供急需的喘息空間。
包的尺寸就是一切
今天，一切都是關於 bundles(包) 的。Bower的時代和幾十個
閱讀更多 易學前端筆記 的文章
