WebKit05-WebKit相关HTML网页和结构

208 阅读2分钟

「这是我参与2022首次更文挑战的第17天,活动详情查看:2022首次更文挑战」。

网页构成

我们要了解浏览器内核,首先应该了解的就是HTML语言以及规范,常见的HTML结构有两种

  • 框结构
  • 层次结构

同时HTML代码构成是标准的树状结构,即根节点是html,然后根据不同节点,依次放入代码,最终组成一棵结构树。

这二者是不一样的,根本的含义实际上是,树形结构的代码在浏览器渲染框架的解释处理的时候会被处理为对应的结构。

网页结构

框结构

首先我们先来讲讲框结构,这种结构在早起腾讯的一些页面技术架构中经常出现,甚至还会出现在一些微服务架构解决方案中。

它很早被引入网页中,他可以用来对网页的布局进行分割,将网页分为几个框。同时,也可以在网页中嵌入页面。因此网页可以有很复杂的结构,框中也可以嵌套很多框。

直接来分辨的话就是来判断页面中是否存在iframe,结构如下:

image.png

层次结构

层次结构主要指层次结构中的文档部分,就是最最基础的页面文件,网页中的元素可能会被分布在不同的层次之中,也就是说某些元素可能不同于它父元素所在的新层。

比如说video、div、canvas的层次可能就不太一样。同时还要注意到css部分的代码,它也会对分层策略产生重要的影响。

分层策略不同的渲染引擎可能会不太一样,但是有一些基本原则,比如上面的video、div、canvas。

上面两种结构奠定了WebKit页面分析的一个基本方案原则,即渲染过程。我们接下来部份就会对这部分进行详细的阐述,前面我们讲了一个浏览器整体的渲染的一个大模块,下面会对其进行更细节部分的阐述。

ps:有一道经典面试题,浏览器输入URL进行页面的访问的时候都做了什么?这道题的答案,就可以从WebKit如何渲染页面的部分来获得你的知识点哦~

敲黑板!明天见~