fat-cat

CSS 是怎么工作的

浏览加载网页的简化版本

• 浏览器载入 HTML 文件（比如从网络上获取）
• 将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式
• 载入资源:接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理
• 解析 css 样式：浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、 id 等等）把他们分到不同的“桶”（桶：指的是一个能存储一条或多条记录的存储单位）中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）
• 上述的规则应用于渲染树之后，渲染树会依照应该出现结构进行布局
• 网页展示在屏幕上（这一步被称为着色）