總結下我所知道的前端性能優化方案。

時間 2019-11-06

標籤總結知道前端性能優化方案欄目系統性能简体版

原文原文鏈接

引言

總結下我所知道的前端性能優化方案。css

開發者層面

1.樣式置頂，腳本置底

樣式文件的引用（<link />）放在html文檔的head標籤中，腳本文件的引用（<script />）放在body的底部；
另外儘可能減小在頁面中出現片斷性（內聯）的style和script代碼。html

2.精簡資源

壓縮、合併CSS，JS文件前端
對圖片文件進行精簡優化，方式如：web
- OptiPNG工具無損優化PNG圖片；瀏覽器
- 使用webp格式；緩存

3.減小http請求次數

合併css、js文件；性能優化
使用css sprites技術；服務器
icon圖片過多的狀況下，考慮使用iconfont技術；架構

4.延遲加載

使用reauire.js或sea.js按需加載js模塊；app
使用lazyload.js插件延遲加載圖片；

5.刪除重複腳本

重複腳本的問題通常出如今規範稀鬆的團隊或者多部門協做開發的團隊中，儘可能減小這類問題的出現；重複腳本通常在開發時便可發現，由於大多數狀況下這會致使變量覆蓋（如屢次引用jQuery），功能沒法正常使用。

6.緩存Ajax

最快的Ajax請求就是沒有請求。

7.使用JSON做爲數據格式

8.儘可能避免重繪(Repaint)和重排(Reflow)的發生

如下狀況都會發生：

添加或刪除可見的DOM元素；

元素位置改變；

元素尺寸改變（包括：外邊距，內邊距，邊框厚度、寬度、高度等）；

內容改變；

頁面渲染器初始化；

瀏覽器窗口尺寸變化。

重排和重繪不可避免，只能儘可能少的發生。

架構師層面

1.使用CDN加速靜態資源訪問

網上目前也有不少公開免費的CDN資源可使用（舉例國內的，國外的請自行百度~），如：

2.服務器啓用Gzip壓縮

Gzip一般能夠減小70%網頁內容的大小，包括腳本、樣式表、圖片等文件。Gzip比deflate更高效，主流服務器都有相應的壓縮支持模塊。

3.使用BigPipe技術

BigPipe是一個從新設計的基礎動態網頁服務體系。大致思路是，分解網頁成叫作Pagelets的小塊，而後經過Web服務器和瀏覽器創建管道並管理他們在不一樣階段的運行。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。