减少HTTP请求资源大小、次数
- 合并、压缩css和js文件。
多个文件合并为一个。减少http请求次数以及减少请求资源的大小。
- 使用字体图标或者SVG代替传统png图
字体图标和SVG是矢量图，放大不会变形，而且渲染速度快。
- 图片懒加载
减少页面首屏渲染http的请求次数
利用占位图
动画用css做，不要js(尽量)
使用雪碧图 CSS Sprite
把较小的资源图片绘制在一张大图上
利用background-position裁剪
静态资源使用cdn分发
把CSS放到顶部，把JS放到底部
优先渲染页面
代码优化
js中减少闭包
减少DOM操作
用react等库就不用考虑这个了
- css使用link而不是@import
import是同步，link是异步
动画使用requestAnimationFrame而不是setInterval
使用DOM 事件委托
import()代码分割，懒加载
看看react-loadable?
移动H5前端性能优化
在Mobile有三秒种演染完成首屏指标，首屏加载需3秒完成或使用Loading。
基于网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB。
加载优化
合并CSS, JavaScript
合并小图片,使用Sprite图
缓存一切可缓存的资源
使用长Cache
使用外联式引用CSS, JavaScript
压缩HTML, CSS, JavaScript
启用GZip
使用首屏加载
使用按需加载
使用滚屏加载
通过Media Query加载
增加Loading进度条
减少Cookie
避免重定向
异步加载第三方资源
CSS优化
CSS写在头部，JavaScript写在尾部或异步
避免图片和iFrame等的空src
尽量避免重设图片大小
图片尽量避免使用DataURL
尽量避免写在HTML标签中写Stye属性
避免CSS表达式
移除空的CSS规则
正确使用Display的属性
不滥用Float
不滥用Web字体
不声明过多的Font-size
值为0时不需要任何单位
标准化各种浏览器前缀
避免让选择符看起来像正则表达式
图片优化
使用(CSS3, SVG, IconFont)代替图片
使用Srcset
webP优于JPG
PNG8优于GIF
首次加载不大于1014KB (基于3秒联通平均网速所能达到值)
图片不宽于640
脚本优化
减少重绘和回流
缓存Dom选择与计算
缓存列表length
尽量使用事件代理,避免批量绑定事件
尽量使用ID选择器
使用touchstart, touchend代替click
渲染优化
HTML使用Viewport
减少Dom节点
尽量使用CSS3动画
合理使requestAnimationFrame动画代替setTimeout
适当使用Canvas动画
Touchmove, Scroll 事件会导致多次渲染
使用(CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL, Video)来触发GPU渲染