读书笔记

css艺术之美

Long
Long  

读书笔记

# 页面的渲染过程

  • 解析文件
    • 将html文件转换为DOM树
    • 将css文件转换为CSSOM树
    • 将DOM树和CSSOM树合并生成渲染树
  • 绘制图层
    • 根据渲染树生成布局渲染树(回流)
    • 根据布局渲染树生成绘制渲染树(重绘)
  • 合成图层：根据绘制渲染树合成图层显示在屏幕上

在构建DOM树的过程中，当HTML解析器遇到<script>时会立即阻塞DOM树的构建，将控制权移交给浏览器的JS引擎，等到JS引擎运行完毕，浏览器才会从中断的地方恢复DOM树的构建。<script>的脚本加载完成后，JS引擎通过DOM API和CSSOM API操作DOM树和CSSOM树。为何会产生渲染阻塞呢？其根本原因在于：JS操作DOM后，浏览器无法预测未来DOM的具体内容，为了防止无效操作和节省资源，只能阻塞DOM树的构建。

# 回流和重绘

  • 回流指的几何属性的改变
  • 重绘指的外观属性的改变

回流一定导致重绘, 重绘不一定导致回流

# 盒模型

# 什么是盒模型

我们可以 html 中的每一个标签看作一个盒子, box = margin + border + padding + content, 但是由于一些原因盒子模型又分为 标准的盒子模型 和 怪异的盒子模型

怪异盒模型 : content = 设置的width;

标准盒模型 : content = 设置的width - padding - border

  • tips: 在IExplore中，若HTML文档缺失 <!doctype html> 声明则会触发怪异盒模型
CSS HTML
页面的渲染过程
回流和重绘
盒模型