了解 HTML 和 CSS 的渲染原理从以下几方面入手：
html各种渲染都是从浏览器开始的，分为浏览器解析和浏览器渲染两大步骤
一、浏览器解析
1、浏览器通过请求的 URL 进行域名解析，向服务器发起请求，接收文件（HTML、CSS、JS、Images等等）。
2、HTML 文件加载后，开始构建 DOM Tree
3、CSS 样式文件加载后，开始解析和构建 CSS Rule Tree
4、Javascript 脚本文件加载后， 通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree
二、浏览器渲染
1、浏览器引擎通过 DOM Tree 和 CSS Rule Tree 构建 Rendering Tree
2、Rendering Tree 并不与 DOM Tree 对应，比如像 <head>标签内容或带有 display: none的元素节点并不包括在 Rendering Tree 中 。
3、通过 CSS Rule Tree 匹配 DOM Tree 进行定位坐标和大小，是否换行，以及 position、overflow、z-index 等等属性，这个过程称为 Flow 或 Layout 。
4、最终通过调用Native GUI 的 API 绘制网页画面的过程称为 Paint 。
渲染原理示意图：
对，CSS解析跟DOM解析正好相反，是从右向左的。这么设计的原因是单向树检索速度理论上更快。
所以要尽量：
不要在ID选择器或类选择器前使用标签名；
尽量少使用层级关系；
使用类选择器代替层级关系；
最右端的选择器不要出现 *。
但这不是优化的主要方向，甚至可以说是很少有人去专门优化CSS的层级结构。因为在现在的主流浏览器中，CSS渲染速度从来都不是瓶颈。反倒是大型网站中CSS的管理是需要考虑的，更丰富的层级结构有助于开发效率的提升。
