前端性能優(yōu)化實踐

關(guān)于 性能優(yōu)化 是個大的面，這篇文章主要涉及到 前端 的幾個點，如 前端性能優(yōu)化 的流程、常見技術(shù)手段、工具等。

提及 前端性能優(yōu)化 ，大家應(yīng)該都會想到 雅虎軍規(guī)，本文會結(jié)合 雅虎軍規(guī) 融入自己的了解知識，進(jìn)行的總結(jié)和梳理 。

雅虎軍規(guī)

首先，我們先來看看**“雅虎軍規(guī)”**的35條：

盡量減少 HTTP 請求個數(shù)——須權(quán)衡

使用 CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）

為文件頭指定 Expires 或 Cache-Control ，使內(nèi)容具有緩存性。

避免空的 src 和 href

使用 gzip 壓縮內(nèi)容

把 CSS 放到頂部

把 JS 放到底部

避免使用 CSS 表達(dá)式

將 CSS 和 JS 放到外部文件中

減少 DNS 查找次數(shù)

精簡 CSS 和 JS

避免跳轉(zhuǎn)

剔除重復(fù)的 JS 和 CSS

配置 ETags

使 AJAX 可緩存

盡早刷新輸出緩沖

使用 GET 來完成 AJAX 請求

延遲加載

預(yù)加載

減少 DOM 元素個數(shù)

根據(jù)域名劃分頁面內(nèi)容

盡量減少 iframe 的個數(shù)

避免 404

減少 Cookie 的大小

使用無 cookie 的域

減少 DOM 訪問

開發(fā)智能事件處理程序

用 代替 @import

避免使用濾鏡

優(yōu)化圖像

優(yōu)化 CSS Spirite

不要在 HTML 中縮放圖像——須權(quán)衡

favicon.ico要小而且可緩存

保持單個內(nèi)容小于25K

打包組件成復(fù)合文本

總結(jié)

以上是生活随笔為你收集整理的前端性能优化分析（雅虎军规）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。