一个url从被输入到浏览器地址栏后, 经过无数次 "求爷爷告奶奶" 的请求,终成 "大局"的一个过程:
浏览器的渲染原理
一、域名解析
当用户输入一个网站敲了回车后，浏览器首先寻找你身边最近的DNS服务器做域名解析，如果用户不是第一次输入这个网站，那么浏览器可能从缓存中去拿到之前解析过的IP。这个缓存可以有以下几种情况:
寻找域名解析的原则是: 就近原则
* 首先在本地缓存中DNS查寻, 本地依次包括 浏览器自己 和 本机HOST文件,
* 如果本地找不到,就去外地缓存中的DNS. 外地依次是路由器和电信局 (ips).
* 如果外地还是找不到, 那就要去 国外 了,也是就所谓的根目录.
* 如果还是找不到,那就检测下自己输入的域名是否输入正确.
ps:DNS劫持:就是有人用 假IP来获取 真域名.
二、建立TCP链接
域名解析完成后，浏览器和服务器之间就要开始建立tcp链接，也就是我们常说的三次握手的操作。
第一次握手，是由我们的浏览器发起的，目的是告诉服务器，我是否可以发起请求了。
第二次握手，是由服务器端发起，告诉浏览器，我已经准备好了，你可以发请求了。
第二次握手，是由我们的浏览器发起的，告诉服务器，我要准备开始发请求了。
这里需要注意的是，有可能第二次握手的时候，有可能是服务器很忙，正在处理其它的业务需求导致不能立马响应浏览器的请求，将会把浏览器的请求驳回。这时候，请求将中断。
三、浏览器发送请求
浏览器将请求发送到服务器。然后接下来就是http协议的通信内容。这一块本身也比较复杂，这里不再展开了说。
四、接受响应
服务器开始处理浏览器提交过来的请求报文。比如浏览器每次提交的时候会带着cookie相关的信息。
五、服务器处理响应
确认眼神响应后,浏览器拿着抬头写着http的信件去请求网络服务器系统里的 web server , web server应要求找到对应的文件后,在传 回给浏览器.
六、渲染页面
浏览器接收到服务器返回的内容后，开始解析响应报文。
- 当遇到html的时候，浏览器会调用html解析器，构建dom树。
- 当遇到style或者link标签的时候，浏览器会调用css解析器，构建cssom树。
- 当遇到script标签的时候，浏览器会调用js的解析器，进行相关的js操作。
- 浏览器将之前构建的dom树和cssom树进行合并，形成一个渲染树(renderTree)。
- 浏览器会根据生成的渲染树去生成布局，并计算每一个节点的几何信息，（比如节点的宽高，位置 等信息，注意，这一步比较消耗性能）
解析报文的过程中,浏览器根据对应的框架来进行处理搭建,一般用MVC模型来搭建设计模型,MVC有三种核心部件:模 型(model), 视图(view),控制器(controller),具体流程如下图:
浏览器解析报文框架流程.jpg
最后将渲染树绘制到我们的屏幕上，我们看到了最终的页面效果。
值得注意的是:
前面的步骤中我有提到，当浏览器开始生成布局计算每一个节点的几何信息的时候，会比较消耗性能。
涉及到性能优化的问题，紧接着我们可以带出与浏览相关的dom优化的观点。比如，我们在做dom优化的时候，尽可能的减少页面的重排和重绘。
可以说，在前端开发过程中，页面的重排和重绘，是绝对的性能杀手,尤其是重排。
那么哪些情况会带来页面的重排和重绘呢？
- 设置元素显示和隐藏的时候，display属性，一个元素如果没有设置absolute或者fixed定位，那么设置显示隐藏的时候就会导致页面的重排和重绘。每一次操作都会导致浏览器重新计算它的位置和显示效果。
- 做普通的动画过程中尽量不要使用left top margin这些属性。而可以使用css3中的transform来处理。
需要频繁的切换元素的显示隐藏的时候，可以考虑先将其进行定位，使其脱离文档流，这时候只会触发重绘操作。
网友评论