您好,登錄后才能下訂單哦!
這篇文章主要介紹瀏覽器是如何解析代碼的,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
解析HTML
HTML是逐行解析的,瀏覽器的渲染引擎會將HTML文檔解析并轉(zhuǎn)換成DOM節(jié)點。
將HTML解析成許多Tokens
將Tokens解析成object
將object組合成一個DOM樹
解析CSS
瀏覽器會從右往左解析CSS選擇器
我們知道DOM樹與CSSOM樹合并成render樹,實際上是將CSSOM附著到DOM樹上,因此需要根據(jù)選擇器提供的信息對DOM樹進行遍歷。
我們看一個例子:
<style> .nav .title span {color:blue} </style> <div class='nav'> <div class='title'> <span>南玖</span> </div> <div class="sub_title">前端</header> </div>
從右至左的匹配:
先找到所有的最右節(jié)點 span,對于每一個 span,向上尋找節(jié)點 div.title
由 h4再向上尋找 div.nav 的節(jié)點
最后找到根元素 html 則結束這個分支的遍歷。
解析JS
在瀏覽器中有一個js解析器的工具,專門用來解析我們的js代碼。
當瀏覽器遇到js代碼時,立馬召喚“js解析器”出來工作。
解析器會找到js當中的所有變量、函數(shù)、參數(shù)等等,并且把變量賦值為未定義(undefined)。
把函數(shù)取出來成為一個函數(shù)塊,然后存放到倉庫當中。這件事情做完了之后才開始逐行解析代碼(由上向下,由左向右),然后再去和倉庫進行匹配。
以上是“瀏覽器是如何解析代碼的”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關知識,歡迎關注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。