前端性能优化&&网站性能优化

加载优化: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.tencent.com/
     2、使用css3、svg、iconfont代替图片
     3、使用srcset
     4、webP优于jpg
     5、png8优于gif
     6、首次加载不超过1014kb(基于3秒联通平均网速所能达到值)
     7、图片不宽于640

css优化:1、css写在头部,JavaScript写在尾部或异步
      2、不要让link、script、img、iframe等标签出现空的src和href
      3、尽量避免重设图片大小
      4、图片尽量避免使用dataUrl
      5、尽量避免写标签属性
      6、避免css表达式
      7、清除空的css
      8、正确使用display的属性
      9、不滥用float
      10、不滥用web字体
      11、不声明过多的font-size
      12、值为0的时候不需要任何单位
      13、标准化各种浏览器的前缀
      14、避免冗长的选择符

脚本优化:1、减少重绘和回流
     2、缓存DOM选择与计算
     3、尽量使用事件代理,避免批量绑定事件
     4、尽量使用ID选择器
     5、使用touchstart、touchend代替click
     6、合理使用节流和防抖
     7、避免不必要的跳转,合理取消浏览器默认事件
     8、避免404
     9、配置ETags
     10、少用全局变量,尽量用局部变量
        11、多个变量或常量合并声明

渲染优化: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渲染

总结一下:

  使用正确的盒子嵌套,避免空标签,空属性
  避免冗长的选择器
  标准化各种浏览器的前缀
  使用精灵图,减少与服务器请求
  避免使用标签属性
  值为0的时候不需要带单位
  尽量不要重设图片尺寸
  webP优于jpg,png8优于gif
  使用节流和防抖
  使用预加载和懒加载,异步加载第三方资源
  使用压缩工具,合并压缩HTML、css、JavaScript
  使用长连接
  减少cookie
  使用事件委托
  避免不必要的跳转,合理使用取消浏览器默认事件
  少用全局变量,多用局部变量,多个变量或常量可以合并声明
  合理使用requestAnimationFrame动画代替setTimeout

猜你喜欢

转载自www.cnblogs.com/wuqilang/p/11204634.html