--前端派-04-卢克大话浏览器 小虾米了然其引擎
浏览器是如何工作的?
浏览器分为三大块:
用户界面:用户可以直接操作的界面
浏览器引擎:
渲染引擎:分为网络进程和JS解析器
什么是进程、线程?
进程:进行资源分配和调度的基本单元,可以申请和调度计算机资源。
线程:运算调度的最小单位。一个进程中可以并发多个线程,每条线程并行执行不同的任务。
浏览器中分为多个不同的进程,可以同时进行。这样能够避免一个线程出现卡顿,导致其他线程等待的问题。
浏览器中分为哪些进程?
浏览器进程 控制除了标签页外的用户界面
网络进程 接受或发起网络服务请求
GPU进程 负责整个浏览器界面的渲染
插件进程(例如Flash)负责控制网站使用的所有插件
渲染进程 显示tab标签内的所有内容
浏览器如何解析网站页面的?
1.如果是关键词,则通过默认搜索引擎进行查询
2.首先由UI界面捕获url地址,
然后发起一个网络进程,
请求DNS服务器,
进行域名解析
3.如果是Chrome浏览器,访问站点前会执行SafeBrowsing进行安全监测。查看网点是否在其危险名单中。会给予用户提示,用户也可继续行进访问。
4.UI进程会创建一个渲染器进程来渲染页面。UI将数据通过IPC管道传递给渲染器。
5.主进程解析HTML,构建DOM树,创建document对象。
(什么是DOM?
DOM是依据HTML文档,而构建的数据结构对象。为JS的操作提供API)
6.如果此时遇到script标签,则会暂停解析HTML文档,而去解析js文件并执行。因为浏览器并不知道,是否在js代码中,有例如“document.write”这种对文档元素进行修改的代码。
7.解析CSS样式。获得layout布局中,元素节点的位置大小等样例。
8.通过遍历DOM树和计算好的样式,构成layout tree。
layout tree中每个节点都记录了元素的x,y和layout尺寸。
其中,dom树和layout树并不是一一对应的。
设置了“display:none;”的节点不会出想在layout tree上。伪类中的content元素会出现在layout tree中,而不会出现在dom tree上。因为dom解析HTML获得,并不关心样式。而layout tree根据dom树和计算的样式构成。
9.主线程遍历layout tree构建回执记录表。记录绘制顺序。
因为,“z-index:;”样式设置会改变样式位置,所以浏览器需要获取渲染顺序,以便渲染不会出错。
10.接着进行图层栅格化。(栅格化:将元素点放置在屏幕上)
早期的栅格化,是将多个图层叠加在浏览器显示区域,用户滚动新的区域在进行页面的更新渲染。
这样的好处是能较快的渲染出用户需要看到的界面,但类似懒加载的处理方式,可能会由于渲染时间过长而出现白屏等卡顿情况。
新的栅格化方案是通过将元素点分为几个图层,再将图层进行合成在一起的方式。
11.综上所述:
主线程会遍历layout tree ,生成layer Tree,然后将layer tree通过IPC床底给合成器线程
合成器线程,会将每个图层栅格化。然后将他们切割成小块传递给栅格线程,栅格处理后的的图块存储在GPU内存中;接着栅格线程将draw quads(存储的每个小图块在页面中的位置、内存地址等信息)给合成器线程生成合成器帧,通过IPC传递给GPU,GPU再渲染到屏幕。
随着页面的更新,GPU会不断生成新帧显示到屏幕上。