一、渲染優化
1、動畫優化
①使用css3動畫
② 使用requestAnimation +Frame動畫 代替seTimeout
2、高頻事件優化
①touch事件
②scroll事件
3、圖片優化
①圖片壓縮
② webp 優于 jpg
③ png優于gif
④ 對圖片使用懶加載
⑤ 避免使用DataURL
4、GPU加速
①使用transform觸發
② transform觸發
③ opacity
5、DOM層次不宜躲過
6、js主動的釋放內存
二、css優化
1、層次不超過3層
2、合并css規范 合并margin bachground 等特性
3、移除空的css的規則
4、去掉0的單位
5、不要申明過多的fontsize
三、加載優化
1、減少http請求
2、壓縮js css html 靜態資源并在服務器端設置gzip
3、首屏加載 不要超過120k 大小
4、壓縮圖片
5、避免重定向
6、異步加載第三方資源
①async 注：只適用于外部腳本 只有適用src屬性時（HTML5新特性）
②動態創建script
③defer 注：規定是否對腳本進行延遲執行 直到頁面加載為止 只有IE支持
語法 <script defer = "value" >
7、oneRequest 首次內斂css javascript 存 localstorge 第二次讀取直接localstorge
8、按需加載
①滾動加載
②點擊加載
四、腳本執行優化
1、避免iframe img 等src 為空
2、圖片盡量避免使用DataUrl
3、避免重設圖片的大小
4、點擊事件優化
5、注意scrloll resize綁定時機
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
