美文网首页
二、浏览器渲染引擎工作流程

二、浏览器渲染引擎工作流程

作者: abigdonkey | 来源:发表于2019-10-12 11:15 被阅读0次

1. 渲染引擎

浏览器解析HTML并显示在页面的工具。
负责获取网页的内容(HTML、XML、图片等信息)、
整理信息(比如加入CSS等)以及计算网页的显示方式然后输出至显示器。

2.渲染引擎工作流程

1. HTML解析器解析DOM树(同时CSS解析器解析样式)
2.渲染树结构(把DOM Tree和样式表关联起来,生成Render Tree,
具有一定的视觉效果,并按照一定顺序排列在屏幕上)
3. 布局渲染树(有了Render Tree后,为各个节点确定一个在显示器上出现的具体坐标)
4. 绘制DOM树(Render Tree和节点显示坐标都有了,然后调用每个节点的paint方法绘制出来)
webkit渲染引擎工作流程 Gecko渲染引擎工作流程

3. 疑问

1. Render Tree是DOM Tree和Style Rules构建完毕后才开始构建的吗?

不是相互独立的,而是相互交叉。一边加载,一边解析,一边渲染。

2. DOM Tree是文档加载完后构建的吗?

DOM Tree的构建是一个渐进过程,为了达到良好的用户体验,
渲染引擎会尽快将内容显示在屏幕上。

3. CSS的解析是逆向解析的,标签嵌套越深,解析越慢。

相关文章

  • CSS 会阻塞 DOM 解析吗?

    浏览器的渲染 浏览器的渲染流程如下: 图:WebKit 主流程 图:Mozilla 的 Gecko 呈现引擎主流程...

  • 浏览器渲染原理

    浏览器组成 主要包括用户界面、浏览器引擎、渲染引擎、网络、Js解释器、UI后端、数据存储。 渲染流程 解析HTML...

  • 前端面试题目

    bat大厂面试题目 浏览器工作原理 浏览器引擎- 用来查询及操作渲染引擎的接口渲染引擎- 渲染界面:Firefox...

  • 浏览器渲染引擎

    浏览器的内核中主要分为渲染引擎和 javascript 引擎,本篇主要围绕渲染引擎介绍一下浏览器的工作原理。 渲染...

  • 二、浏览器渲染引擎工作流程

    1. 渲染引擎 2.渲染引擎工作流程 3. 疑问 1. Render Tree是DOM Tree和Style Ru...

  • vue核心之虚拟DOM(vdom)

    一、真实DOM和其解析流程? 浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树——创建StyleRu...

  • vue核心之虚拟DOM(vdom)

    一、真实DOM和其解析流程? 浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树——创建StyleRule...

  • 【浏览器内核】渲染引擎、JavaScript引擎

    浏览器内核 浏览器内核 又可以分成两部分:渲染引擎 和 JS引擎。 渲染引擎 渲染引擎 主要包括: HTML 解释...

  • 虚拟DOM

    原文:深入剖析:Vue核心之虚拟DOM 真实DOM和其解析流程 所有的浏览器渲染引擎工作流程大致分为5步:创建 D...

  • 浏览器解析工作流程

    浏览器解析浏览器解析大概的工作流程大致可归纳为四个步骤: 解析HTML以构建DOM树:渲染引擎开始解析HTML文档...

网友评论

      本文标题:二、浏览器渲染引擎工作流程

      本文链接:https://www.haomeiwen.com/subject/zqagpctx.html