性能优化

https://mp.weixin.qq.com/s/flG20iXajAyZh3NdOkEK6Q

https://mp.weixin.qq.com/s/jmqcmGOerzhz3MS-oW0mqw

dns-prefetch

preconnect

preload / prefetch

HTTP 压缩

一般来讲是要在服务端处理的，可通过在响应头中设置 Content-encoding: gzip

Webpack 压缩

CompressionPlugin

HtmlWebpackPlugin

minify字段配置压缩

可以在 vue 项目下执行 vue inspect --mode production > webpack.config.js 来查看脚手架的默认 webpack 配置内容，比如：

SplitChunksPlugin

MiniCssExtractPlugin

ImageMinimizerWebpackPlugin

Tree Shaking

• 尽量使用 ES6 模块语法，即 import 和 export
• 保证没有 编译器（如：babel）将对应的 ES6 模块语法转换为 CommonJS 的语法（如：@babel/preset-env 的默认行为）
• 可在项目的 package.json 文件中添加 "**sideEffects**" 属性，标识当前内容是否存在副作用操作
• 可在通过 /\*#__PURE__\*/ 注释，将函数调用标记为无副作用

减少不必要的 cookie

不必要的 cookie 来回传输会造成带宽浪费：

• • 减少 cookie 存储的内容
  • 对于静态资源采用 CDN 托管（即非同域），不同域名默认不携带 cookie

CDN 托管静态资源 + HTTP 缓存

协议升级为 Http2.0

http2.0

• 针对 TCP 连接数 被限制的问题，http2.0 采用 多路复用 一个域名只对应一个 TCP 连接

• 针对 http 队头阻塞 问题，http2.0 中通过二进制分帧层为每个 请求/响应 添加 stream id 保证 请求/响应 一一对应，即不必等待前面的请求处理完成，并且还可以为每个请求添加 优先级

• 针对 header 数据大的问题，http2.0 中传输的 header 帧经过处理后会用 二进制 的方式表示，替换了原本的 文本格式，并使用 HPACK 算法进行压缩

• • 接收/发送 两端会维护一个 索引表，通过下标来标识 header，针对后续重复的 header 信息就可以用对应的索引来代替

• 针对传统的 请求 —> 响应 模式，http2.0 中提供了 服务端推送 的能力，让服务端能够主动向客户端推送关键资源，加快资源加载

浏览器渲染 HTML 文件的核心过程：

• • HTML 解释器：将 HTML 文档经过词法分析输出 DOM Tree

  • CSS 解释器：解析 CSS 文档，生成样式规则 CSSOM

  • 样式计算：将 DOM Tree 和 CSSOM 合并生成 Render Tree

  • 布局计算：计算 Render Tree 节点在页面中的坐标位置，创建 Layout Tree

  • 划分图层：页面中有很多复杂的效果，如一些复杂的 3D 变换、页面滚动，或使用 z-index 做 z 轴排序等，为了更加方便地实现这些效果，渲染引擎还需要为特定的节点生成专用的图层，生成对应的图层树 Layer Tree

  • 图层绘制：

  • • 染引擎实现图层的绘制时，会把一个图层的绘制拆分成很多小的 绘制指令，并将这些指令按照顺序组成一个 待绘制列表
    • 当图层的绘制列表准备好后，主线程 会把 待绘制列表 提交（commit）给 合成线程

  • 栅格化 raster：

  • • 由于视口有限，用户只能看到页面的很小一部分，没必要绘制出所有图层内容，因此 合成线程 会将 图层（layer） 划分为 图块（tile）
    • 渲染进程 把 生成图块的指令 发送给 GPU 并执行生成图块的 位图

  • 合成和显示：

  • • 一旦所有图块都被光栅化，合成线程 就会生成一个绘制图块的命令 —— DrawQuad，然后将该命令提交给 浏览器进程
    • 浏览器进程 里面有一个 viz 组件，会根据 DrawQuad 命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上