Saber2pr's Blog

前端性能优化

减少HTTP请求资源大小、次数

  1. 合并、压缩css和js文件。

多个文件合并为一个。减少http请求次数以及减少请求资源的大小。

  1. 使用字体图标或者SVG代替传统png图

字体图标和SVG是矢量图，放大不会变形，而且渲染速度快。

  1. 图片懒加载

减少页面首屏渲染http的请求次数

利用占位图

  1. 动画用css做，不要js(尽量)

  2. 使用雪碧图 CSS Sprite

把较小的资源图片绘制在一张大图上

利用background-position裁剪

  1. 静态资源使用cdn分发

  2. 把CSS放到顶部，把JS放到底部

优先渲染页面

代码优化

  1. js中减少闭包

  2. 减少DOM操作

用react等库就不用考虑这个了

  1. css使用link而不是@import

import是同步，link是异步

  1. 动画使用requestAnimationFrame而不是setInterval

  2. 使用DOM 事件委托

  3. import()代码分割，懒加载

看看react-loadable?

移动H5前端性能优化

在Mobile有三秒种演染完成首屏指标，首屏加载需3秒完成或使用Loading。

基于网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB。

加载优化

  1. 合并CSS, JavaScript

  2. 合并小图片,使用Sprite图

  3. 缓存一切可缓存的资源

  4. 使用长Cache

  5. 使用外联式引用CSS, JavaScript

  6. 压缩HTML, CSS, JavaScript

  7. 启用GZip

  8. 使用首屏加载

  9. 使用按需加载

  10. 使用滚屏加载

  11. 通过Media Query加载

  12. 增加Loading进度条

  13. 减少Cookie

  14. 避免重定向

  15. 异步加载第三方资源

CSS优化

  1. CSS写在头部，JavaScript写在尾部或异步

  2. 避免图片和iFrame等的空src

  3. 尽量避免重设图片大小

  4. 图片尽量避免使用DataURL

  5. 尽量避免写在HTML标签中写Stye属性

  6. 避免CSS表达式

  7. 移除空的CSS规则

  8. 正确使用Display的属性

  9. 不滥用Float

  10. 不滥用Web字体

  11. 不声明过多的Font-size

  12. 值为0时不需要任何单位

  13. 标准化各种浏览器前缀

  14. 避免让选择符看起来像正则表达式

图片优化

  1. 使用(CSS3, SVG, IconFont)代替图片

  2. 使用Srcset

  3. webP优于JPG

  4. PNG8优于GIF

  5. 首次加载不大于1014KB (基于3秒联通平均网速所能达到值)

  6. 图片不宽于640

脚本优化

  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渲染