最強前端性能優化，Google已經爲你準備好了

時間 2019-11-09

原文原文鏈接

常常有同窗會問我，什麼是性能優化，哪裏學性能優化的知識。
我以前買了本《Web性能權威指南》裏面也只是講了大量的網絡通訊的理論知識，並無過多提出軟件開發過程當中的實踐操做。
當你苦苦找尋性能優化的系統教程，卻不知Google已經爲你準備好了一份饕餮盛宴javascript

我以爲對於軟件工程來講，身爲一個合格的開發者，要善於探索和發現。互聯網給了咱們豐富的開源技術和海量的信息，爲什麼不去飢渴的去探索呢。下面就一塊兒去探索這份全面而強大的性能優化指南吧。css

一個網站的性能，能夠分爲兩個方面，一個叫Loading Performance（加載性能），一個叫Rendering Performance（渲染性能）。java

Loading Performance（加載性能）

怎麼知道本身的網站有哪些性能問題呢？那固然要藉助一些工具來檢查：What are the different performance tools?webpack

咱們一般須要獲取幾十個（有時甚至是幾百個）不一樣的資源，全部這些資源加起來的數據量高達幾兆字節，而且必須在短短几百毫秒內匯聚起來，以實現咱們想要達到的即時網絡體驗。git

在知足上述要求的前提下實現即時網絡體驗絕非易事，優化內容效率相當重要的緣由就在於此：避免沒必要要的下載、經過各類壓縮技術優化每一個資源的傳送編碼以及儘量利用緩存來避免多餘的下載。github

JavaScript 啓動優化也包括幾點，以下：web

要編寫高性能的網站和應用，您須要瞭解瀏覽器如何處理 HTML、JavaScript 和 CSS，並確保您編寫的代碼（和您要包括的其餘第三方代碼）儘量高效地運行。api

您在工做時須要瞭解並注意五個主要區域。這些是您擁有最大控制權的部分，也是像素至屏幕管道中的關鍵點：瀏覽器

JavaScript。通常來講，咱們會使用 JavaScript 來實現一些視覺變化的效果。好比用 jQuery 的 animate 函數作一個動畫、對一個數據集進行排序或者往頁面裏添加一些 DOM 元素等。固然，除了 JavaScript，還有其餘一些經常使用方法也能夠實現視覺變化效果，好比：CSS Animations、Transitions 和 Web Animation API。
樣式計算。此過程是根據匹配選擇器（例如 .headline 或 .nav > .nav__item）計算出哪些元素應用哪些 CSS 規則的過程。從中知道規則以後，將應用規則並計算每一個元素的最終樣式。
佈局。在知道對一個元素應用哪些規則以後，瀏覽器便可開始計算它要佔據的空間大小及其在屏幕的位置。網頁的佈局模式意味着一個元素可能影響其餘元素，例如元素的寬度通常會影響其子元素的寬度以及樹中各處的節點，所以對於瀏覽器來講，佈局過程是常常發生的。
繪製。繪製是填充像素的過程。它涉及繪出文本、顏色、圖像、邊框和陰影，基本上包括元素的每一個可視部分。繪製通常是在多個表面（一般稱爲層）上完成的。
合成。因爲頁面的各部分可能被繪製到多層，由此它們須要按正確順序繪製到屏幕上，以便正確渲染頁面。對於與另外一元素重疊的元素來講，這點特別重要，由於一個錯誤可能使一個元素錯誤地出如今另外一個元素的上層。