①、CSS是Cascading Style **Sheets**(层叠样式表)的简称
②、CSS语言是一种标记语言，它不需要编译，可以直接有浏览器解释执行(属于
浏览器解释性语言).在标准网页设计中负责网页内容(XHTML)的表现。
③、CSS是由W3C的CSS工作组产生和维护的。
一、浏览器是如何渲染和加载页面的
要搞懂这个可以从这个常规流程开始：
1、浏览器的下载顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。
3、如果遇到语义解释性的标签嵌入文件(js脚本，css样式)，那么此时的IE下载过程会启用单独连接进行下载。
4、并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。
5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素(含以前已经渲染的)重新进行渲染。
6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数。
渲染的效率与下面三点有关：
1、CSS选择器的查询定位效率
2、浏览器的渲染模式和算法
3、要进行渲染内容的大小
二、CSS的渲染原理
1、浏览器在接收到服务器返回的html页面后，
2、浏览器开始构建DOM树 DOM TREE,遇到CSS样式会构建CSS规则树 CSS RULE TREE,
3、遇到 javascript会通过 DOM API和CSSDOM API来操作DOM TREE和 CSS RuLe Tree，
4、浏览器引擎会通过DOM Tree和CSS Rule Tree，解析完成后，
5、最后，渲染树构建完成后就是“布局”处理，也就是确实每个节点在屏幕上的确切显示位置
6、下个步骤(渲染之后)，开始“绘制”，便利渲染树，并用UI后端层，将每一个节点绘制出来！有道云笔记
三、CSS渲染规则
css的渲染规则，是从上到下从左到右渲染的。
.main h4 a { font-size: 14px; }
渲染过程是这样的：首先先找到所有的a，沿着a的父元素查找h4，然后在沿着h4，查找.main。中途找到了符合匹配规则的节点就加入结果集。如果找到根元素的html都没有匹配，则这条路径不在遍历。下一个a开始重复这个查找匹配，直至没有a继续查找。
浏览器的这种规则是为了尽早过滤掉一些无关的样式规则和元素。
四、css权重值
权值，代表着优先级，权值越大，优先级越高。同种类型的选择器权重值相同，后定义的选择器会覆盖先定义的选择器。
1、important最高
2、内联：1000
3、ID：100
4、**class**：10
5、Tag：1
注：组合使用，权值会叠加
五、影响DOM树构建的因素
1、HTML响应流被阻塞在网络中
2、有加载未完成的脚本
3、遇到<script>，但是此时还有为加载完成的样式文件
六、页面渲染与执行过程 通过一个例子，我们来详细看看页面渲染和执行过程到底是怎么工作的：
<html>
<body>
<link href="example.css" rel="stylesheet">
<div>Hi here</div>
<script>
document.write('<script src="other.js"><scr' + 'ipt>')
</script>
div>Hi again</div>
<script src="last.js"></script>
</body>
</html>
1、解析器遇到example.css，并将它从网络中下载下来。下载样式表的过程是耗时的，但是解析器并没有被阻塞，继续往下解析。
2、解析器遇到<script>标签，但是由于样式文件下载未完成，阻塞了该脚本的执行（上面已指出）。解析器（构建DOM树和 CSS规则树）被阻塞住，不能继续往下解析
3、因为渲染树是DOM树 和 CSS规则树 来构造，所以此时，渲染树的构建也被阻塞
4、渲染树是绘制触发条件之一，因此Hi there!也就不能被绘制（painting->display）到页 面中。
绘制的触发条是：渲染树构建完成，并遇到了阻塞
5、接下来，一旦example.css下载完成，内联的脚本执行完了之后，解析器开始执行遇到的<script>标签，并查到src属性中的other.js文件，立即被阻塞，开始下载other.js；
6、因为解析器被阻塞，触发了绘制条件，浏览器就会收到绘制的请求，“Hi，here”就会显示在页面上
7、other.js加载完成了之后，解析器继续向下解析，遇到 last.js 之后又被阻塞，
8、因为解析器再次被阻塞，又形成了 “绘制” 条件，因此绘制DOM树的内容，即，“Hi，again”就会显示在页面上。
9、last.js加载完成，并且被执行。
七、优化你的css
1、把 Stylesheets 放在 HTML 页面头部
2、嵌套层级不要超过三级
3、 css 命名规范，书写规范。
4、多用继承属性
5、少用滤镜，好用hack，少用position: absolute;
6、不要再id选择器和class选择器前使用标签名
7、平铺的背景图片不要过小，1px的图片平铺长宽25px的区域块，需要2500次，太影响渲染速度。
8、谨慎使用float，尽量多使用弹性盒
9、合理化布局（模块化布局）
10、 尽量少用通配符，只用通配符设定一切基础的样式。
对CSS渲染的知识点概括，如果有不足请多指正
[图片上传失败...(image-49cad6-1571572947243)]
网友评论