性能

[MengZhaoFly]

初级性能优化

前端性能优化之雅虎35条军规

静态资源处理：

• webpack：压缩，合并，MD5
• 多个 CDN，和前端不同源，能不带 cookie，
• gzip
• 缓存：离线缓存，http缓存

http：缓存优先级

1. 强缓存：不发请求直接走缓存
   cache-control：设置一个时间的长度（在当前时间基础上，再过多长时间过期），解决了 expires 的问题；
   expires：设置一个过期时间，缺点： 浏览器时间和服务端时间不一致
   返回状态码：200 form memory/disk
2. 协商缓存：会发请求，判断是否过期，没有过期才走缓
   etag：请求带上 if-none-match 一个 由文件内容生成的 hash 值，判断的是文件内容
   last-modified：请求 if-modified-since，服务端对比时间，是否一样，一样说明文件没有修改过，

返回状态码：304
一些不会变更的库：强缓存，业务代码：协商缓存

htt2.0 多路复用

1.0时代：请求-> 解析域名-> 找到服务器-> 建立http连接-> 传输数据
如果短时间内多个请求，每个请求都走这个流程。
keep-alive
1.1时代：
保持连接不关闭，可以复用连接，但是解析域名还是必要的
依然有 线头阻塞 ，要等上一个请求完了才能接着下一个请求
htt2.0
所有请求基于流，同一个域名下不管访问多少文件，只建立一个连接。
一个 http 连接可以处理多个请求。
解决了原来的线头阻塞： 一个 http 连接 在同一个时间只能处理一个请求
本请求要 依次发送 ，现在可以 并发。
HTTP2.0 还有：server push，

离线缓存

• localstorage：同步
• sessionstorage
• indexDb：异步
• websql：异步
  作用：
  缓存我们的业务代码
  basket.js 资源通过 ajax 请求，然后帮你缓存起来
  localForage 包装了 localstorage，indexDb，websql的缓存
• Service Worker
  基于 web work 的
  web work: 可以新开启一个线程，可以干一些计算密集型的操作，不会阻塞主线程。任务执行完了之后会发一个信号给主线程。但是不能操作 dom
  后端同时更改一个资源，有锁的机制。
  Service Worker：也是在另外一个线程做事。可以拦截请求

Service Worker：简介, google doc
流程：

1. 注册 service work
2. 开启 web work 的线程
3. 激活
4. 监听页面的所有请求，
5. 当页面发起请求，触发监听器，有缓存，取缓存内容，没有的话再走浏览器请求，缓存到 cache storage，这里面的内容只能走 service work。
6. 资源更改的时候，webpack 打包生成 md5，
   相关的库有：workbox
   注意：
   service work 拦截请求，一定只在 https 生效。localhost 也可以。

w3c navigation timing

w3c navigation timing
w3c 还有很多其他timing

1. 把上一个页面清除，相等于，新的页面请求回来需要内存，需要资源，先把老的清除；
2. ** redirect :** 检查 本地是否有缓存， 缓存是否过期 （cache-control）。并行地还会执行上一个页面的 unload 事件。
3. app cacahe：从缓存里面取出
4. 之后流程就和网络相关，DNS查找，DNS 解析第一次可能比较慢，但是之后可以缓存，
5. TCP 连接，假如加了 https，那么还有 secureConnectionStart
6. Request: 没有 request end，其实这里并不知道这个时间点，这个时间是由服务器决定的。所以 request start 和 response start 之间大多分工作在于服务端。
7. response：response start， response end。如果建立的是长连接，那么在这里 之前的 tcp 连接还是能复用的。网络阶段结束
8. Process：得到 dom，处理dom 树，字符串转换为 对应的数据结构

渲染中的性能优化

渲染

1. 获取 DOM 元素，并分割多层，分层
2. 对每个图层节点进行样式的计算，Recalculate Style
3. 为每个节点生成 图形和位置，Layout 重排
4. 为每个节点 进行绘制 Paint，填充到图层中去 重绘
5. 把图层作为纹理上传 GPU
6. 图层重组，渲染到页面中 Composite Layers

注意： 重排一定引起重绘，但是重绘不一定引起重排

**简化流程：**Layout -> Paint -> Composite Layers 。一般的样式都会触发这个流程

网页里面的哪些元素会触发分层：

• 根元素
• position 不为 static
• transform
• 半透明
• canvas
• video
• overflow 不为 visible

什么是分层：

一个页面就是一个大的分层，一个元素的改变会影整个分层，为了减少影响，可以将页面分为多个分层，减小影响区域。
重排重绘影响的也是分层。

让 GPU 参与分层，GPU 参与渲染

• 让硬件加速 CSS 3D
• Video
• webgl 非常耗资源，CPU 特别卡，开启 GPU 加速。
• 滤镜

transform

CSS Triggers

做动画的时候优先使用 CSS 动画，
CSS 优先使用 transform

哪些元素会触发元素重排

1. 只要结构改变，就重排，比如：添加删除元素，盒子模型变了
2. 当读到某个属性 offset，scroll，clientWidth 重排。浏览器为了给到最准确的属性，会重排一次，得到准确数据给开发。重排。
3. 举个例子：
   display: '' 重排。
   改变颜色：重绘

注意

操作的时候注意 读写分离。最大程度的减少重排。

const h1 = dom.clientHeight;
h1.style.display = 'xx';
const h2 = dom.clientHeight;
h2.style.display = 'xx';
// 更好的做法：
requestAnimationFrame(() => {
  const h1 = dom.clientHeight;
  const h2 = dom.clientHeight;

})
requestAnimationFrame(() => {
  h1.style.display = 'xx';
  h2.style.display = 'xx';
})

CPU GPU

CPU 负责操作系统相关的
GPU 渲染相关的

页面性能优化

指标

• FP：first paint 首次绘制，首次任何像素对用户可见的时间（第一个像素落地）

<div id="app"></div>

• FCP: first content paint 首次内容绘制 ，FCP 标记的是浏览器渲染来自 DOM 第一位内容的时间点

<div id="app">
    <div class="header"></div>
   <div class="body"></div>
</div>
// mounted 生命周期

• FMP: 首次有效绘制 （对用户最为有用的部分）
  
• Long Tasks：任何耗时超过 50 毫秒的任务
• TTI：可交互时间
• 各个时间综合：
  
• DOMContentLoaded：HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。
• load：一个资源及其依赖资源已完成加载时

怎么监控：performanceObserver

后端渲染、客户端渲染(CSR)、同构应用(SSR)
以用户为中心的性能指标

解决：

1. ssr
   首屏直出，服务器渲染很快就会产生First Paint（FP）和First Contentful Paint（FCP）。
2. 预渲染，骨架屏
3. 离线化，客户端参与

• 客户端启动，拿到页面的 html，css，js
• 当在客户端访问webview判断页面的连接是否在本地已经存在，不发网络请求

内存泄漏

• 发生情况

1. 不使用Map，Set 多使用 Weakmap WeakSet
2. 不在 node 里面存储数据，放在 redis
3. 消费队列不及时

• 推荐
  多用 buffer，stream
• 压测
  wrk -t 模拟线程数 -c 连接数 -d 持续时间
  指标：
  avg: 平均值 每次测试平均值
  stdev :标准偏差
  max: 最大值
  +/- stdev: