前端優化方案
阿新 • • 發佈：2018-05-24
支持 script gzip 取域 緩存 pre 操作 服務器壓力 is-a
網絡通訊方面
- 減少HTTP請求數
- 合並資源，如合並 JavaScript 文件、CSS 文件，利用 CSS Sprite 合並圖片等
- 內聯圖片,data url節省了HTTP請求,但是如果這個圖像在網頁多個地方顯示會加大網頁的內容，延長下載時間。
- 域名提前解析，在頁面中不同域名的鏈接需指定預取域名：
<link rel="dns-prefetch" href="http://this-is-a.com">，IE9+支持 - 避免重定向（重定向會增加http請求的次數）
- cookie優化，cookie越多會導致請求頭越大
- 啟用GZIP壓縮（Accept-Encoding：g-zip）
- 使用 CDN加速，減小服務器壓力
- 合理利用HTTP緩存，通過設置Expires
頁面渲染方面
- 建議將 CSS 文件放在頁首，以便構建 DOM 樹；而將 JavaScript 文件盡量放在頁面下方，防止阻塞構建 DOM 樹；而 JavaScript 的 onload 事件裏，不要寫太多影響首屏渲染的、操作 DOM 樹的 JavaScript 代碼。
- 精簡 JavaScript 和 CSS 代碼，並進行代碼壓縮，使得css和js資源更快的下載
- 編寫高效的CSS代碼
- 重要的圖片或者想讓用戶優先看到的圖片使用img標簽，次要的圖片使用background引入
前端優化方案