html怎么渲染到浏览器页面(html渲染成图片)

浏览器向服务器发送请求,索要数据。服务器会返回 HTML、CSS、JS等文件,那文件收到后,页面是如何完成渲染的?渲染的流程是什么?

首先 HTML 和 CSS 先转换数据结构,我们写的文件,浏览器是不能直接识别的,必须要转换成「渲染进程」可以识别的 DOM树 和 styleSheets,再合成可见的 DOM 树和样式表对应结构。

渲染过程中根据 z-index 或者 fixed 属性来分成不同的图层,把图层绘制成图块,GPU 根据图块生成位图,当所有位图都生成完后,会提交一个绘制命令给主进程,主进程负责显示到用户屏幕上。

DOM 树结构

浏览器拿到 HTML 文件,需要先转成可以识别的数据结构。先会把文件变成字符流。在字符流的基础上通过「状态机」来分析里面的词 html、div、p 等,根据词来构造成一套可识别的 DOM 树。

CSS 样式表

CSS 样式也是同理,外链样式、嵌入样式、行内样式,先转成自己可以识别的数据,最终会生成一套「样式表 styleSheets」,页面中 DOM 结构和 CSS 结构都是相对应的,以此来显示 DOM 的样式,如果没有当前的样式,会去查找上一层级的样式,最顶端是 Html 。

html怎么渲染到浏览器页面(html渲染成图片)

布局信息

DOM树和 CSS样式表生成好后,会合并成「布局信息」,就是 div、p、span 宽、高、间距、行距等信息。当然要把 display:none 的隐藏标签去掉,不会在「布局信息」里生成。

html怎么渲染到浏览器页面(html渲染成图片)

分层

我们看到的 HTML 是个平面,但渲染的时候是分成多个图层的,图层和 PhotoShop 的图层是一样的道理,一层层叠加、覆盖。如果 DOM 有 z-index 、opacity、fixed 等这些属性的,会生成不同的图层。

html怎么渲染到浏览器页面(html渲染成图片)

绘制列表

再然后要生成绘制列表了,来记录绘制的顺序和指令,绘制矩形 100*100 ,位置在左上角,绘制矩形 200*200 ,位置在 100,100 。就样细小的绘制指令,融合成一个大的绘制列表。

分块

根据绘制列表提供的信息,在渲染的时候会渲染离 viewport 最近的几个图块,图块大小通常是 256×256 或者 512×512 。为了配合窗口视图「viewport」的展示。GPU 会做一个操作就是把图块生成位图。屏幕高 800,整个页面生成的位图为 3000 高度,根据位图的位置来计算和判断显示哪些位图。

合成和显示

当图块都被生成位图后,就把位图扔给内存,由内存显示到用户屏幕上。

大概理了一下关于渲染流程的步骤,发现里面细节还是很多的。文中如果有理解不对的地方,大家可以去订阅 极客时间《浏览器工作原理与实践》订正,非常好的课程。


内容和图片来源于:极客时间《浏览器工作原理与实践》

题图授权基于 www.pixabay.com 相关协议

原创文章,作者:小道研究,如若转载,请注明出处:https://www.sudun.com/ask/34532.html

Like (0)
小道研究的头像小道研究
Previous 2024年4月8日
Next 2024年4月8日

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注