首先來了解下頁面是如何渲染的：首先瀏覽器會(huì)把HTML文檔解析為DOM tree，然后解析CSS為CSS tree彤灶，接著把DOM tree和CSS tree組合構(gòu)建成為一棵可以渲染的render tree，最終用來繪圖批旺，也就是最終呈現(xiàn)在我們面前的頁面幌陕。
因?yàn)镈OM可能是很復(fù)雜的結(jié)構(gòu)，因此一種高效的能把DOM tree和CSS tree組合構(gòu)建的方法就顯得尤為必要汽煮。
把DOM tree和CSS tree組合構(gòu)建的過程就是解析CSS選擇器和DOM元素一一對(duì)應(yīng)的過程搏熄。
至此我們大概了解了頁面的渲染過程。
先來看從左往右解析CSS選擇器的工作方式：
<body>
? ? <div class="box">
? ? ? <p>
? ? ? ? <span class="red">hello</span>
? ? ? </p>
? ? </div>
? ? <div class="box">
? ? ? <div>
? ? ? ? <span class="red">hello</span>
? ? ? </div>
? ? </div>
? ? <div class="box">
? ? ? <p>
? ? ? ? <span class="bule">hello</span>
? ? ? </p>
? ? </div>
? ? <p class='box'></p>
? </body>
// css
.box p span.red{
? ? color: red;
}
首先查找類名為box的元素 找到4個(gè)符合的元素
然后再遍歷第一步的結(jié)果暇赤，查找p標(biāo)簽心例，有2個(gè)元素符合
最后查找類名為red的span元素，精確找到目標(biāo)鞋囊。
我們從最上層依次向下遍歷止后，中間做了大量無用搜索，導(dǎo)致效率低下溜腐。
再來看看從右至左的解析順序
先查找類名為red的span元素 找到2個(gè)符合的元素
遍歷第一遍的結(jié)果坯门，向上查找p元素 找到唯一的精確匹配
明顯可以看出從右至左的解析方式高效很多，這在復(fù)雜的DOM結(jié)構(gòu)中尤其明顯逗扒，
總的來說 從右至左的解析方式能最快速的精確定位古戴，減少檢索次數(shù)。
