分析浏览器渲染css机制

分析上图的渲染机制有什么不同：

       如果直接使用变迁来定义样式，在css渲染时浏览器需要先查找DOM节点，而添加类名不需要查找dom节点。

知识点：

       浏览器对css的匹配原理：浏览器css匹配不是从左到右进行查找，而是从右到左进行查找，比如之前说的div#divBox p span.red{color：red}。浏览器的查找顺序如下：

         先查找html中所有class=‘red’的元素，找到之后，再查找其他父辈元素中是否有p元素，在判断p的父元素中是否有id为divBox的div元素，如果都存在则css匹配上。

         浏览器从右到左进行查找的好处是为了尽早过滤一些无关的样式规则和元素。

         另外，在css的渲染效率中id和class的效率是基本相当的，class是在第一次载入中被缓存的，在层叠中会有更加好的效果，但是在根部元素采用id会具有更好的效率（id有微妙的速度优势）。