一个URL到浏览器渲染，大概分为三个阶段：
1. 建立请求
2. 获取资源
3. 浏览器渲染
这三个阶段，可能都会影响到性能表现。
正常来说，我们要使用一些性能检测工具，来识别性能较差的点。针对性的优化，会获得事半功倍的效果。
按照这三个大块，简单的阐述一下，会有哪些优化手段：
建立请求阶段
- 从URL到建立连接，首先会有DNS解析。因此可以使用DNS加速，也可以使用一些安全手段，防止DNS劫持，失效导致的网络异常。
- 请求建立之后，一般是到ngix负载均衡服务器进行转发。这一部分，可以对负载策略进行优化，比如使用加权算法。
- 在综合考量的基础下，可以选择更换HTTP协议，比如去掉HTTPS（因为有加密过程，速度变慢），使用HTTP2（多路复用，请求头压缩等特性可以提升速度）
这一部分的优化，主要依赖于DevOPS工程师了，其实对前端能做的事情不多。
获取资源阶段
这一部分从经验上来说，开发人员做的事情是做多的，同时受益也是比较好的。我们所说的性能优化常见手段，都在这里。
- 首先，看请求的数量。根据实际情况，对发送的请求进行压缩，去冗，合并，拆分等。这里主要是代码层面的处理，要知道HTTP请求发起一次的成本是很高的，因此尽可能的减少请求。但是，如果一次请求的数据量太大，也同样不太合适，可以考虑将请求拆分。
- 对静态资源进行压缩。这个主要依赖于WebPack，比如常见的CSS，JS，HTML压缩。另外，为了避免单文件过大引起性能问题，在使用Webpack编译时选择合适的代码分割策略（常见的按组件分割，按路由分割，懒加载）
- 大资源优化，比如图片，视频。图片可以进行降分辨率，雪碧图，使用svg替换等方式。视频采用压缩等方式。在前端对他们渲染时，采用异步/懒加载的方式，防止阻塞网页。
- 缓存优化。合理使用浏览器的缓存策略，对大资源进行缓存。同时使用CDN来加速获取静态资源的速度。
浏览器渲染阶段
- 渲染的工作是由浏览器来完成的。浏览器的渲染顺序，是先构建DOM树，再计算样式树，最后渲染。再构建DOM阶段，遇到JS会执行JS。由于是单线程工作，因此常见的手法就是把CSS和JS文件放HTML的后面，防止执行JS时阻塞DOM构建。
- 在JS的执行过程中，尽量减少DOM的重排和重绘。目前使用的Reat和Vue框架，在这方面已经做了很好的优化了。
- 两个框架的Diff算法，都是对同级进行比较，因此在使用的时候，我们尽量减少跨层的操作，同时尽量使用hidded属性来控制dom的显示，而不是直接销毁或新生成。
- 另外，由于React的设计原理，我们尽可能的使用PureComponent,UseCallback等手段来避免子组件的重复渲染。
- React的合成事件，使用了事件委托。但是Vue没有，因此要自己使用事件委托来提升性能。
- 使用节流或防抖来减少用户的误出发和重复触发
代码逻辑的优化
其实根据经验，大多的性能问题其实出现在日常的编码当中。
代码的优化非常的细致和繁琐，建议阅读《高效前端：Web高效编程与优化实践》来做进一步提升。
日常中，对性能影响最大的场景有：
- 大数组的使用（可使用Set,Map,Obj等数据结构代替数组的查找）
- 时间复杂度为指数的逻辑
- 递归操作（尽量做尾递归优化） 以上的算法，都尽量避免去使用，如果必须要使用，记得做好优化，以及合适的时候终止循环/递归，否则容易引起栈溢出。
