不管是自己之前面试还是看网上的面试题，都会碰到一个经典的面试题：从输入URL到页面加载完成，发生了什么？
首先说一下自己对于这道题的理解和回答：
- 用户在浏览器中输入URL
- 浏览器通过DNS，把url解析为IP
- 和IP地址建立TCP连接，发送HTTP请求
- 服务器接收请求，进行相关操作后返回的HTPP相应
- 浏览器收到首屏html，开始渲染
- 解析html为dom
- 解析css为css-tree
- dom + css生成render-tree绘图
- 加载script的js文件
- 执行js
所谓性能优化，就是上面的步骤加在一起，时间尽可能的短，所以基本分为两大方向：少加载文件，少执行代码。
快加载
从上面的图中可以看出，浏览器渲染分为三步：
- HTML解析文件，生成DOM树；解析CSS文件生成CSSOM树，两者并行
- 将DOM树和CSSOM树结合，生成Render树
- 根据Render树渲染回执，将像素渲染到屏幕上
从这个渲染流程图中，可以很容易得出下面的结论：
- dom解析和css解析并行，css加载不会阻塞dom的解析
- Render树是依赖于DOM树和CSSOM树的，所有css加载会阻塞DOM渲染
- 由于js会影响之前的DOM和CSS，因此浏览器会维持HTML中的css和js的顺序，也就是说样式表会在后面的js执行前先加载完毕，也就是说，css加载会阻塞后面的js的执行
因此，可以从下面几个方面优化页面加载渲染速度：
- 使用CDN
- 压缩CSS，合并CSS（减少HTTP请求）
- 合理使用缓存（版本号）
DNS（domain name service）
DNS服务就是将taobao.com这种域名解析为140.205.220.96
DNS查找过程
- 查看本地DNS缓存
- 本地没有缓存，发起DNS请求，向本地配置的DNS服务器请求
优化
- DNS预解析（prefetch预获取）：先在浏览器中声明一些DNS解析的内容，因为DNS获取内容并不一次就能拿到全部的，而是通过不断的递归查询才能获取。
TCP
tcp负责数据的完整性和有序性，包括三次握手、四次挥手、粘包、滑动窗口等机制
从TCP的工作机制来看，这一阶段的优化策略主要包括以下几块
- 建立长连接
- 减少文件体积：js打包压缩、图片压缩、gzip
- 减少文件请求次数：雪碧图、缓存控制、懒加载
- 减少用户和服务取得距离：cdn
- 本地存储
TCP VS UDP
UDP适用场景：性能高、允许丢包、包本身特别小而不需要拆分、重发机制很好写 典型的就是dns
图片优化
图片通常是最占用流量的，PC端加载的平均图片大小是600K，简直比js打包后的文件还要大，所以针对图片的优化，也是收益不错的。图片方面的优化主要包括三块
- 图片格式问题
- 懒加载
- cdn
图片格式
不同的场景，使用不同的文件类型
jpg：
- 有损压缩
- 体积小
- 不支持透明
- 用于背景图、轮播图
png：
- 无损压缩质量高
- 支持透明
- 色彩线条更丰富
- logo、商品icon
svg：
- 体积小的矢量图
代码少执行
防抖和节流
浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。
防抖就是作用是在短时间内多次触发同一个函数，只执行最后一次，或者只在开始时执行。节流是在一段时间内只允许函数执行一次。
回流（重排）和重绘
当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
回流必将引起重绘，而重绘不一定会引起回流。但是不管是回流还是重绘，都会影响性能。浏览器会帮助我们优化这些操作，浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。除此之外，我们自己也需要尽量的减少回流和重绘。
vue
- 异步组件
- 按需记载
- 结合初始性能和频繁切换性能来决定使用v-if还是v-show
- 和渲染无关的数据，不要放在data上，data也不要嵌套过多层
- 合理使用nextTick（修改数据的当下，视图不会立刻更新，而是等同一时间循环中的所有数据变化完成之后，再同一进行视图更新）
react
- 值传递需要的props，不要随便使用<Component {...props} />
- 必要的key
- 无状态组件
- pureComponent shouldComponentUpdate
- 少在render中绑定事件