“我报名参加金石方案1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动概况”

Chrome浏览器是怎么作业的？（一）

前语:

观看视频有感，随手记载一下。而且关于自己身为一个前端工程师，连一个浏览器的页面烘托的大致进程都无法正确表达出来，深深感到惭愧。

tips: 本文是纯新手向，只会以自己初学的了解解说大致进程，给和我有相同疑问的新手提供一个大致的思路，而且会同步解说其它额外相关常识。本文并不会牵扯源码等级的实现，请各位深知其间细节大佬键⌨️下留情。

一.当你刚翻开浏览器时

1. 双击浏览器图标

2. 紧接着系统分配给浏览器一块内存

3. 随后浏览器创立一个进程准备作业（process）

   以Mac为例子，在聚焦内查找活动监视器，就会呈现类似于 Windows 使命办理器很类似的窗口，能够看到这台机器上运行着现已敞开的 Chrome 应用进程。

二.浏览器发动后

恭喜你获得了一个空白的 Chrome 首页，可是没想到吧～它此刻现已同步敞开了多个进程来协助它完成后续作业。

1. 找到 Chrome 右上角头像周围的三个点点，找到更多东西，点击使命办理器，就能够看到此刻 Chrome 浏览器运行时，同步敞开了哪些进程。

2. 你自界说的拓展东西也会各自敞开一个进程。

3. 回过头看一下这些进程分别代表着什么

浏览器进程（主进程，但不担任Tab）首要控制-> 地址栏、书签、撤退、行进，并担任进行浏览器和其它进程之间的调度和谐。
主进程又细分为：
  1. GPU进程 （担任整个浏览器页面的烘托，包括顶部的查找栏，和Tab标签页的内容）
  2. Network：网络进程 （看名字就显而易见，担任网络恳求的处理）
  3. Storage:缓存进程 （望文生义，办理缓存之类）
  4. Audio: 音频进程 （望文生义）
  5. Data Decoder :数字解码进程
  6. Plugin :在这儿没有明晰写出 Plugin 这几个字，其实它便是咱们浏览器一些

4. 能够很明晰的看到，每个 Tab 页都有属于自己的一个进程，这也就保证了某一个页面卡死，可是并会不影响其它页面的正常作业。

可是这样一个 Tab 一个进程点分配原则是必定的吗？并不必定，这取决于你浏览器设置的进程模型是什么。这儿贴一下 Chromium文档。

其间 Chrome 默许运用的的便是第一个 Process-per-site-instance 模型，能够简略的了解为每个 Tab 都会分配一个进程去处理。别的三个模型能够自行了解，这儿我暂时还未搞懂，就不误导咱们了。

三.当你在url地址栏输入网站敲下回车后

1. 此刻浏览器进程会敞开一个 UI 线程去捕捉你输入的究竟是关键字还是域名。 这儿假设你输入的是 www.baidu.com （输入的是域名，并不是关键字。）

2. UI 线程判别你输入的是域名，然后它会把用户输入的信息告知给Network 进程。（这儿就需要了解一下进程之间的通讯是经过 IPC inter process communication）

3. Network 进程收到告知后，会去恳求 DNS（domain name system）域名解析系统，解析域名相对应的 IP 地址。

4. 假如你输入的是关键词，那么 Network 进程会运用默许的查找引擎去查找相对应的输入内容。

5. 当网络进程拿到站点服务器返回的数据后，（留意，此刻你现已拿到相对应的页面信息，可是还没烘托到页面上）首先 Chrome 自带的 SafeBrowsing 会检查站点是否⚠️为风险站点。（通常是检查站点 ip 是否在谷歌的黑名单里)

6. ok，假设你访问的并不是风险网站。那么 Network 进程会告知 UI 进程我这边处理好了，该你上场了。

   

7. UI 线程拿到网站数据后，会创立一个烘托进程（Renderer Process）来烘托页面。（经过 IPC 传递）

四.页面烘托流程

1. 烘托进程拿到数据后，也便是.html文件后，将会解析该文件。构建对应的 Dom 节点。（拿到的其实便是这个姿态）
   

   

2. 紧接着进行 Render 进程进行 Tokeniser 词法解析。这个进程有些抽象，这儿我简略举个栗子。（比方:我今日吃了一个冰激凌，其间【我】是主语，【吃】是动词，【冰激凌】是名词，这些都是咱们人类片面界说好的词性，怎么让机器去了解这写词语的词性，便是词法解析。）映射到这儿，就好比咱们写的<div>、<img> 等标签，都是咱们人片面界说好的，告知机器怎么去了解对应的数据，这个进程便是词法解析。

3. 当解析好今后，紧接着会进行 DOM Tree 构造。

   

4. ⚠️留意此刻实在 DOM 还未构造出来。

5. 这时分会创立 Document 目标，body目标，节点目标等等。（这儿不要觉得很深邃。没错，这儿创立的 Document 目标并不是什么稀罕玩意，便是咱们常用的 document.getElementById 办法中的那个 document ，Body 同理。）

6. 文档解析是从上向下解析的，当遇到像<img>等行内替换元素是不会阻塞 Dom Tree 的构造的。可是当遇到<script>标签的时分，就会中止解析.html文件，直到.js文件解析结束。为什么呢？这其实也是 JS 为什么要设计成单线程的原因，假如解析 dom 和 JS 并行，那么就会形成某一时刻 dom 要将一个div烘托成一个蓝色布景，可是 JS 同时修改了这个 div 的布景颜色为红色，那我究竟该听谁的呢？通常就会形成页面无法正常作业。

   

7. 也对应了最开始学习html标签时的常识，<script> 标签要放到适宜的方位。

8. 假设现在最终一行代码现已解析结束，那么咱们就会得到一个完好的 DOM Tree

   

五.款式烘托

这个进程便是解析.css 文件的进程，查找每个节点是否有设置类名，然后解析款式对应的数值。

六.元素烘托方位

1. 只拿到了每个元素该烘托成什么姿态是不行的，这时分还需要知道各个元素所需要呈现在页面哪个方位。也便是元素所占页面的大小和节点的坐标。这个进程称为 Layout 布局。

2. Render 主线程经过遍历 DOM Tree 和从前核算好的款式生成与之对应的 Layout Tree 。Layout Tree 记载了每个节点在页面上对应的（x,y）坐标和尺寸。

   

3. 这儿需要留意的是，DOM Tree 和 Layout Tree 并不是一一对应的关系。DOM Tree 某个元素假如设置了display:none，则该元素不会呈现在 Layout Tree 上。

4. 而假如在款式中设置了 伪类 （如：div::before）而且设置了 content 特点，那么该元素就会呈现在 Layout Tree 上，可是并不会呈现在 Dom Tree 上。形成这个的根本原因便是 DOM Tree 彻底便是根据 html生成的，它并不关心款式。而 Layout Tree 是根据核算 DOM Tree 和款式核算生成的。

篇幅有些长，有点晚了，我要睡觉啦～未完待续…

下篇已更新Chrome浏览器是怎么作业的？（二）