前端扫盲——浅析浏览器布局原理

最新推荐文章于 2023-07-03 15:29:44 发布

zhaolandelong

最新推荐文章于 2023-07-03 15:29:44 发布

阅读量506

点赞数

本文链接：https://blog.csdn.net/zhaolandelong/article/details/107516671

版权

写在前面

本文旨在帮助非前端技术同学，粗略掌握浏览器渲染原理，方便工作中的沟通。
本文假设读者已经有了前端的一些基本概念，比如知道 HTML、CSS、JS 分别负责布局、样式、逻辑。有了上述前提，阅读本文后会大致了解浏览器渲染页面的原理，有利于对浏览器渲染流程的抽象，在于前端配合上会抹平很大的 gap。

解析 HTML

首先，浏览器会将 HTML 文档解析成 DOM Tree

DOM Tree

DOM 是文档对象化模型（Document Object Model）的简称。DOM Tree 是指通过 DOM 将HTML 页面进行解析，并生成的 HTML tree 树状结构和对应访问方法。

举个例子

<!DOCTYPE html>
<html>
  <head>
    <title>文档标题</title>
  </head>
  <body>
    <h1>我的标题</h1>
    <a href="">我的链接</a>
  </body>
</html>

这段代码，会被解析成下面的结构
在这里插入图片描述
每个 HTML 元素，就是一个 DOM；每个 DOM 会有很多属性；不同类型的 DOM 有不同的属性。
注：其实同步进行的还有 CSS 的解析，但是本文为了聚焦于 HTML 的渲染，暂不扩展 CSS 的内容。

画元素

我们先暂时放下「元素排列」不管，先来看看怎么画一个元素。实际上就是按照 DOM 的属性描述，把它画出来。关键的属性有哪些呢？

块元素与行内元素

块元素（Block）即自己占用一整行的元素。如 p 段落、h1~h6 标题、div 等
行内元素（Inline）顾名思义，可以排列在同一行的元素。如 a 链接、img 图片、input 输入框、其他表单元素等。
可以用 display 属性来改变元素的性质。
套用在本文的实例中，h1 是块元素，所以字数再少，也会占满一行；a 是行内元素，可以并排展示多个 a 标签。

盒子模型

每个元素都是一个「盒子模型」，包括内容（content）、内边距（padding）、边框（border）、外边距（margin）和宽（width）高（height）基本属性。
在这里插入图片描述

当然实际上还要结合更多 CSS 的属性去呈现元素的样式。但是与「布局」相关的属性，基本上就这些，暂时只了解这些概念就行了。
有了以上概念，浏览器就可以画出一个元素的骨架了。

元素排列

接下来是绘画顺序，浏览器会按照一定顺序，一个一个的画元素。那么这个顺序是什么呢？

文档流（normal flow）

简单来说，把 DOM 元素「从左至右，从上到下」依次排列，像平时写文章的顺序一样，这样就形成了一个「文档流」。当然，DOM Tree 是有层级结构的，子元素在父元素内部，也按照文档流规则排列。

脱离文档流

脱离文档流一个典型的场景就是「弹窗」。整个弹窗是覆盖在整个页面上的。这时候不管你把它放在 DOM Tree 中的什么位置，只要它是脱离文档流的，在画它的时候就会先跳过。
如何脱离文档流？当一个元素有了 float、position: absolute、position: fixed 属性时，就会脱离文档流。
这部分比较复杂，本文不做展开。只需要了解到「弹窗」这类交互是如何实现的即可。

总结

我们简单梳理一下浏览器页面布局的流程：

将 HTML 解析成 DOM Tree
根据 DOM 元素的属性「画元素」
根据文档流排列元素

落实到跟业务相关的就是，后端返回的数据格式，做到如下要求即可：

结构模拟 DOM Tree
DOM 属性足够表现布局信息（其实不用太多）

参考结构

interface Element {
    elementId?: string;
    type: enum; // 组件类型 text/input/grid/picture etc.
    property: { // 组件属性，字段不固定
        value?: any;
        // other properties
    },
    sub?: Element[]; // 组件内置子组件
}

zhaolandelong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端扫盲——浅析浏览器布局原理

本文旨在帮助非前端技术同学，粗略掌握浏览器渲染原理，方便工作中的沟通。本文假设读者已经有了前端的一些基本概念，比如知道 HTML、CSS、JS 分别负责布局、样式、逻辑。有了上述前提，阅读本文后会大致了解浏览器渲染页面的原理，有利于对浏览器渲染流程的抽象，在于前端配合上会抹平很大的 gap。
复制链接

扫一扫