# 性能优化
# 前端性能优化的思路
可以从输入一个URL谈起
DNS -> IP -> TCP连接 -> HTTP/HTTPS请求 GET /index.html http -> 浏览器判断状态码 -> 浏览器解码 -> 浏览器解析HTML -> DOM tree
-> CSSOM -> Render Tree -> Layout -> Paint -> Composite 合成图层 -> GPU -> 页面
带缓存
- Memory Cache
- Service Worker Cache
- HTTP Cache
- Push Cache
DNS查询 (浏览器DNS，系统的DNS，hosts文件，DNS服务器，根DNS服务器)
# 中间的过程分析
请求时 CDN，HTTP2，利用缓存(强缓存，协商缓存)，减少请求次数，减少请求资源大小(压缩，删除调试代码)，预加载，懒加载 解析时 不阻塞渲染， 运行时 首屏优化(SSR)，减少DOM操作，合理使用CSS规则，节流和防抖
# 优化方案(点)
- DNS查询 (浏览器DNS，系统的DNS，hosts文件，DNS服务器，根DNS服务器)
- 使用CDN
- 提前加载CSS，CSS的嵌套层数不超过3层
- 减少回流和重绘的操作
- 图片优化
- 分离图层
# 什么是尾调用
尾调用指的是函数的最后一步调用另一个函数，代码执行是基于执行栈的，所以当在一个函数里调用另一个函数时，会保留当前的执行上下文，然后再新建另外一个执行上下文加入栈中。使用尾调用的话，因为已经是函数的最后一步，所以这时可以不必再保留当前的执行上下文，从而节省了内存，这就是尾调用优化。但是 ES6 的尾调用优化只在严格模式下开启，正常模式是无效的
# 性能指标
- FP: 首次渲染时间 白屏时间 浏览器第一次向屏幕传输像素的时间
- FCP: 首次内容渲染时间 浏览器首次绘制
图片，文字，svg或非空白Canvas的时间 - FMP: 主要内容出现在屏幕上的时间
- TTI: 可交互时间 表示网页第一次 完全达到可交互状态 的时间点
- LCP: 表示可视区“内容”最大的可见元素开始出现在屏幕上的时间点
- CLS: 是对在页面的整个生命周期中发生的每一次意外布局变化的最大布局变化得分的度量，网站应努力使 CLS 分数小于 0.1
- FID: 衡量交互性能