前端优化总结

  • js优化：

    • 减少重绘和回流
      a) 避免不必要的Dom操作
      b) 尽量改变Class而不是Style，使用classList代替className
      c) 避免使用document.write
      d) 减少drawImage
      《页面重绘和回流以及优化》
    • 缓存Dom选择与计算
      每次Dom选择都要计算，缓存他
    • 缓存列表.length
      每次.length都要计算，用一个变量保存这个值
    • 尽量使用事件代理，避免批量绑定事件
    • 尽量使用ID选择器
    • TOUCH事件优化
      使用touchstart、touchend代替click，因快影响速度快。但应注意Touch响应过快，易引发误操作
    • 减少阻塞
    • 把所有变量声明统一放到函数的起始位置 （在后部声明的变量也会被JS视为在头部定义，由此会产生问题）
    • 不要扩充内置原型（虽然给Object(), Function()之类的内置原型增加属性和方法很巧妙，但是会破坏可维护性）
    • 优化书写方法
      • 《编写可维护的代码》
      • 单变量模式
      • Hoisting：把所有变量声明统一放到函数的起始位置 （在后部声明的变量也会被JS视为在头部定义，由此会产生问题）
      • 不要扩充内置原型（虽然给Object(), Function()之类的内置原型增加属性和方法很巧妙，但是会破坏可维护性）
      • 不要用隐含的类型转换
      • 不要用 eval()
      • 用 parseInt() 进行数字转换
      • （规范）左大括号的位置
      • 构造器首字母大写
      • 写注释
      • 不要用 void
      • 不要用 with 语句
      • 不要用 continue 语句
      • 尽量不要用位运算
    • 《js 压缩》
    • 《JavaScript 秘密花园-数组》

  • jQuery优化

  • CSS优化

    • 《Autoprefixer》

    • 避免使用CSS表达式
    • 避免在HTML标签中写style，这样会影响CSS的渲染。
    • 移除空的CSS规则，空的CSS规则增加了CSS文件的大小，且影响CSS树的执行
    • 正确使用Display的属性
      Display属性会影响页面的渲染，因此请合理使用
      a) display:inline后不应该再使用width、height、margin、padding以及float
      b) display:inline-block后不应该再使用float
      c) display:block后不应该再使用vertical-align
      d) display:table-*后不应该再使用margin或者float、
    • Float在渲染时计算量比较大，尽量减少使用
    • Web字体需要下载，解析，重绘当前页面，尽量减少使用
    • 过多的Font-size引发CSS树的效率
    • 为了浏览器的兼容性和性能，值为0时不要带单位
    • 标准化各种浏览器前缀
      a) 无前缀应放在最后
      b) CSS动画只用 （-webkit- 无前缀）两种即可
      c) 其它前缀为 -webkit- -moz- -ms- 无前缀 四种，（-o-Opera浏览器改用blink内核，所以淘汰）
    • 高级选择器执行耗时长且不易读懂，避免使用。
    • 外链 CSS 中避免 @import 引入。
    • 《为什么每个前端开发者都要理解页面的渲染》
    • 《优化浏览器渲染》

  • SEO优化

  • WEB性能优化

    • 1.图片优化：

      • 优先使用CSS效果、CSS动画来替代图片,避免在低端机上使用大量CSS3渐变阴影效果，可考虑降级效果来提升流畅度。
      • 移动端可以使用网络字体来替代图片。
      • 使用base64来优化背景图片(最好的小的背景图片或者图标，<img>标签最好不要使用) 
      • 合并小图片使用雪碧图。
      • 避免图片和iFrame等的空Src
        • 空Src会重新加载当前页面，影响速度和效率.在使用图片异步加载时，可以选将src设置为一个一像素的小图。base64形式的。
      • 尽量避免重设图片大小
        • 重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能。
      • 颜色丰富的照片，JPG是通用的选择:
        • 人眼的结构很适合查看JPG压缩后的照片，可以充分的忽略并在脑中补齐细节
        • JPG在压缩率不高时保留的细节还是不错的
        • WebP能够比JPG减少30%的体积，但目前兼容性较差(Chrome,Opera,Android Chrome,Android Browser).
      • 如果需要较通用的动画，GIF是唯一可用的选择:(APNG只有在Firefox，Safari，iOS Safari上有效，且是无损压缩)
        • GIF支持的颜色范围为256色，而且仅支持完全透明/完全不透明
        • GIF在显示颜色丰富的动画时可能出现颜色不全、边缘锯齿等问题
      • 如果图片由标准的几何图形组成，或需要使用程序动态控制其显示特效，可以考虑SVG格式(IE8+)
        • SVG是使用XML定义的矢量图形，生成的图片在各种分辨率下均可自由放缩
        • SVG中可以通过JavaScript等接口自由变换图片特效，可以完成其中部分元素的自由旋转、移动、变换颜色等
      • 如果需要清晰的显示颜色丰富的图片，PNG比较好
        • PNG-8能够显示256种颜色，但能够同时支持256阶透明，因此颜色数较少但需要半透明的情景（如微信动画大表情）可以考虑PNG-8
        • PNG-24可以显示真彩色，但不支持透明，颜色丰富的图片推荐使用（如屏幕截图、界面设计图）
        • PNG-32可以显示真彩色，同时支持256阶透明，效果最好但尺寸也最大
      • 《响应式图片》
        • 　Srcset和sizes
      • 图片优化工具
      • 实践

    • 2.工程化前端部署：

    • 3.性能测试工具

    • 4.浏览器缓存

    • 5.压缩HTML,CSS,JS

      • 减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip

    • 6.加载优化

      • 按需加载（注意页面重绘影响性能）
      • 滚屏加载
      • 预加载（提前加载下一页）
      • 减少请求（重要)初始请求不多于4个。

    • 7.渲染优化

      •  HTML使用Viewport
        Viewport可以加速页面的渲染，请使用以下代码
        <meta name=”viewport” content=”width=device-width, initial-scale=1″>
      • 减少Dom节点
        Dom节点太多影响页面的渲染，应尽量减少Dom节点
      • 动画优化
        a) 尽量使用CSS3动画
        b) 合理使用requestAnimationFrame动画代替setTimeout
        c) 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）
      •  高频事件优化
        Touchmove、Scroll 事件可导致多次渲染
        a) 使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染
        b) 增加响应变化的时间间隔，减少重绘次数
      •  GPU加速
        CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用
        PS：过渡使用会引发手机过耗电增加　　　　　　

    • 8.其它

      • 减少cookie:Cookie会影响加载速度，所以静态资源域名不使用Cookie
      • 避免重定向:重定向会影响加载速度，所以在服务器正确设置避免重定向
      • 异步加载第三方资源:第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源
      • 服务端开启keep-alive  《HTTP协议头部与Keep-Alive模式详解》

参考资料：

《Web性能优化：图片优化》

《移动H5前端性能优化指南》
posted @ 2015-03-25 15:44  hippor  阅读(245)  评论(0)  编辑  收藏  举报