從前的日色變得慢,車,馬,郵件都慢······
巴特,現在前端是龐大的,針對方方面面的資源都有不同的方式。
站在用戶角度,我們希望頁面加載得更快、頁面對用戶的操作響應得更及時,能夠給用戶提供更為友好的體驗。
站在服務商的角度,我們希望前端優化能夠減少頁面請求數、或者減小請求所占帶寬,能夠節省可觀的資源。
1. 減少請求資源或者次數
- 盡量合並壓縮 css 和 js 文件:為了減少http請求次數以及減少請求資源的大小
- 采用圖片懶加載(延遲加載):減少頁面第一次加載過程中http的請求次數
- 能用css做的效果,不要用js做,能用原生js做的,不要輕易去使用第三方插件:避免引入第三方大量的庫
- 減少對cookie的使用:減少本地cookie存儲內容的大小
2. 代碼優化
- 在js中盡量減少閉包的使用:原因:使用閉包后,閉包所在的上下文不會被釋放
- 減少DOM操作,主要是減少DOM的重繪與回流(重排)
- 在js中避免嵌套循環和"死循環":一旦遇到死循環,瀏覽器就會直接卡掉
- 把css放在body上,把js放在body下面
- 盡量將一個動畫元素單獨設置為一個圖層:避免重繪或者回流的大小
- js封裝過程中,盡量做到低耦合高內聚:減少頁面的冗余代碼
3. 其他
- 圖片壓縮
- 使用內容分發cdn加速
- 靜態資源緩存