最近在研究基于 Nuxt3.x 的 SSR 性能优化, 我发现在目前大多数性能优化的文章都停留在纯前端的领域. 比如 Long Task, Chunk Split... 这些比较难以优化且被量化的事情上.

反而对于基于 HTTP 相关的知识有所欠缺, 在基于 SSR 性能优化时, 发现有很多比较容易拿到结果的思路.

缩减 HTML 的体积

1. 不管是 Gzip 还是 Brotil, TransSize 的减少, 对于性能优化的效果是立竿见影的
2. 针对屏幕宽度做渲染内容的控制, 这往往可以减少非常多的服务器运行时间和 HTML 体积, 当然注水之后还是可以正常渲染. 这种在一个网站同时支持大屏和小屏时比较常见, 比如 Twitter 在 PC 时有侧边栏, 在 Mobile 时没有. 一般有 2 种做法
   1. 最简单的就是根据 UA 是否是 Mobile, 来判断是否在 SSR 时渲染侧边栏. (缺点: 通过 UA 判断容易在手持宽屏设备时有不好的体验, 或者 CLS 变差, 比如 iPad 使用了和 Mac 相同的 UA (默认请求桌面网站), 参考 User Agent in Safari on iPadOS 以及 How to detect Ipad useragent on safari browser)
   2. 读取请求头中的 Sec-CH-Viewport-Width 或者 Viewport-Width , 需要注意的是 只在后续请求才有效 , 我们可以在 Response Header 的 Accept-CH 中添加对应字段来使用.
   3. 所以比较推荐的做法是, 当 Viewport 不存在时使用 UA 判断, 当 Viewport 存在时使用 Viewport 判断

今天先写到这里, 下次有时间继续更新