溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

瀏覽器是如何解析代碼的

發(fā)布時間:2022-03-23 11:11:53 來源:億速云 閱讀:562 作者:小新 欄目:web開發(fā)

這篇文章主要介紹瀏覽器是如何解析代碼的,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

瀏覽器是如何解析代碼的?

解析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è)資訊頻道!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI