“我报名参加金石方案1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动概况”
Chrome浏览器是怎么作业的?(一)
前语:
观看视频有感,随手记载一下。而且关于自己身为一个前端工程师,连一个浏览器的页面烘托的大致进程都无法正确表达出来,深深感到惭愧。
tips: 本文是纯新手向,只会以自己初学的了解解说大致进程,给和我有相同疑问的新手提供一个大致的思路,而且会同步解说其它额外相关常识。本文并不会牵扯源码等级的实现,请各位深知其间细节大佬键⌨️下留情。
一.当你刚翻开浏览器时
-
双击浏览器图标
-
紧接着系统分配给浏览器一块内存
-
随后浏览器创立一个进程准备作业(process)
以Mac为例子,在聚焦内查找活动监视器,就会呈现类似于 Windows 使命办理器很类似的窗口,能够看到这台机器上运行着现已敞开的 Chrome 应用进程。
二.浏览器发动后
恭喜你获得了一个空白的 Chrome 首页,可是没想到吧~它此刻现已同步敞开了多个进程来协助它完成后续作业。
- 找到 Chrome 右上角头像周围的三个点点,找到更多东西,点击使命办理器,就能够看到此刻 Chrome 浏览器运行时,同步敞开了哪些进程。
- 你自界说的拓展东西也会各自敞开一个进程。
- 回过头看一下这些进程分别代表着什么
浏览器进程(主进程,但不担任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地址栏输入网站敲下回车后
-
此刻浏览器进程会敞开一个 UI 线程去捕捉你输入的究竟是关键字还是域名。 这儿假设你输入的是 www.baidu.com (输入的是域名,并不是关键字。)
-
UI 线程判别你输入的是域名,然后它会把用户输入的信息告知给Network 进程。(这儿就需要了解一下进程之间的通讯是经过 IPC inter process communication)
-
Network 进程收到告知后,会去恳求 DNS(domain name system)域名解析系统,解析域名相对应的 IP 地址。
-
假如你输入的是关键词,那么 Network 进程会运用默许的查找引擎去查找相对应的输入内容。
-
当网络进程拿到站点服务器返回的数据后,(留意,此刻你现已拿到相对应的页面信息,可是还没烘托到页面上)首先 Chrome 自带的 SafeBrowsing 会检查站点是否⚠️为风险站点。(通常是检查站点 ip 是否在谷歌的黑名单里)
-
ok,假设你访问的并不是风险网站。那么 Network 进程会告知 UI 进程我这边处理好了,该你上场了。
-
UI 线程拿到网站数据后,会创立一个烘托进程(Renderer Process)来烘托页面。(经过 IPC 传递)
四.页面烘托流程
-
烘托进程拿到数据后,也便是
.html
文件后,将会解析该文件。构建对应的 Dom 节点。(拿到的其实便是这个姿态)
-
紧接着进行 Render 进程进行
Tokeniser
词法解析。这个进程有些抽象,这儿我简略举个栗子。(比方:我今日吃了一个冰激凌,其间【我】是主语,【吃】是动词,【冰激凌】是名词,这些都是咱们人类片面界说好的词性,怎么让机器去了解这写词语的词性,便是词法解析。)映射到这儿,就好比咱们写的<div>、<img>
等标签,都是咱们人片面界说好的,告知机器怎么去了解对应的数据,这个进程便是词法解析。 -
当解析好今后,紧接着会进行
DOM Tree
构造。 -
⚠️留意此刻实在 DOM 还未构造出来。
-
这时分会创立
Document
目标,body
目标,节点目标等等。(这儿不要觉得很深邃。没错,这儿创立的 Document 目标并不是什么稀罕玩意,便是咱们常用的 document.getElementById 办法中的那个 document ,Body 同理。) -
文档解析是从上向下解析的,当遇到像
<img>
等行内替换元素是不会阻塞 Dom Tree 的构造的。可是当遇到<script>
标签的时分,就会中止解析.html
文件,直到.js
文件解析结束。为什么呢?这其实也是 JS 为什么要设计成单线程的原因,假如解析dom
和JS
并行,那么就会形成某一时刻dom
要将一个div
烘托成一个蓝色布景,可是JS
同时修改了这个div
的布景颜色为红色,那我究竟该听谁的呢?通常就会形成页面无法正常作业。 -
也对应了最开始学习
html
标签时的常识,<script>
标签要放到适宜的方位。 -
假设现在最终一行代码现已解析结束,那么咱们就会得到一个完好的 DOM Tree
五.款式烘托
这个进程便是解析.css
文件的进程,查找每个节点是否有设置类名,然后解析款式对应的数值。
六.元素烘托方位
-
只拿到了每个元素该烘托成什么姿态是不行的,这时分还需要知道各个元素所需要呈现在页面哪个方位。也便是元素所占页面的大小和节点的坐标。这个进程称为 Layout 布局。
-
Render 主线程经过遍历 DOM Tree 和从前核算好的款式生成与之对应的 Layout Tree 。Layout Tree 记载了每个节点在页面上对应的(x,y)坐标和尺寸。
-
这儿需要留意的是,DOM Tree 和 Layout Tree 并不是一一对应的关系。DOM Tree 某个元素假如设置了
display:none
,则该元素不会呈现在 Layout Tree 上。 -
而假如在款式中设置了 伪类 (如:
div::before
)而且设置了content
特点,那么该元素就会呈现在 Layout Tree 上,可是并不会呈现在 Dom Tree 上。形成这个的根本原因便是 DOM Tree 彻底便是根据html
生成的,它并不关心款式。而 Layout Tree 是根据核算 DOM Tree 和款式核算生成的。
篇幅有些长,有点晚了,我要睡觉啦~未完待续…
下篇已更新Chrome浏览器是怎么作业的?(二)