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

静态资源优化

JPEG: 对彩色照片而广泛使用的有损压缩图形格式
- 不适合: 线条图形或者文字, 图标图形, 因为压缩算法不太适合这种类型, 并且不支持透明度
- 适合: 颜色丰富的图片, 彩色图大焦点图, 通栏banner图, 结构不规则的图形
PNG: 无损压缩的位图图形格式, 支持索引, 灰度, RGB三种颜色以及Alpha通道特性
- 不适合: 无损压缩所以彩色图像体积图像太大, 不太适合
- 适合: 纯色, 透明, 线条绘图, 图标, 边缘清晰, 有大块相同颜色的区域, 颜色数少, 但需要透明
Gif: 以8位色重现真彩色的图像, 仅仅支持完全透明和完全不透明, 如果需要比较通用的动画, gif是唯一选择
- 不适合: 每个像素只有8个比特位, 不适合存储彩色图片
- 适合: 动画, 图标
webp现代图像格式, 可为图像提供无损压缩和有损压缩, 非常灵活
- 同时保证一定程序上图像质量和比较小的体积, 可以插入多帧, 实现动画效果; 可以设置透明度; 采用8位压缩算法; 无损的webp比PNG小26%; 有损的webp比JPEG小25-34%; 比gif更好的动画
- 不适用: 最多处理256色, 不适合于彩色图片
- 适合: 图形和半透明图形
用工具进行图片压缩
- 压缩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
图片尺寸随着网络环境的变化
- 不同的网络环境, 加载不同尺寸和像素的图片, 通过在图片url后缀加上不同的参数改变
响应式图片
- JavaScript绑定事件检测窗口大小
- css媒体查询
- img标签属性 (srcset)
逐步加载图像
- 统一占位符
- 使用LQIP
  - 低质量图像占位符
  - npm install lqip
- 使用SQIP
  - 基于SVG的图像占位符
  - npm install sqip
更好的解决方案
- WebFont代替图片(图标, 切图等)
- 使用Data URI代替图片(Base64)
- 采用Image Spriting
图片服务器自动优化解密
- 图片服务器自动优化是可以在图片url链接上增加爱不同特殊的参数, 服务器自动生成
- 不同格式, 大小, 质量的图片
- 处理方式:
  - 图片裁剪: 按照长边, 短边, 天聪, 拉伸等缩放
  - 图片格式转换: 支持png,gif,jpg,webp等不同图片的压缩率
  - 图片吹: 添加图片水印, 高斯模糊, 重心处理, 裁剪变宽等
  - AI能力: 鉴别黄以及智能抠图, 智能排版,智能配色, 智能合成等AI
html优化
- 精简代码, 减少嵌套
- 减少dom节点数
- 减少无语义代码
- 删除http或http (URL与当前协议头一致的时候, 或者此url在多个协议头都可以用的时候)
- 删除多余空格, 换行, 缩进
- 删除冗余标签属性
- 使用相对路径url
- css文件尽量放在页面头部
  - css加载不会阻塞dom解析,但是会阻塞dom tree渲染, 也会阻塞后面js的执行
  - 任何body元素之前, 可以确保在部分中解析所有css样式, 从而减少了浏览器重排文档的次数
  - 如果放置在页面底部那要等待嘴壶一个css文件下载完成, 此时出现白屏
- JS引用放在HTML底部
  - 放置js的加载, 解析, 执行对阻塞页面的元素正常渲染
- 增加用户体验
  - 设置favicon.ico
  - 增加首屏必要的css和js (骨骼屏)
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
提升JS文件加载性能
- 加载元素的顺序 Js文件放在body
- js变量和函数优化
  - 尽量使用id选择器
  - 避免使用eval
  - js函数保持简介
  - 使用事件节流函数和事件委托
- JS动画优化
  - 避免使用大量JS动画
  - 尽量使用CSS3动画
  - 尽量使用Canvas动画
  - 合理使用requestAnimationFrame动画代替setTimeout, setInterval
- 合理使用缓存
  - 合理缓存DOM对象
  - 缓存列表长度
  - 使用可缓存的Ajax
对Javascript进行缓存
- 对Cookie设置有效时间
- sessionStorage 页面与页面之间的传值
- indexDB 索引数据 (没有网络的情况下可以使用, 石墨文档等)
- localStorage 浏览器存储值
  - 缓存静态文件内容(JS/css)
  - 缓存补偿变更的API接口数据
  - 存储地理位置信息
  - 浏览在页面的具体位置
JS模块化加载方案和选型
- commonjs
- amd
- cmd
- es6