本文正在参与 “性能优化实战记录”话题征文活动
性能优化是前端不可少的一个话题，前端性能可能主要体现在页面加载速度上，减少页面渲染时间、提高用户体验上，那么有哪些方式可以实现呢？我们先来思考一个问题
从输入 URL 到页面加载完成，发生了什么？
大概可分为以下几个步骤：
- DNS解析，建立连接、发送请求、接收数据
- 对返回的数据解析执行、渲染页面
那么我们针对这几个步骤可以进行哪些优化、提高网站性能呢？
DNS解析
进行DNS缓存，减少解析时间
网络请求（建立连接、发送请求）
HTTP1.1一个域名下一般只能简历5-6个TCP链接，其他需要排队建立连接，发送请求时也需要排队，一个请求失败触发重传，那么首先，是否考虑建立长链接，减少三次握手四次挥手建立连接的时间；是否考虑使用HTTP2来优化请求呢
接收数据
网站开始加载时先请求的html、css、js文件，html文件大小基本差不多，是不是考虑webpack打包时，减少首页bundle.js文件大小了，渲染完换完成后通过预加载等方式加载其他文件；请求静态资源时可以放在CDN上，依次加快速度，同时使用一些较大库时也可以通过CDN方式加载。另外使用gzip来减少体积，加快传输、下载时间等。
解析执行
将JS文件放在文档后面，先加载HTML、CSS文件在加载JS文件，避免阻塞渲染；避免多次重绘和回流；使用gpu加快渲染，分多个图层等；
Webpack打包
- 开启多进程打包
- Tree Shaking
React
- 函数组件使用hooks，如useCallback、useMemo、React.memo等API减少组件渲染
- 类组件使用PureComponent、shouldComponentUpdate等等API减少组件渲染
- 使用immutable
还有其他很多方式等等，可以参考业内其他方案，如骨架图、虚拟列表等等。
