前端性能優(yōu)化主要關(guān)注的點(diǎn)就是速度，具體分為加載性能和運(yùn)行性能。

加載性能

檢查加載性能可以參考window.performance的使用。

包括白屏?xí)r間，請求/響應(yīng)時間，dom加載時間等。

應(yīng)對策略基本需要考慮文件打包、gzip壓縮、cdn引入第三方庫、js代碼懶加載、圖片懶加載、圖片質(zhì)量壓縮、瀏覽器緩存等。
還有就是如果對SEO要求比較高（大型資訊類網(wǎng)頁）可以考慮使用SSR(服務(wù)端渲染)。

運(yùn)行性能

檢查運(yùn)行性能可以使用chrome開發(fā)者工具上的performance->點(diǎn)開rendering，
勾選Paint flashing（高亮重繪區(qū)域）和Frame Rendering Stats（顯示幀渲染信息），然后瀏覽量頁面就可以看到網(wǎng)頁渲染變化。

應(yīng)對策略，避免頻繁操作dom，現(xiàn)在的mvvm框架（vue/react）采用數(shù)據(jù)驅(qū)動的dom的方式，可以幫助我們合并多余的dom操作，提高渲染性能。

js循環(huán)數(shù)組應(yīng)該先循環(huán)第一級再循環(huán)第二級，性能較好。
條件非常多的情況不要使用if-else，使用對象key-value封裝的形式比較好。

高頻觸發(fā)的事件回調(diào)需要考慮函數(shù)防抖和節(jié)流（scroll，input等）。

盡量避免一幀一幀的實(shí)現(xiàn)動畫，優(yōu)先使用css3動畫效果。transform 和 opacity不會觸發(fā)重排和重繪，只會觸發(fā)合成器處理。

如果使用css3動畫效果還是有體驗(yàn)問題，可以考慮啟用GPU硬件加速（使用GPU渲染）。默認(rèn)頁面渲染是靠瀏覽器的渲染引擎的，一些復(fù)雜的動畫（如3d變幻等）瀏覽器廠商會支持自動開啟GPU硬件加速。

.demo {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}