前端学习-浏览器在网页展示过程中负责干什么

WebKit 主流程
  1. 用户输入URL,浏览器向web服务器发送一个http请求,接受文档内容(HTML、CSS、JS、Images等等)。
  2. 渲染引擎开始解析 HTML 文档,并将各标记逐个转化成DOM Tree上的节点
  • 由 DOM 元素和属性节点构成的树结构。DOM 是文档对象模型 (Document Object Model) 的缩写,是 HTML 文档的对象表示,同时也是外部内容(例如 JavaScript)与 HTML 元素之间的接口。 解析树的根节点是Document对象。
  • 解析 HTML由两个阶段组成:标记化和树构建
  1. 解析CSS生成CSS Rule Tree
  2. 解析完成后,浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree
  • 由可视化元素按照其显示顺序而组成的树,也是文档的可视化表示。它的作用是让您按照正确的顺序绘制内容。
  • Rendering Tree和 DOM 元素相对应的,但并非一一对应
  1. 进入布局处理,为每个节点分配一个应出现在屏幕上的确切坐标。
  2. 下一步是绘制。系统会遍历Rendering Tree,并调用Rendering器的“paint”方法,将内容显示在屏幕上。绘制工作是使用用户界面基础组件完成的。
  • 这是一个渐进的过程。为达到更好的用户体验,render力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后,就会开始构建render tree和layout。在不断接收和处理来自网络的其余内容的同时,render tree会将部分内容解析并显示出来。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容