【剑指offer】输入网址按回车后,浏览器发生了什么?
一、DNS域名解析及安全性检测
- 当你在浏览器URL地址栏输入内容时,浏览器进程的UI线程会捕捉你输入的内容。
- 如果输入的是一个网址:UI线程会启动一个网络线程来请求DNS进行域名解析,接着开始连接服务器获取数据
- 如果输入的是一串关键词:就会使用默认配置的搜索引擎来查询
- 当网络线程获取到数据后会通过
SafeBrowsing
来检测站点是否是恶意站点。
- 如果是,则会显示一个警告页面,告诉你这个站点有安全问题,浏览器会阻止你的访问,当然你也可以强行继续访问
SafeBrowsing
是谷歌浏览器内置的站点安全系统,通过改站点的数据来判断是否安全。比如通过查看该站点的IP是否在谷歌的黑名单中。
- 当返回数据准备完毕,并且通过安全检测后,网络线程会通知UI线程我就要准备好了。UI线程会创建一个渲染器进程来渲染页面
二、渲染过程
- 浏览器进程中的网络线程请求到获取到HTML数据后,通过IPC(进程间通信管道)将数据传给渲染器进程。
渲染器进程的主线程
- 渲染器主线程将HTML解析构造DOM树,然后进行CSS样式计算。
- 在解析HTML时会遇到引入一些额外的资源
- 如果是图片、CSS等资源,需要通过网络或从缓存中加载,这些资源不会阻塞HTML的解析,因为他们不会影响DOM树的生成
- 如果是js文件,则会停止HTML解析,而去执行JS代码
- 根据DOM树和CSS样式计算,生成layout Tree(记录DOM元素位置,不与DOM树一一对应)
- 通过遍历layout Tree生成绘制顺序表
- 接着遍历layout Tree 生成Layer Tree
- 主线程将Laye(图层) Tree 和绘制顺序信息一起传给合成器线程
合成器线程
- 合成器线程按规则进行分图层,并把图层分为更小的图块(tiles)传给栅格线程
- 栅格线程进行栅格化,并把图块存储在GPU内存中
- 栅格化完成后,合成器线程会获得栅格线程传过来的“draw quads”图块信息(记录图块在内存中存储位置,以及在页面中的显示位置),根据这些信息,合成器线程合成了一个合成器帧(由页面可视区的所有图块信息组成)。
- 合成器线程将该合成器帧通过IPC(进程间通信管道)传回给浏览器进程。
- 浏览器进程再传到GPU进行渲染,之后就呈现再屏幕上了