资源合并

CSS sprites雪碧图

多张图片合成一张图
webpack可以实现雪碧图

iconfont

把图标变成字体文件

svg symbols

最新方案
使用SVG文件支持渐变

资源内联

• 小图片 → data URL
• 小CSS文件 →

• 小JS文件 箭头 →

  资源压缩

  gzip

• nginx

https://docs.nginx.com/nginx/admin-guide/web-server/compression/

• Apache

https://ubiq.co/tech-blog/enable-gzip-compression-apache/

• Node.js

https://nodejs.org/api/zlib.html#zlib_zlib

代码精简

• HTML
  • 删空格、删闭合
• CSS
  • 删未用
• JS
  • 改名、tree shaking
• SVG
  • 删无用标签、属性
• 图片
  • 减少体积（有损/无损）

优化Cookie

4kb
不要用Cookie存数据，用LocalStorage/SessionStorage
css来自1.com js来自2.com json来自3.com
用新域名的好处是CookieFree

CDN内容分发网络

在多地设置服务器，把内容分发到各个服务器
负载均衡
优点

1. cookie Free
2. 并行请求/多路复用
3. 下载速度快

缺点

1. 要花钱
2. 部署复杂
3. 可控性差
4. 跨域 CORS

「CDN 会出现什么样的跨域问题？」

1. Canvas 虽然可以加载跨域图片，但是在调用 getImageData() toBlob() toDataURL() 时会产生报错，解决办法是启用 CORS 头，并给图片添加 crossorigin=anonymous 属性。详见 MDN
2. window.addEventListener(‘error’, …) 无法捕获跨域 JS 的错误详情。解决办法有两个，一个是启用 CORS 头并给 script 标签添加 crossorigin=anonymous 属性，另一个比较开脑洞，是重写 addEventListener，详见《解决 “Script Error” 的另类思路》。

「项目中的 .gz 文件是干什么用的？」

Nginx 实际上提供了两种 gzip 模式：gzip on; 和 gzip_static on;。
前者会在每次请求时压缩文件，有一点浪费 CPU；
而后者会在遇到 /path/to/file 请求时，主动寻找 /path/to/file.gz 作为压缩版本，找不到就直接返回未压缩的版本。
后者的优先级更高，且由于使用的是程序员预先压缩好的 gz 文件，所以更节省 CPU 性能，但是它可能并不是 Nginx 默认就有的功能，需要在编译 Nginx 的时候添加扩展选项。