输入 url 到页面展示的短短几秒内浏览器终究做了什么？

2019年8月20日 211次阅读 来源: 15815407241

口试的时刻，我们常常会被问从在浏览器地点栏中输入 url 到页面展示的短短几秒内浏览器终究做了什么？那末浏览器究竟做了啥？

浏览器的多历程架构
一个好的顺序常常被分别为几个互相自力又相互合营的模块，浏览器也是云云，以 Chrome 为例，它由多个历程构成，每一个历程都有本身中心的职责，它们互相合营完成浏览器的团体功用，每一个历程中又包含多个线程，一个历程内的多个线程也会协同事变，合营完成地点历程的职责。

详细说来，Chrome 的重要历程及其职责以下： 
Browser Process： 担任包含地点栏，书签栏，行进退却按钮等部份的事变； 担任处置惩罚浏览器的一些不可见的底层操纵，比方收集要求和文件接见； 
Renderer Process： 担任一个 tab 内关于网页显现的一切事变 
Plugin Process： 担任掌握一个网页用到的一切插件，如 flash 
GPU Process 担任处置惩罚 GPU 相干的使命

我们晓得浏览器 Tab 外的事变重要由 Browser Process 掌控，
Browser Process 又对这些事变进一步分别，运用差别线程举行处置惩罚： 
UI thread ： 掌握浏览器上的按钮及输入框； 
network thread: 处置惩罚收集要求，从网上猎取数据； 
storage thread: 掌握文件等的接见；

当我们输入url，浏览器最先事变

所以 network thread 会实行 DNS 查询，随后为要求竖立 TCP 衔接。

在上述历程再细化为

  1. 浏览器搜刮本身的 DNS 缓存。
  2. 在浏览器缓存中没找到，就在操纵体系缓存中查找，这一步中也会查找本机的 hosts 看看有无对应的域名映照。（所谓的改hosts的道理！！！）
  3. 在体系中也没有的话，就到你的路由器来查找，由于路由器平常也会有本身的 DNS 缓存。
  4. 若没有，则操纵体系将域名发送至 当地域名服务器——递归查询体式格局，当地域名服务器 查询本身的 DNS缓存，查找胜利则返回效果，不然，采纳迭代查询体式格局。当地域名服务器平常都是你的收集接入服务器商供应，比方中国电信，中国移动。
  5. 当地域名服务器 将取得的 IP 地点返回给操纵体系，同时本身也将 IP 地点缓存起来。
  6. 操纵体系将 IP 地点返回给浏览器，同时本身也将 IP 地点缓存起来，以备下次别的用户查询时，能够直接返回效果，加速收集接见。

至此，浏览器已取得了域名对应的 IP 地点。最先竖立 TCP 衔接，举行三次握手

三次握手的步骤：（抽象派）

客户端：hello，你是server么？
服务端：hello，我是server，你是client么
客户端：yes，我是client

经由一系列搜检和数据要求，确认数据以及衬着历程都可用了， Browser Process（历程） 会给 Renderer Process（历程） 发送音讯，页面加载和衬着历程最先。

衬着步骤大抵能够分为以下几步：

  1. 剖析HTML，构建 DOM 树
  2. 剖析 CSS ，天生 CSS 划定规矩树
  3. 兼并 DOM 树和 CSS 划定规矩，天生 render 树
  4. 规划 render 树（ Layout / reflow ），担任各元素尺寸、位置的盘算
  5. 绘制 render 树（ paint ），绘制页面像素信息
  6. 浏览器会将各层的信息发送给 GPU，GPU 会将各层合成（ composite ），显现在屏幕上

组织 DOM 树

浏览器在剖析html文件时, 是WebKit 中的 HTML 诠释器的将收集或许当地磁盘猎取的 HTML 网页和资本从字撙节诠释成 DOM 树结构。详细历程以下 ：
《输入 url 到页面展示的短短几秒内浏览器终究做了什么？》
在 WebKit 中这一历程以下：首先是字撙节，经由解码以后是字符流，然后经由过程词法分析器会被诠释成词语（Tokens），以后经由语法分析器构建成节点，末了这些节点被组建成一棵 DOM 树。

浏览器在剖析html文件历程当中，会 ”自上而下“ 加载，并在加载历程当中举行剖析衬着。在剖析历程当中，假如碰到要求外部资本时，如图片、外链的CSS、iconfont等，要求历程是异步的，并不会影响html文档举行加载，且一致交由 Browser 历程来处置惩罚，这使得资本在差别网页间的同享变得很轻易。

诠释 CSS

CSS 诠释历程是指从 CSS 字符串 经由 CSS 诠释器 处置惩罚后变成衬着引擎内部划定规矩的示意历程。

天生款式划定规矩以后，会举行款式划定规矩婚配，WebKit 会为个中的一些节点（只限于可视节点）挑选适宜的款式信息，划定规矩的婚配则是由 ElementRuleCollector 类来盘算并取得，它依据元素的属性等，并从 DocumentRuleSets 类中猎取划定规矩鸠合，顺次根据 ID、种别、标签等挑选器信息逐次婚配取得元素的款式。

末了，WebKit 对这些划定规矩举行排序。关于该元素须要的款式属性，WebKit 挑选从高优先级划定规矩中拔取，并将款式属性值返回。

从悉数网页的加载和衬着历程来看，CSS 诠释和划定规矩婚配处于 DOM 树竖立以后，RenderObject 树竖立之前，CSS 诠释器诠释后的效果会保存起来，然后 RenderObject 树基于该效果来举行范例婚配和规划盘算。当网页有用户交互或许动画等行动的时刻，经由过程 CSSDOM 等手艺，JavaScript 代码一样能够异常方便地修正 CSS 代码，WebKit 此时须要从新诠释款式并反复以上这一历程。

回流与重绘

当render tree中的一部份(或悉数)由于元素的范围尺寸，规划，隐蔽等转变而须要从新构建。这就称为回流(reflow)。每一个页面最少须要一次回流，就是在页面第一次加载的时刻。在回流的时刻，浏览器会使衬着树中受到影响的部份失效，并从新组织这部份衬着树，完成回流后，浏览器会从新绘制受影响的部份到屏幕中，该历程成为重绘。
当render tree中的一些元素须要更新属性，而这些属性只是影响元素的表面，作风，而不会影响规划的，比方background-color。则就叫称为重绘。

注重：回流势必引发重绘，而重绘不一定会引发回流。

回流什么时候发作：

当页面规划和多少属性转变时就须要回流。下述状况会发作浏览器回流：

1、增加或许删除可见的DOM元素；

2、元素位置转变；

3、元素尺寸转变——边距、添补、边框、宽度和高度

4、内容转变——比方文本转变或许图片大小转变而引发的盘算值宽度和高度转变；

5、页面衬着初始化；

6、浏览器窗口尺寸转变——resize事宜发作时；

所以绘制 render 树的历程当中会发作屡次回流与重绘。别的防止回流与重绘也是web优化技能之一。

参考链接 ：
图解浏览器的基础事变道理 – 知乎
https://zhuanlan.zhihu.com/p/…
口试题之从敲入 URL 到浏览器衬着完成 – 全栈修炼 – SegmentFault 思否
https://segmentfault.com/a/11…
HTTP要求历程-域名剖析和TCP三次握手竖立链接 – 小Cai先森 – 博客园
https://www.cnblogs.com/caijh…
页面重绘和回流以及优化-WEB前端开辟
https://www.css88.com/archive…

    原文作者：15815407241
    原文地址: https://segmentfault.com/a/1190000017165464
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞