css（八）浏览器渲染

html-css012

css（八）浏览器渲染,第1张

写css最逃不开的应该是浏览器兼容问题了吧，因为css存在一些 未定义行为 ，各个浏览器都会按照自己的渲染规则来表现，就会存在表现不一致的情况，还有很多属性某些浏览器不支持，很多时候需要我们用更通用的方法来实现一些UI效果。本文重点来说说浏览器是如何把一个页面渲染出来的。

主要流程：

DOM生成、样式计算、布局、分层、图层绘制、栅格化、合成显示

下面主要讲css相关的几个步骤

我们书写的html最终都会被解析成一颗dom树，它来表达的dom结构能被浏览器所理解，那css做的就是赋予dom节点每个元素样式。当然，我们写的css也是不能直接被浏览器理解的，需要转化成styleSheets，我们在浏览器控制台输入document.styleSheets就能看到。

styleSheets要应用到各个元素上还需要两个步骤：

最后得出dom节点每个元素的具体样式。

得到dom树后，浏览器会遍历这棵树，把所有可见的节点加到布局树中，再进行布局计算，得到每个节点的坐标位置，保存在布局树中。

得到每个元素的具体位置后，还不能开始绘制页面，因为我们的页面并不是二维的，3D变换，z轴排序、页面滚动等效果都需要图层来实现。所以浏览器会为特定的节点生成专门的图层便于这些效果的实现。那什么样的节点会创建专门的图层呢，包括拥有层叠上下文属性的元素以及需要剪裁(clip)的地方，可以看一下 css（五）层叠

在浏览器开发者工具会有一个Layers标签，这里面可以直观地看到页面的分层情况

当改变了元素宽高或者几何位置的时候，就会触发 重排 ，需要走一遍完整的渲染过程，开销最大。

如果只是改变颜色，那么布局阶段就不需要执行，可以直接进入绘制阶段，所以叫 重绘 ，省去了布局和分层，效率会比重排要高一些。

而使用css的transform实现动画效果，则可以避开重绘和重排，只进行后续的合成操作，被称为 合成 ，能大大提升绘制效率。

Ps 合成操作实在非主线程(GPU进程)上执行的，不占用主线程资源

HTML（超文本标记语言）和CSS（级联样式表）是用于构建Web页面的两项核心技术。HTML为各种设备提供页面的结构，为CSS提供（视觉和听觉的）布局。与图形和脚本一起，HTML和CSS是构建网页和 Web应用程序的基础。

HTML称为超文本标签语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

扩展资料：

CSS具有以下特点：

1、丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2、易于使用和修改

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

3、多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

参考资料：百度百科——HTML

百度百科——css