2020-10-27 1.前端性能优化 - 静态资源优化

静态资源优化

1. JPEG: 对彩色照片而广泛使用的有损压缩图形格式

   • 不适合: 线条图形或者文字, 图标图形, 因为压缩算法不太适合这种类型, 并且不支持透明度
   • 适合: 颜色丰富的图片, 彩色图大焦点图, 通栏banner图, 结构不规则的图形

2. PNG: 无损压缩的位图图形格式, 支持索引, 灰度, RGB三种颜色以及Alpha通道特性

   • 不适合: 无损压缩所以彩色图像体积图像太大, 不太适合
   • 适合: 纯色, 透明, 线条绘图, 图标, 边缘清晰, 有大块相同颜色的区域, 颜色数少, 但需要透明

3. Gif: 以8位色重现真彩色的图像, 仅仅支持完全透明和完全不透明, 如果需要比较通用的动画, gif是唯一选择

   • 不适合: 每个像素只有8个比特位, 不适合存储彩色图片
   • 适合: 动画, 图标

4. webp现代图像格式, 可为图像提供无损压缩和有损压缩, 非常灵活

   • 同时保证一定程序上图像质量和比较小的体积, 可以插入多帧, 实现动画效果; 可以设置透明度; 采用8位压缩算法; 无损的webp比PNG小26%; 有损的webp比JPEG小25-34%; 比gif更好的动画
   • 不适用: 最多处理256色, 不适合于彩色图片
   • 适合: 图形和半透明图形

5. 用工具进行图片压缩

   • 压缩png
     • npm install -g node-pngquant-native jdf-png-native
     • 跨平台, 压缩比高, 压缩png24非常好
   • 压缩jpg
     • npm install -g jpegtran
     • 跨平台
   • 压缩gif
     • Gifsicle: 通过改变每帧的比例, 减小gif文件大小, 同时可以使用透明来达到更小的文件大小
     • 使用方式
       • 优化级别设置为不小于2, 1的话基本不压缩 gifsicle --optimize=3 out.gif in.gif
       • 将透明部分截去掉: gifsicle --optimize=3 --crop-transparency out.gif in.gif

6. 图片尺寸随着网络环境的变化

   • 不同的网络环境, 加载不同尺寸和像素的图片, 通过在图片url后缀加上不同的参数改变

7. 响应式图片

   • JavaScript绑定事件检测窗口大小
   • css媒体查询
   • img标签属性 (srcset)

8. 逐步加载图像

   • 统一占位符
   • 使用LQIP
     • 低质量图像占位符
     • npm install lqip
   • 使用SQIP
     • 基于SVG的图像占位符
     • npm install sqip

9. 更好的解决方案

   • WebFont代替图片(图标, 切图等)
   • 使用Data URI代替图片(Base64)
   • 采用Image Spriting

10. 图片服务器自动优化解密

    • 图片服务器自动优化是可以在图片url链接上增加爱不同特殊的参数, 服务器自动生成

    • 不同格式, 大小, 质量的图片

    • 处理方式:

      • 图片裁剪: 按照长边, 短边, 天聪, 拉伸等缩放
      • 图片格式转换: 支持png,gif,jpg,webp等不同图片的压缩率
      • 图片吹: 添加图片水印, 高斯模糊, 重心处理, 裁剪变宽等
      • AI能力: 鉴别黄以及智能抠图, 智能排版,智能配色, 智能合成等AI

11. html优化

    • 精简代码, 减少嵌套

    • 减少dom节点数

    • 减少无语义代码

    • 删除http或http (URL与当前协议头一致的时候, 或者此url在多个协议头都可以用的时候)

    • 删除多余空格, 换行, 缩进

    • 删除冗余标签属性

    • 使用相对路径url

    • css文件尽量放在页面头部

      • css加载不会阻塞dom解析,但是会阻塞dom tree渲染, 也会阻塞后面js的执行
      • 任何body元素之前, 可以确保在部分中解析所有css样式, 从而减少了浏览器重排文档的次数
      • 如果放置在页面底部 那要等待嘴壶一个css文件下载完成, 此时出现白屏

    • JS引用放在HTML底部

      • 放置js的加载, 解析, 执行对阻塞页面的元素正常渲染

    • 增加用户体验

      • 设置favicon.ico
      • 增加首屏必要的css和js (骨骼屏)

12. css优化

    • 提升CSS渲染性能
      • 谨慎使用expensive属性, 如:nth-child伪类, position:fixed;定位
      • 尽量减少样式层级数, 如 div ul li span i {color: blue;}
      • 尽量避免使用占用更多CPU和内存的属性, text-indent: -9999px;
      • 尽量避免使用耗电量大的属性, 比如CSS3 3D transforms css transitions, Opacity
    • 合理使用css选择器
      • 尽量避免使用CSS表达式: background-color: expression(Math.random() > 0.5 ? 'red' : 'blue')
      • 尽量避免使用通配符选择器
      • 尽量避免类正则的属性选择器
    • 提升CSS加载文件的性能
      • 使用外链的css
      • 避免使用@import (阻塞css文件的加载和js文件)
    • 精简css代码
      • 缩写语句
      • 删除不必要的0
      • 删除不必要的单位
      • 删除过多的分好, kongge,述职
      • 减少样式表的大小(压缩)
    • 合理使用webFonts
      • 将字体部署到CDN上
      • 将字体以BASE64的形式保存在css中, 通过localStorage进行缓存
      • Google字体因为某些不可抗拒原因, 应该使用国内托管服务
    • CSS动画优化
      • 尽量避免使用动画
      • 延迟动画初始化
      • 结合SVG

13. 提升JS文件加载性能

    • 加载元素的顺序 Js文件放在body
    • js变量和函数优化
      • 尽量使用id选择器
      • 避免使用eval
      • js函数保持简介
      • 使用事件节流函数和事件委托
    • JS动画优化
      • 避免使用大量JS动画
      • 尽量使用CSS3动画
      • 尽量使用Canvas动画
      • 合理使用requestAnimationFrame动画代替setTimeout, setInterval
    • 合理使用缓存
      • 合理缓存DOM对象
      • 缓存列表长度
      • 使用可缓存的Ajax

14. 对Javascript进行缓存

    • 对Cookie设置有效时间
    • sessionStorage 页面与页面之间的传值
    • indexDB 索引数据 (没有网络的情况下可以使用, 石墨文档等)
    • localStorage 浏览器存储值
      • 缓存静态文件内容(JS/css)
      • 缓存补偿变更的API接口数据
      • 存储地理位置信息
      • 浏览在页面的具体位置

15. JS模块化加载方案和选型

    • commonjs
    • amd
    • cmd
    • es6