欢迎来到我的专题文章《前端面试题》系列，更多精彩内容持续更新中，欢迎关注！
正如标题，很多面试官喜欢问这类的问题。它主要考查的是前端开发者对于浏览器的渲染原理的理解程度。那么目的是什么呢？请往下看。
面试的时候，我只是简单的回答了一个请求处理响应的模型，这很显然不能让面试官满意，结果很明显，面试失败。后来回家后仔细研究一番，下面给出我个人的总结吧。
比如我们现在要访问的是百度的首页。
浏览器的渲染原理
一、域名解析
当用户输入一个网站敲了回车后，浏览器首先寻找你身边最近的DNS服务器做域名解析，如果用户不是第一次输入这个网站，那么浏览器可能从缓存中去拿到之前解析过的IP。这个缓存可以有以下几种情况
- 浏览器dns缓存
- 系统的dns缓存
- 路由器dns缓存
- 网络运营商dns缓存
二、建立TCP链接
域名解析完成后，浏览器和服务器之间就要开始建立tcp链接，也就是我们常说的三次握手的操作。
- 第一次握手，是由我们的浏览器发起的，目的是告诉服务器，我是否可以发起请求了。
- 第二次握手，是由服务器端发起，告诉浏览器，我已经准备好了，你可以发请求了。
- 第二次握手，是由我们的浏览器发起的，告诉服务器，我要准备开始发请求了。
这里需要注意的是，有可能第二次握手的时候，有可能是服务器很忙，正在处理其它的业务需求导致不能立马响应浏览器的请求，将会把浏览器的请求驳回。这时候，请求将中断。
三、浏览器发送请求
浏览器将请求发送到服务器。然后接下来就是http协议的通信内容。这一块本身也比较复杂，这里不再展开了说。
四、接受响应
服务器开始处理浏览器提交过来的请求报文。比如浏览器每次提交的时候会带着cookie相关的信息。
五、服务器处理响应
服务器接收到请求后，开始做出响应。并返回结果。比如我们访问的是百度的首页，这时候百度的服务器会将百度首页的html以字符串的形式发送给浏览器。
六、渲染页面
浏览器接收到服务器返回的内容后，开始解析响应报文。
- 当遇到html的时候，浏览器会调用html解析器，构建dom树。
- 当遇到style或者link标签的时候，浏览器会调用css解析器，构建cssom树。
- 当遇到script标签的时候，浏览器会调用js的解析器，进行相关的js操作。
- 浏览器将之前构建的dom树和cssom树进行合并，形成一个渲染树(renderTree)。
- 浏览器会根据生成的渲染树去生成布局，并计算每一个节点的几何信息，（比如节点的宽高，位置 等信息，注意，这一步比较消耗性能）
- 最后将渲染树绘制到我们的屏幕上，我们看到了最终的页面效果。
大概也就是这几个步骤了吧。当然，浏览器的渲染过程要比我列举的要复杂的多。
值得注意的是：我们可能能将这些步骤完整的说出来，但是在面试的时候，不能只是说出来这些步骤，我们还要去扩展我们自己的一些观点。
不然面试官问这个浏览器的渲染原理有何意义呢？
前面的步骤中我有提到，当浏览器开始生成布局计算每一个节点的几何信息的时候，会比较消耗性能。
涉及到性能优化的问题，紧接着我们可以带出与浏览相关的dom优化的观点。比如，我们在做dom优化的时候，尽可能的减少页面的重排和重绘。
页面的重排和重绘
可以说，在前端开发过程中，页面的重排和重绘，是绝对的性能杀手。尤其是重排。那么哪些情况会带来页面的重排和重绘呢？
- 设置元素显示和隐藏的时候，display属性，一个元素如果没有设置absolute或者fixed定位，那么设置显示隐藏的时候就会导致页面的重排和重绘。每一次操作都会导致浏览器重新计算它的位置和显示效果。
- 我们在做普通的动画过程中尽量不要使用left top margin这些属性。而可以使用css3中的transform来处理。
- 需要频繁的切换元素的显示隐藏的时候，可以考虑先将其进行定位，使其脱离文档流，这时候只会触发重绘操作。
到这里，从浏览器的渲染原理，到我们引出浏览器相关的dom优化。这样的回答应该才是面试官想听到的吧。
总结：
浏览器的沉浸原理在网上可以搜到很详细的资料大家酌情选择回答即可，但是也不能直接照搬，从浏览器的渲染原理一定要引出自己的一些观点。
只是一味的按网上的回答，也并不一定能使面试官满意。希望我的回答能够帮助到正在和即将要找工作的你们、
这里是【畅哥聊技术】的《前端面试题》专题系列。更多内容持续更新中。
下期我们接着聊，未完待续。。。
