全局负载均衡和缓存系统
- CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术
- CDN的缓存主要关注两个点（命中率和回源率），系统中命中率越高越好回源率越低越好，一般系统的回源率在5%以下
服务器通信层面
- 资源合并
雪碧图 - 域名分片（浏览器对同一域名最多同时发起6-8个tcp链接）
域名切分
数据传输层面
-
强缓存
<-- cache-control:max-age = 600
<-- expire: Mon, 4 Set 2020:01:01 GMT -
协商缓存
<-- last-modify:
--> if-modify-since:
<-- etag: W/"5f2cbe0f-2382"
--> if-none-match: W/"5f2cbe0f-2382"
数据传输层-压缩
- 数据压缩
GZIP压缩或者br压缩 - 代码文件压缩
HTML\CSS\JS中的注释、空格、长变量名等等 - 静态资源
字体图标，去除元数据，缩小尺寸及分辨率，使用jpg或者webp格式 - 头与报文
http1.1中减少不必要的头
减少cookie的数据量
HTTP2头部压缩
- 臃肿的请求头
平均460字节的首部 - 专门的HPACK压缩算法
索引表: 客户端和服务端会共同维护一个静态索引表和一个动态索引表，静态的包含61中常见的头部字段信息
霍夫曼编码
HTTP2 二进制帧
- http1.x 文本字符分割的数据流
解析慢且容易出错 - 二进制
帧长度、帧类型、帧标识
HTTP2 链路复用
http2.0采用服务器响应等待的时间利用tcp链接传输信息
node如何监测性能
node --prof index.js node --prof-process ./isolate.latev8.log > profile.txt
下面的代码可以分析node日志
前端代码层面
- html语义化标签加强dom解析
- 多使用伪元素，减少js多dom的查找遍历
- 尽量使用css实现效果，不用js实现效果
- 逻辑与展示解耦，避免不必要的js引擎启动（dom解析的过程中尽量避免js引擎的启动，比如html中直接嵌入js代码）
- 减少作用域查找和闭包，避免==，使用块级作用域
vue、react等客户端渲染（CSR）
- “白屏”时间更长，用户体验不好
SSR：首页的数据由服务端整合好 - html中无内容，SEO不友好
主流服务端渲染方案
vue nuxt.js
react next.js
静态站点生成方案（SSG）
- 专门的SSG方案（框架）
Gatsby vue
Gridsome react
总体优化方案
- 编码层面
- 编译打包阶段
- 网络层面
