資訊專欄INFORMATION COLUMN
摘要：不推薦移動端瀏覽器前端優化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應用交互等。
GitHub鏈接：https://github.com/zwwill/blo...
圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優化策略進行羅列
注意，是羅列不是展開，遇到不會不懂的點還請站外擴展
開車速度有點快，坐穩了。
PC瀏覽器前端優化策略tips : 這么多前端優化點你都記得住嗎？反正我是收藏起來備查的。
PC端優化的策略很多，如 YSlow（YSlow 是 Yahoo 發布的一款 Firefox 插件，現 Chrome 也可安裝，可以對網站的頁面性能進行分析，提出對該頁面性能優化的建議）原則，或者 Chrome 自帶的 Audits 等，總結起來主要包括網絡加載類、頁面渲染類、CSS 優化類、JavaScript 執行類、緩存類、圖片類、架構協議類等幾類，下面逐一介紹。
網絡加載類 1．減少 HTTP 資源請求次數在前端頁面中，通常建議盡可能合并靜態資源圖片、JavaScript 或 CSS 代碼，減少頁面請求數和資源請求消耗，這樣可以縮短頁面首次訪問的用戶等待時間。通過構建工具合并雪碧圖、CSS、JavaScript 文件等都是為了減少 HTTP 資源請求次數。另外也要盡量避免重復的資源，防止增加多余請求。
2．減小 HTTP 請求大小除了減少 HTTP 資源請求次數，也要盡量減小每個 HTTP 請求的大小。如減少沒必要的圖片、JavaScript、CSS 及 HTML 代碼，對文件進行壓縮優化，或者使用 gzip 壓縮傳輸內容等都可以用來減小文件大小，縮短網絡傳輸等待時延。前面我們使用構建工具來壓縮靜態圖片資源以及移除代碼中的注釋并壓縮，目的都是為了減小 HTTP 請求的大小。
3．將 CSS 或 JavaScript 放到外部文件中，避免使用 頁面渲染類 1．把 CSS 資源引用放到 HTML 文件頂部一般推薦將所有 CSS 資源盡早指定在 HTML 文檔 中，這樣瀏覽器可以優先下載 CSS 并盡早完成頁面渲染。
2．JavaScript 資源引用放到 HTML 文件底部JavaScript 資源放到 HTML 文檔底部可以防止 JavaScript 的加載和解析執行對頁面渲染造成阻塞。由于 JavaScript 資源默認是解析阻塞的，除非被標記為異步或者通過其他的異步方式加載，否則會阻塞 HTML DOM 解析和 CSS 渲染的過程。
3．盡量預先設定圖片等大小在加載大量的圖片元素時，盡量預先限定圖片的尺寸大小，否則在圖片加載過程中會更新圖片的排版信息，產生大量的重排
4．不要在 HTML 中直接縮放圖片在 HTML 中直接縮放圖片會導致頁面內容的重排重繪，此時可能會使頁面中的其他操作產生卡頓，因此要盡量減少在頁面中直接進行圖片縮放。
5．減少 DOM 元素數量和深度HTML 中標簽元素越多，標簽的層級越深，瀏覽器解析 DOM 并繪制到瀏覽器中所花的時間就越長，所以應盡可能保持 DOM 元素簡潔和層級較少。
6．盡量避免在選擇器末尾添加通配符
CSS 解析匹配到 渲染樹的過程是從右到左的逆向匹配，在選擇器末尾添加通配符至少會增加一倍多計算量。
7．減少使用關系型樣式表的寫法直接使用唯一的類名即可最大限度的提升渲染引擎繪制渲染樹等效率
8．盡量減少使用JS動畫JS 直接操作 DOM 極容易引起頁面的重排
9．CSS 動畫使用 translate、scale 代替 top、height盡量使用 CSS3 的 translate、scale 屬性代替 top、left 和 height、width，避免大量的重排計算
10．盡量避免使用