web前端性能优化指南(非常经典) 原创 http://www.imooc.com/article/22782?block_id=tuijian_wz

來自一個 H5 的前端優化

移动 H5 前端性能优化指南 http://isux.tencent.com/h5-performance.html http://djt.qq.com/article/view/1416

加載優化

1. 合併 CSS, JavaScript
2. 合併小圖片、使用雪碧圖
3. 緩存一切可緩存的資源
4. 使用長 Catche
5. 使用外聯式引用 CSS, JavaScript
6. 壓縮 HTML, CSS, JavaScript
7. 啟用 GZip
8. 使用首屏加載
9. 使用按需加載
10. 使用滾屏加載
11. 通過 Media Query 加載
12. 增加 Loading 進度條
13. 減少 Cookie
14. 避免重定向
15. 異步加載第三方資源

CSS 優化

1. CSS 寫在頭部
2. 避免圖片和 iFrame 等的空 Src
3. 盡量避免重設圖片大小
4. 圖片盡量避免使用 DataURL (why?)
5. 盡量避免 HTML 標籤中寫 style 屬性
6. 避免 CSS 表達式
7. 移除空的 CSS 規則
8. 正確使用 display 屬性
9. 不濫用 float
10. 不濫用 webfont
11. 不聲明過多的 font-size
12. 值為 0 時不需要單位
13. 標準化各種瀏覽器前綴
14. 避免讓選擇符看起來像正規表達式

图片优化

1. 使用智圖 https://zhitu.isux.us/
   • 智图是腾讯 ISUX 前端团队开发的一个专门用于图片压缩和图片格式转换的平台，其功能包括针对 png,jpeg,gif 等各类格式图片的压缩，以及为上传图片自动选择最优的图片格式。同时，智图平台还会为用户转换一份 webp 格式的图片。
2. 使用 (CSS3、SVG、IconFont) 代替圖示
   • 使用 SVG Sprite 替代 iconfont
3. 使用 srcset
4. webP 優於 jpg
5. Png8 優於 gif
   • png8 和 png24 格式的使用和区别介绍
6. 首次加載不大于 1014kb [基於 3 秒聯通平均網速所能到達值]
7. 图片不宽于 640

脚本优化

1. 減少重繪和回流
   • 页面重绘和回流以及优化
2. 緩存 Dom 選擇與計算
   • 緩存：快取、cache: 是一种处理方式的统称
3. 缓存列表 .length
4. 盡量使用事件代理，避免批量綁定事件
5. 盡量使用 ID 選擇器
6. 使用 touchstart、touchend 代替 click

渲染優化

https://kknews.cc/zh-tw/tech/om923go.html

1. HTML 使用 viewport
2. 減少 Dom 節點
3. 尽置使用 CSS3 动画
4. 合理使用 requestAnimationFrame 動畫代替 setTimeout
5. 適當使用 convas動畫
6. Touchmove、Scroll 事件會導致多次渲染
7. 使用 (CSS transitions, CSS3 3D transforms, Opacity, WebGL, Video) 來觸發 GPU 渲染。