性能优化专题

减少 http 请求

因为每次请求都要经过 dns、TCP 握手，服务器响应等等一系列事情

• 多个小文件合并一个大文件，

使用 http2

• 相较于 http1.1 有如下几个优点

  • 解析速度快

    http1.1 明文传输，必须不断地读入字节，遇到分隔符或者回车换行，在内部还需要用状态机去识别，效率低下。

    http2 采用二进制分帧，便于解析，服务器收到一堆乱序的二进制帧，所谓乱序，是指不同 ID 的 Stream 是乱序的，但同一个 Stream ID 的帧一定是按顺序传输的，二进制帧到达后对方会将 Stream ID 相同的二进制帧组装成完整的报文。

  • 多路复用

    多个请求可以共用一个 TCP 连接

  • 首部压缩

    针对头部字段采用 hpack 压缩，建立 hash 表记录索引和出现过的字段名，实现了请求头字段的复用

    对于整数和字符串哈夫曼编码，也是根据先出现的字符建立哈希表，出现次数多的字符索引尽可能短。传输的时候直接传输索引序列。

  • 服务端推送

    在 http2 中，服务器也能新建 Stream 给客户端发送消息，当 TCP 连接建立之后，服务器可以在返回 Html 的基础上，额外推送 html 中的 css，js 文件一起返回给客户端，减少等待和请求次数

    流的特性

  • 并发性。一个连接上可以同时发送多个帧，这一点和 HTTP1 不同。这也是实现多路复用的基础

  • 自增性。流 ID 是不可重用的，到达上限会新开 TCP 连接

  • 双线性。两端都可以创建流，互不干扰，双方都可以作为发送方或者接受方

  • 可设置优先级。可以设置数据帧优先级，先处理重要资源

服务端渲染

在服务端完成挂载、数据填充、渲染 dom 后，将成品返回给客户端，可以直接绘制页面。

优势

• 更快的内容到达时间

  SSR 只需要一次请求，一个文件，而 CSR 需要请求多个 JS、CSS 才能完成渲染

静态资源用 CDN

cdn 的缓存服务器是就近原则，缩短了请求时间，避免每次都请求源站

CSS 放在头部，JS 放在底部

• 如果先加载 html 再加载 CSS，用户第一时间看到的就是原始画面
• JS 如果放在头部，加上 defer 标签，异步下载，延迟执行

压缩文件

• webpack 的一些插件，压缩 CSS、JS、HTML 体积，UglifyJS MiniCssExtractPlugin terser

• nginx 开启 gzip 压缩

图片优化

• 图片延迟加载

• 媒体查询，使用合适大小的图片

• 用 CSS 效果代替图片、gif

• 使用 webp 格式图片

  WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。

• webpack 按需加载，preload，prefetch

• esbuild 依赖预加载

使用事件委托

• 只需要将同类元素的事件委托给父级或者更外级，不需要给所有元素都绑定事件，减少内存占用，提升性能
• 动态新增的元素无需重新绑定事件

减少重绘重排

条件判断改为查找哈希表

使用位操作

降低选择器复杂性

• 选择器越短越好
• 使用高优先级选择器，例如 id class
• 避免使用通配符*
• 使用 flex(条件允许)
• 使用 transform 和 opacity 实现动画