# 移动H5前端性能优化 - PC优化手段在Mobile端同样适用 - 在Mobile端有三秒渲染完成首屏指标 - 首页加载3s完成或使用Loading - 基于联通3G网络平均338KB/S(2.71MB/S) ,所以首屏资源不应该超过1014KB ## 加载优化 1. 合并 CSS, JavaScript 2. 合并小图片,使用雪碧图 3. 缓存一切可以缓存的资源 4. 使用长Cache 5. 使用外联引用 CSS, JavaScript 6. 压缩HTML, CSS, JavaScript 7. 启动 GZip 8. 使用首屏加载 9. 使用按需加载 10. 使用滚屏加载 11. 通过 Media Query 加载 12. 增加 Loading 进度条 13. 减少 Cookie 14. 避免重定向 15. 异步加载第三方资源 ## 图片优化 1. 使用智图 http://zhitu.isux.us/ 2. 使用( CSS , SVG, IconFont ) 代替图片 3. 使用 Srcset 4. webP 优于 JPG 5. PNG8 优于 GIF 6. 首次加载不大于1014KB(基于3S联通平均网速所有达到的值) 7. 图片宽不大于640 ## CSS优化 1. CSS 写在头部, JavaScript 写在尾部或异步 2. 避免图片和IFrame 等的空 src 3. 尽量避免重设图片大小 4. 图片尽量避免使用 DataURL 5. 尽量避免写在 HTML 标签中写 Style 属性 6. 避免CSS 表达式 7. 移除空的CSS 规则 8. 正确使用 Display 的属性 9. 不滥用 Float 10. 不滥用 Web字体 11. 不声明过多的 Font-size 12. 值为0 时不需要任何单位 13. 标准化各种浏览器前缀 14. 避免让选择符看起来像正则表达式 ## 脚本优化 1. 减少重绘和回流 2. 缓存DOM选择与计算 3. 缓存列表的length 4. 尽量使用事件代理,避免批量绑定事件 5. 尽量使用ID选择符 6. 使用touchstart, touchend 代替click ## 渲染优化 1. HTML 使用 Viewport 2. 减少DOM节点 3. 尽量使用CSS3 动画 4. 合理使用 requestAnimationFrame 动画代替 setTimeout 5. 适当使用 Canvas 动画 6. Touchmove, Scroll 事件会导致多次渲染 7. 使用 ( CSS3 transitions, CSS3 3D transforms ,Opacity , Canvas, WebGL, Video ) 来触发GPU渲染