前端性能优化：主要分为两大类，文件获取优化和代码执行优化。
文件获取优化
- 加载文件 css js
- http协议的细节
- 从输入url到页面渲染完成
- 怎么上线前端代码
代码执行优化
- 节流 防抖
- 重绘 回流
- vue react 服务器端渲染(ssr)
- 浏览器是如何渲染页面的
从输入url到页面渲染完成
- 用户输入网址，比如baidu.com
- 浏览器通过域名解析服务(DNS)，把url解析成IP
DNS域名解析过程.png
- 和IP地址建立TCP链接，发送HTTP请求
- 服务器接收请求，查库，读文件，并拼接好返回的HTTP响应
- 浏览器收到数据，开始渲染
- 浏览器解析html为dom树，解析css为css-tree
- dom + css生成render-tree，根据render树绘图(GUI)
- 加载 script 的js文件，执行js
浏览器渲染过程.png
考虑前端优化，基本从以上步骤压缩执行时间。
如何少加载文件
- 合理利用浏览器的文件缓存(强缓存和协商缓存)
首次加载，发送http请求，server正常返回，需在返回响应头加上强缓存说明(Expires: Sat, 18 Apr 2020 07:50:03 GMT过期时间<http1.0> cache-control：max-age=315360000时间戳，优先级高<http1.1>)，如果时间过了，再次请求这个文件，强缓存失效，此时使用协商缓存，浏览器不会直接发出请求，而是在请求头上带上if-modified-since(日期)询问后端有没有修改过，如没有，就用缓存(响应码304)。优先级更高的etag(请求头带上if-none-match)。如果修改过，只能重新加载。
http缓存过程.png
结语
本文从前端性能优化的角度出发，整理一些常见的前端优化手段。前端小白经验不足，如有错误的地方，欢迎大家斧正！未完待续~~~
