如何了解 HTML 和 CSS 的渲染原理

1. 如何了解 HTML 和 CSS 的渲染原理

了解 HTML 和 CSS 的渲染原理从以下几方面入手：
html各种渲染都是从浏览器开始的，分为浏览器解析和浏览器渲染两大步骤
一、浏览器解析
1、浏览器通过请求的 URL 进行域名解析，向服务器发起请求，接收文件（HTML、CSS、JS、Images等等）。2、HTML 文件加载后，开始构建 DOM Tree3、CSS 样式文件加载后，开始解析和构建 CSS Rule Tree4、Javascript 脚本文件加载后， 通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree  

二、浏览器渲染1、浏览器引擎通过 DOM Tree 和 CSS Rule Tree 构建 Rendering Tree2、Rendering Tree 并不与 DOM Tree 对应，比如像  标签内容或带有 display: none; 的元素节点并不包括在 Rendering Tree 中 。3、通过 CSS Rule Tree 匹配 DOM Tree 进行定位坐标和大小，是否换行，以及 position、overflow、z-index 等等属性，这个过程称为 Flow 或 Layout 。4、最终通过调用Native GUI 的 API 绘制网页画面的过程称为 Paint 。
渲染原理示意图：

2. 什么叫html页面渲染？

页面渲染都是浏览器的工作。
大致分为以下几步：

加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）
渲染：构建渲染树，对各个元素进行位置计算、样式计算等等，然后根据渲染树对页面进行渲染（可以理解为“画”元素）
这几个过程不是完全孤立的，会有交叉，比如HTML加载后就会进行解析，然后拉取HTML中指定的CSS、JS等。