前端性能优化从以下几个方面入手
1. 更快的网络通信
请求响应过程（用户在地址栏输入URL后发生了什么？）：
- 浏览器检查本地DNS缓存，发起DNS解析请求，DNS服务器返回给定域名对应的IP
- 浏览器根据IP地址，建立TCP/IP连接，发起HTTP请求，发送HTTP请求报文
- 服务器处理HTTP请求，发送HTTP响应报文
- 浏览器接收到响应报文后，解析HTML内容
- 浏览器向服务器请求页面资源（过程同上2，3，4）
- 浏览器渲染出最终页面
服务器通信层面
CDN
就类似京东发货，每个地方都有仓库，就近发货。
而CDN是在不同地点都建立服务器，就近访问。本质是一种缓存. 将数据缓存在离用户最近的地方。
- 全局负载均衡
- 缓存系统（在各服务器上缓存主服务器上客户需要的内容）
减少请求次数
资源合并（例如：合并图片，雪碧图；合并CSS文件；合并js文件）
页面传输层面-缓存
强缓存
- cache-control: max-age=600
- expiress: Mon, 14 Sep 2022 09:02:20 GMT
协商缓存
- last-modified
- if-modified-since
- etag
- if-none-match
压缩
- 数据压缩：gzip和br
- 代码文件压缩：HTML/CSS/JS中的注释、空格、长变量名等
- 静态资源：字体图标，去除元数据，缩小尺寸及分辨率，使用jpg或者webp格式
- 头与报文：http1.1中减少不必要的头；减少cookie数据量
JS代码优化
DOM
- 在脚本中,
document.images, document.forms, getElementsByTagName()返回的都是HTMLCollection类型的集合。 - 但这不是一个静态的结果，每次访问的时候都会重新执行这个查询从而更新查询结果
- 当你需要重新遍历HTML Collection的时候, 可以将其转换为数组, 以便提高性能。
减少闭包的使用和作用域链的使用
在循环中尤其注意作用域链的查找 如果不断需要查找作用域链，需要在遍历之前使用局部变量缓存该变量
CSS放到顶部，JS放到底部
- css: 用户在下载完css才会对整个页面进行一个渲染. 如果css没有下载完开始解析body, 可能导致无css状态, 跳转到css状态, 页面变化较大.
- js: 加载js立即执行, 有可能阻塞整个页面, 造成页面显示慢.
