了解 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 。
渲染原理示意图：
前端web页面的渲染流程
1、构建DOM与 CSSOM
浏览器通过http请求，获得静态资源后，进行页面渲染时，构建dom与cssom是同时进行的。
html 构建dom
构建dom时，按照html页面中标签的顺序，由上向下渲染。
css 构建cssom
html构建cssom的同时，将css样式构建为cssom
2、渲染树 Render Tree
该过程中DOM与CSSOM合并，生成渲染树，树中包含了渲染页面所需要的节点。
3、布局Layout
计算出每个节点对象的精确位置和大小
4、绘制Paint
使用上面准备好的节点信息，绘制出页面
javascript
我们看到，在构建DOM和CSSOM阶段，会有javascript进入
1、当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行。
2、JavaScript 可以查询和修改 DOM 与 CSSOM。
3、JavaScript 执行将暂停，直至 CSSOM 就绪。
————————————————
原文链接： https://blog.csdn.net/baidu_30891377/article/details/106313534
对，CSS解析跟DOM解析正好相反，是从右向左的。这么设计的原因是单向树检索速度理论上更快。
所以要尽量：
不要在ID选择器或类选择器前使用标签名；
尽量少使用层级关系；
使用类选择器代替层级关系；
最右端的选择器不要出现 *。
但这不是优化的主要方向，甚至可以说是很少有人去专门优化CSS的层级结构。因为在现在的主流浏览器中，CSS渲染速度从来都不是瓶颈。反倒是大型网站中CSS的管理是需要考虑的，更丰富的层级结构有助于开发效率的提升。
