前端静态资源优化

[MengZhaoFly]

图片

各种图片适应场景

1. JPEG

• 有损压缩图形格式
• 非常适合：颜色丰富的照片、彩色图大焦点图、通栏 banner 图；结构不规则的图形
• 不适合：线条图形和文字、图标图形，因为它的压缩算法不太这些类型的图形；并且不支
  持透明度

2. PNG

• 无损压缩的图形格式
• 介绍：栅格图形。PNG 最初是作为替代 GIF 来设计的，能够显示 256 色，文件比 JPEG或者 GIF 大，但是 PNG 非常好的保留了图像质量。支持 Alpha 通道的半透明和透明特性。最高支持 24 位彩色图像（PNG-24）和 8 位灰度图像（PNG-8）。
• 不适合：由于是无损存储，彩色图像体积太大，所以不太适合。
• 非常适合：纯色、透明、线条绘图，图标；边缘清晰、有大块相同颜色区域；颜色数较少
  但需要半透明。

3. GIF

• 以 8 位色（即 256 种颜色）重现真彩色的图像，采用 LZW 压缩算法进行编码
• 不适合：每个像素只有 8 比特，不适合存储彩色图片
• 非常适合：动画，图标

4. Webp

• 不适合：最多处理 256 色，不适合于彩色图片
• 非常适合：适用于图形和半透明图像

图片处理

1. 压缩工具
   imagemin-webpack-plugin

2. 响应式图片
   image srcset 属性

3. 真的需要图片吗？

• Web Font 代替图片
• 使用 Data URI 代替图片
• 采用 Image spriting（雪碧图）

精简 HTML 代码

• 减少 HTML 的嵌套
• 减少 DOM 节点数
• 删除 http 或者 https，如果URL的协议头和当前页面的协议头一致的，或者此
  URL 在多个协议头都是可用的，则可以考虑删除协议头

文件放在合适位置

• CSS 样式文件链接尽量放在页面头部
  CSS 加载不会阻塞 DOM tree 解析，但是会阻塞 DOM Tree 渲染，也会阻塞后面 JS 执行。
  任何 body 元素之前，可以确保在文档部分中解析了所有 CSS 样式（内联和外联），从而减
  少了浏览器必须重排文档的次数。如果放置页面底部，就要等待最后一个 CSS 文件下载完成，
  此时会出现"白屏"，影响用户体验。

• JS 引用放在 HTML 底部
  防止 JS 的加载、解析、执行对阻塞页面后续元素的正常渲染。

提升 CSS 渲染性能

• 详见：css triger
• 使用外链的 CSS
• 尽量避免使用 @import

JavaScript 优化总体原则

勿提前优化

1. JavaScript 变量和函数优化

• 尽量使用 id 选择器
• 尽量避免使用 eval
• JavaScript 函数尽可能保持简洁
• 使用事件节流函数
• 使用事件委托

2. JavaScript 动画优化

• 避免添加大量 JavaScript 动画
• 尽量使用 CSS3 动画
• 尽量使用 Canvas 动画
• 合理使用 requestAnimationFrame 动画代替 setTimeout、setInterval

3. 合理使用缓存

• 合理缓存 DOM 对象
• 缓存列表长度
• 使用可缓存的 Ajax

4. 缓存

5. LocalStorage
   应用于：

• 缓存静态文件内容 JavaScript /CSS（比如百度M站首页）
• 缓存不常变更的 API 接口数据
• 储存地理位置信息
• 浏览在页面的具体位置

2. http 缓存

3. PWA