现代浏览器内部工作原理(附详细流程图)

发表于:2019-3-12 16:31

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:caihaihong    来源:掘金

    当Chrome运行在强力硬件上时,会把不同的服务功能模块分配到不同的进程,从而提升稳定性,但是当运行在弱硬件设备时候,会将一些服务功能模块整合到同一个进程以节约内存,但是相应的稳定性也会下降。
  每个Iframe的渲染进程)——站点隔离
  站点隔离实现每个Iframe运行在独立的渲染进程。每个tab站点单独运行一个进程,站点内的Iframe运行一个单独的渲染进程,这样在不同的站点内,相同Iframe可以共享内存。
  同源策略是web的安全模型,也就是某一站点在没有授权的情况下,其他站点是不能获取其数据的。进程隔离是分离站点的最高效手段。
  站点隔离示意图
  导航时候发生了什么?
  它以浏览器进程(Browser Process)开始
  浏览器进程管理一切除Ta外之外的一切,浏览器进程内有很多线程,例如绘制浏览器的按钮和输入栏的UI线程、处理网络栈以从因特网获取获取的网络线程、控制文件访问的存储线程。当输入URL,输入由浏览器的进程的UI线程处理。
  顶部是浏览器 UI,底部是拥有 UI、网络和存储线程的浏览器进程图
  一个简单的导航
  处理输入
  浏览器进程的UI线程首先确定是搜索查询还是一个URL。UI线程决定是搜索内容到搜索引擎还是去一个网站。
  UI 线程询问输入内容是搜索查询还是 URL 地址
  当按下Enter键,UI线程启用网络去调取获取站点内容,加载动画会显示在标签页的一角。网络线程会通过适当的协议,为请求建立TLS连接。
  SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS与SSL在传输层对网络连接进行加密。
  SSL协议位于TCP/IP协议与各种应用层协议之间,为数据通讯提供安全支持。SSL协议可分为两层: SSL记录协议(SSL Record Protocol):它建立在可靠的传输协议(如TCP)之上,为高层协议提供数据封装、压缩、加密等基本功能的支持。
  安全传输层协议(TLS)用于在两个通信应用程序之间提供保密性和数据完整性。该协议由两层组成: TLS 记录协议(TLS Record)和 TLS 握手协议(TLS Handshake)。较低的层为 TLS 记录协议,位于某个可靠的传输协议(例如 TCP)上面,与具体的应用无关,所以,一般把TLS协议归为传输层安全协议。
  Roger[rɑ:d(r)]:无线通信答语:收到。UI 线程告诉网络线程要导航到 mysite.com
  在这时,网络线程可能会收到像 HTTP 301 那样的服务器重定向头。这种情况下,网络线程会告诉 UI 线程,服务器正在请求重定向。然后,另一个 URL 请求会被启动。
  读取响应
  包含 Content-Type 的响应头以及作为实际数据的 payload
  一旦开始收到响应主体,网络线程会查看数据流的前几个字节,响应报文的Content-Type字段会声明数据的类型。但可能存在丢失会错误。所以有了MIME类型嗅探来解决这个问题。
  如果响应是一个HTML文件,那么下一步就会把数据传给渲染进程,如果是一个下载的文件,意味着是一个下载请求,会把它传递给下载器管理器。
  网络线程询问一个响应数据是否是从安全网站来的 HTML
  此时也会进行safeBrowsing检查,如果域名和数据匹配到一个恶意网站,那么网络线程会显示一个警告页面。此外也会进行Cross Origin Read Bloking (CORB)检查,以确保敏感的跨域数据不被传给渲染进程。
  查找渲染进程
  一旦所有的检查处理完毕并且网络线程确定会导航到请求的站点,网络请求线程会告诉UI线程所有的数据请求完毕。UI线程会寻找渲染进程开始渲染Web页面。
  网络线程告诉 UI 线程去查找渲染进程
  由于网络请求线程会花费时间,一次可以应用一个优化措施,当UI线程正发送一个URL请求给网络线程时候,可以同时查找开启一个渲染进程待命,如果导航重定向,这个渲染进程或许不会用到。
  提交导航
  现在数据和渲染进程就绪,浏览器会发送一个IPC(进程间通信)到渲染进程去提交导航,他也会传递数据流,所以渲染进程会保持接受HTML数据,一旦浏览器进程收到渲染进程已经提交的确认信息,导航完毕并且文档加载解析开始。
  这时,地址栏已经更新,安全指示器和站点设置UI会放映新页面的站点信息,此标签页的session历史记录被更新,所以前进后退按钮会走向刚导航过的站点,当你关闭标签页或者窗口,为了优化Tab/session的还原,session历史被保存在硬盘上。
  浏览器和渲染进程间的 IPC,请求渲染页面。
  额外的步骤:初始加载完毕
  一旦导航别提交,渲染进程开始加载资源和渲染页面,一旦渲染进程渲染完毕,会发送IPC返回给浏览器进程,(这也会所有frameh和onload事件已经触发和执行完毕后发生)。这时,UI线程停止标签页上的加载动画。
  导航到另一个站点
  简单导航已经完成,在导航栏在输入一个URL时,浏览器进程会先检查已经渲染的站点是否关心beforeUnload事件,确认没有的话,就会执行相同的操作,导航到另一个站点。
  befounload事件会在用户离开或者关闭标签页面时候给予提醒“离开此站点”。
  注意:不要添加无条件的beforeunload处理程序,会产生延时。
  浏览器进程向渲染进程发送 IPC 告诉它将要导航到另一个站点
  如果渲染进程启动了导航(window.location.herf=xxx),渲染进程会先检查befoeload事件处理程序,会像浏览器处理导航一样执行相同的步骤,唯一不同的是导航请求是由渲染进程发送到浏览器进程的。
  当新导航到新站点时,会调用一个独立的渲染进程来处理导航,同时保留当前的渲染进程来处理unload事件。
  2 个 IPC(从浏览器进程到新渲染进程)告知渲染页面并告知旧渲染进程卸载
  Service Worker待补充
  渲染进程的内部机制
  渲染进程处理网站内容
  渲染进程负责标签内发送的所有事情。渲染进程中,主线程处理服务器返回给用户的大部分数据,如果使用了web sworker或Service Sorker,部分JS将由工作线程处理。合成和光栅线程也在渲染进程内运行,以高效流畅的呈现页面。
  渲染进程的核心工作是将HTML,CSS和JavaScript转换为用户可以与之交互的网页。
  渲染进程内部包含主线程、工作线程、合成线程和光栅线程
  解析(Parsing)
  Dom的构建
  当渲染进程收到HTML数据时,主线程解析文本字符串(HTML)并将其转换为(DOM).
  DOM是页面在浏览器的内部表现,也是开发人员通过JS与之交互的数据结构
  HTML的标签的解析由HTML Standar决定,HTML规范可以很优雅的处理一些标签错误。
  子资源加载
  网站的图像,CSS,JS外部资源,需要从网路或者缓存加载。解析构建DOM时,主线程会按处理顺序逐个加载,为了加快速度,“预加载扫描器(preload scanner)”会同时进行。如果文档有<img><link>,预加载扫描器会在浏览器进程中发送请求。
  主线程解析 HTML 并构建 DOM 树
  3.JS阻塞解析
  当解析HTML时,遇到<script>时,会停止解析接下来的内容,加载js,并执行里面的代码。
  提示浏览器如何加载资源
  可以在<script>标签加async或者defer属性,实现异步加载JS,或者加载JS模块,可以使用 <link rel="preload">告知浏览器当前导航肯定需要该资源,并且你希望尽快下载。
  样式计算
  只有DOM元素无法确定页面的外观,需要结合CSS样式。主线程解析CSS并且确定每个DOM节点计算后的样式。
  主线程解析 CSS 以添加计算后样式
  布局树(Layout Tree)
  知道每个节点已经对应的元素样式,不足以渲染页面。布局是计算几何元素形状的过程,主线程遍历DOM,计算样式并创建布局树,其中包含xy坐标和边框大小等信息,布局树可能与DOM树结构树类似,但它仅包含页面可见内容的信息。如果一个元素应用了 display:none,那么该元素不是布局树的一部分。类似地,如果应用了如 p::before{content:"Hi!"} 的伪类,则即使它不在 DOM 中,也包含于布局树中。
  主线程遍历计算样式后的 DOM 树,以此生成布局树
  绘制
  有了DOM、样式、布局树还不能画出页面,还不知道绘制的顺序。例如,有的元素有了z-index,简单从上到下绘制就会出现图层高低错误。
  因为没有考虑z-index,页面元素按HTML标记的顺序出现,导致错误的渲染图像
  在绘制步骤,主线程遍历布局树(Layout Tree)创建绘制记录(Paint Records),就像是背景优先,然后矩形,文字。
  线程遍历布局树并生成绘制记录
  更新渲染管道的成本很高
  DOM + Style、布局和绘制树的生成顺序


       上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。
  
32/3<123>
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号