如果对网站的性能进行研究，你首先需要了解浏览器输入url后发生了什么才能对症下药，下面优化的点是按照浏览器输入url后发生的顺序做的总结，可参考如下图片阅读下面优化的点。需要注意：下面只是提供优化方法，但不是说必须都用上，过度的优化反而适得其反。
请求发到服务器前
- 重定向：如果重定向次数过多，需要和服务器交互等，肯定会耗费一定时间，优化方式就是尽量避开或减少重定向
- 缓存：有缓存的情况肯定比没缓存的快，如果是强缓存，它都不用和服务器进行交互，时间会更快一些
- cdn: cdn主要是将资源分布到各个服务器，服务器散步在全国各个地方，获取的资源时候是根据距离获取最近的。（如果你在上海发出请求，服务器在上海和北京都有，此时获取的资源从上海传输过来肯定会快于从北京传输），对于一些服务采用dns-prefetch方式，它主要是浏览器在将域名解析IP的过程中会耗时，如果采用dns-prefetch，它会提前解析，这样能省去解析的时间，
- request: 发请求时，如果请求发出去太多，整个时间会比较久，可以采取并发的方式；对一个域名发出的最大请求超过6个，network下的参数Queueing等待时间会变长（chrome的最大并发数是6）。（譬如：图片服务www.img.com和www.file.com 等域名，可以对项目中展示图片的地方随机采用那2种域名，释放对同一服务器的压力）
服务器返回数据后
- html解析：html解析DOM树，在这个过程中，如果层级较少，DOM内容较少，会提高解析速度
- css解析：将css解析成CSSOM, 如果CSS选择器使用合适，减少通配符之类的，会提高解析速度
- js加载：第一种：同步和异步的问题，如果是同步的js加载，会阻塞 DOM树的解析，所以尽可能采用异步的方式。其中异步方式包括async和defer,async的执行是哪个js先下载完成，先执行哪一个，它不适合模块间有依赖的情况，适合独立模块，它的执行和DomContentLoad的时机无关，DOMContentLoad是在 DOM解析完成立马执行。defer的执行是会按照js的顺序去执行的，它会在DOMContentLoad前执行。第二种：js包大小的问题，这里可以用到webpack相关的知识，譬如按需加载、tree shaking、压缩等方式减少包的大小
其它情况的优化
图片
图片压缩
可以针对不同场景采用不同格式的图片；
对图片进行代码压缩；
采用cdn的方式或文件服务url后加属性压缩图片；
图片懒加载；
雪碧图
图标类型采用iconfont
响应式加载图片（不同设备加载不同大小图片）
react
代码分割（code split）、浅比较（React.memo、React.pureComponent、shouldComponentUpdate）、hooks(useCallback、useMemo)、props的合理使用等
webpack
- 并发处理子进程: happypack
- 缓存的方式：cache-loader、hard-source-webpack-plugin
- 多进程并行压缩js：uglifyjs-webpack-plugin
- 第三方库抽离：DllPlugin
其它
1.节流和防抖
2. 少操作DOM，减少重排的问题
