推荐理由：文章由浅入深，受益匪浅。说到CSS，很多童鞋都是很不屑的，尤其是看到RedMonk2019编程语言排行榜的时候，CSS竟然排在了第七位。先来看看这份榜单：既然CSS如此重要，值得我们花点时间研究一下相关原理。本节我们会讲CSS渲染优化相关内容，主要围绕以下几点，由浅入深，了解来龙去脉：浏览器构成渲染引擎CSS特性CSS语法解析过程CSS选择器执行orderEfficientComputedStyleCSS写顺序对对性能有影响吗？优化策略Browser构成UserInterface：用户界面，包括浏览器可见的地址输入框、浏览器前进和返回按钮、书签、历史记录等用户可操作的功能选项。浏览器引擎：浏览器引擎，可以在用户界面和渲染引擎之间传递指令或者读写客户端本地缓存中的数据，是浏览器各部分之间通信的核心。Renderingengine：渲染引擎??，解析DOM文档和CSS规则，将内容排版成有样式的界面显示在浏览器中，即排版引擎。我们常说的浏览器内核主要是指渲染引擎。Networking：网络功能模块是浏览器开启网络线程发送请求和下载资源的模块。JavaScriptInterpreter：JS引擎，解释执行JS脚本部分，如V8引擎。UIBackend：UIbackend用于绘制浏览器窗口中的基本控件，如组合选择框、按钮、输入框等DataPersistence：数据持久化存储，涉及到一些客户端存储技术，如Cookie和LocalStorage，可以通过浏览器引擎提供的API调用。渲染引擎渲染引擎解析DOM文档和CSS规则，将内容排版成有样式的界面显示在浏览器中，即排版引擎。我们常说的浏览器内核主要是指渲染引擎。上图中，我们需要注意两条主线：一是HTMLParser生成的DOM树；二是CSSParser生成的StyleRules（CSSOM树）；之后DOM树和StyleRules会生成一个新的对象，也就是我们常说的RenderTree，结合Layout绘制在屏幕上，这样就可以显示了。CSS特性1.优先选择器权重!important1/0(无限)内联样式1000ID100类/伪类/属性10元素/伪元素1通配符/子选择器/相邻选择器0!important>内联样式(权重1000)>ID选择器（权重100）>类选择器（权重10）>标签（权重1）>通配符>继承>浏览器默认属性示例代码一：
