网站性能优化

字数: 0 字 时长: 0 分钟

我们可以使用浏览器自带的 Lighthouse 来对网站性能进行评估，然后针对性地优化。

1. CDN 缓存

CDN 缓存类似京东各地物流仓库，将源网站资源分发到各 CDN 服务器，用户访问网站资源时直接从最近的 CND 服务器获取网站资源。

CND 的缺点是按流量计费，需要严格设置流量控制、监控告警等，防止有人恶意刷流量。

2. 浏览器缓存

浏览器缓存将资源缓存在用户本地，这样后续访问该资源时就不用再去服务器拉取了。可以通过 Web 服务器的 HTTP 缓存头设置或 CND 的浏览器缓存过期设置来控制。

3. HTTP 1.1 升级为 HTTP 2

• HTTP 1.1 虽然可以建立多个连接，但每个连接内的请求必须按照顺序处理，容易产生队头阻塞问题
• HTTP 2 采用多路复用，单个连接可以同时处理多个请求

升级 HTTP2

server {
  ...
  // 在 443 端口后添加 http2
  listen 443 ssl http2;
}

4. 资源压缩

• 图片资源压缩

JPG、PNG 图片资源压缩为 Webp 格式。注意如果网站允许用户自主上传图片，需要在后端服务器对图片进行压缩处理。

• 代码压缩

前端工程化项目，打包工具可以进行代码压缩，比如进行摇树优化将不必要的代码摇掉

• GZIP 自动压缩

浏览器在请求头中添加 Accept-Encoding: gzip ，服务器就会把文件压缩后再发送给浏览器（响应头告诉浏览器这是压缩后的资源），浏览器收到后再解压

web 服务器中开启 gzip

gzip on;

5. 加载策略

• 懒加载

可通过 <img src="image.jpg" loading="lazy"> 开启懒加载，用户需要滚动到响应位置才开始加载对应的图片，可提高首屏加载速度、节约流量

• 按需加载

将庞大的代码包按页面分割为不同模块，访问某个页面时无需加载整个代码包，只需加载该页面对应的模块

• 分层加载

比如大图利用渐进式加载，先让用户看到一个模糊的占位图（或缩略图），再逐渐变清晰（我发现 B 站播放 4K 分辨率视频时就采用过这个策略，我先看到的视频码率很低，然后再逐渐过渡到 4K 清晰度）

• 预加载

提前预判用户可能访问的页面，提前缓存页面资源，后端中的缓存预热也与这个思想类似

6. 请求合并

减少请求数，比如一个页面需要多个资源，与其发送多个请求去分别请求这些资源不如一个请求聚合访问所有资源