資訊專欄INFORMATION COLUMN
摘要：全局變量局部變量全局函數(shù)一段也是一塊域。此時打印的自然是，要記住相當于，所以這時候改變的是局部變量，并沒有影響到全局變量，所以第二次打印的依然是。
在熟悉了瀏覽器的工作原理之后，今天我們來講講瀏覽器在從服務(wù)器獲取到網(wǎng)頁文件之后是如何解析的。了解了這個基礎(chǔ)知識，對敲出來的代碼，質(zhì)量會有不小的提升。
一、瀏覽器如何解析html
html文件在沒有寫入html標簽之前和txt文本是一個性質(zhì)的，不含任何樣式。只是單純的文本預(yù)覽文件。一旦加入了html標簽，表示內(nèi)容有了語義！瀏覽器的渲染引擎才會根據(jù)標簽的語義開始解析。
我們現(xiàn)在所看到的html原本分為html和xhtml兩個版本，它們的區(qū)別是xhtml比html更為嚴格，規(guī)范性更強。由于html比xhtml更加“寬松”，使網(wǎng)頁作者的生活變得輕松。所以這使得html很流行。
渲染引擎的基本工作流程
解析ＨＴＭＬ構(gòu)建ＤＯＭ樹
渲染樹構(gòu)建
渲染樹布局
繪制渲染樹
渲染引擎會解析ＨＴＭＬ文檔并把標簽轉(zhuǎn)換成內(nèi)容樹中的ＤＯＭ節(jié)點。它會解析style元素和外部文件中的樣式數(shù)據(jù)。樣式數(shù)據(jù)和ＨＴＭＬ中的顯示控制將共同用來創(chuàng)建另一棵樹——渲染樹。渲染引擎會嘗試盡快的把內(nèi)容顯示出來。它不會等到所有ＨＴＭＬ都被解析完才創(chuàng)建并布局渲染樹。它會 在處理后續(xù)內(nèi)容的同時把處理過的局部內(nèi)容先展示出來。
不同瀏覽器使用的內(nèi)核也許不同，但是整個渲染流程大同小異。
開始解析
解析一個文檔意味著把它翻譯成有意義的結(jié)構(gòu)以供代碼使用。解析的結(jié)果通常是一個表征文檔的由節(jié)點組成的樹，稱為解析樹或句法樹。
解析器通常把工作分給兩個組件——分詞程序負責把輸入切分成合法符號序列，解析程序負責按照句法規(guī)則分析文檔結(jié)構(gòu)和構(gòu)建句法樹。詞法分析器知道如何過濾像空格，換行之類的無關(guān)字符。
解析器輸出的樹是由ＤＯＭ元素和屬性節(jié)點組成的。DOM的全稱為：Document Object Model。它是ＨＴＭＬ文檔的對象化描述，也是ＨＴＭＬ元素與外界（如Javascript）的接口。
ＤＯＭ與標簽幾乎有著一一對應(yīng)的關(guān)系，如下面的標簽
Hello World
會被轉(zhuǎn)換成如的ＤＯＭ樹：
我們都知道代碼是逐行執(zhí)行的，解析也是如此。這里涉及到一個解析算法，算法太復(fù)雜，簡單的理解為：解析由兩部分組成：分詞與構(gòu)建樹。它把輸入解析成符號序列。在HTML中符號就是開始標簽，結(jié)束標簽，屬性名稱和屬生值。分詞器識別這些符號并將其送入樹構(gòu)建者，然后繼續(xù)分析處理下一個符號，直到輸入結(jié)束。
瀏覽器的容錯機制
像這段代碼很明顯不符合規(guī)范，盡管如此，瀏覽器還是在解析的過程中修復(fù)了html作者的錯誤內(nèi)容并繼續(xù)工作。具體是怎么修復(fù)的，咱不做深入了解。要保證的是我們在敲代碼的時候一定要按照規(guī)范來，盡量少給瀏覽器添堵。
二、瀏覽器如何解析css
這里我主要講一下css解析選擇器的匹配規(guī)則，我們都知道css的選擇器都是全局的。這樣有好也有壞！好處是代碼重用率高、可以把css文件合并、拆分做的像硬件一樣。壞處是css寫法特別的靈活，也因為靈活，所以容易耦合在一起。
實際上CSS選擇器的讀取順序是從右向左。
#molly div.haha span{color:#f00}
如上面的代碼，瀏覽器會按照從右向左的順序去讀取選擇器。先找到span然后順著往上找到class為“haha”的div再找到id為“molly”的元素。成功匹配到則加入結(jié)果集，如果直到根元素html都沒有匹配，則不再遍歷這條路徑，從下一個span開始重復(fù)這個過程。整個過程會形成一條符合規(guī)則的索引樹，樹由上至下的節(jié)點是規(guī)則中從右向左的一個個選擇符匹配的節(jié)點。
如果從左向右的順序讀取，在執(zhí)行到左邊的分支后發(fā)現(xiàn)沒有相對應(yīng)標簽匹配，則會回溯到上一個節(jié)點再繼續(xù)遍歷，直到找到或者沒有相匹配的標簽才結(jié)束。如果有100個甚至1000個分支的時候會消耗很多性能。反之從右向左查找極大的縮小的查找范圍從而提高了性能。這就解釋了為什么id選擇器大于類選擇器，類選擇器大于元素選擇器。
三、瀏覽器如何解析js
在瀏覽器中有一個“js解析器”的工具，專門用來解析我們的js代碼。在這里我們只需要關(guān)注解析的其中兩個步驟就行了，其它的不做研究。
js預(yù)解析
逐行解析代碼
當瀏覽器遇到j(luò)s代碼時，立馬召喚“js解析器”出來工作。這個時候還不慌，得先做好準備工作。解析器會找到j(luò)s當中的所有變量、函數(shù)、參數(shù)等等一大堆。并且把變量賦值為未定義（undefeated），把函數(shù)取出來成為一個函數(shù)塊，然后存放到倉庫當中。這件事情做完了之后才開始逐行解析代碼（由上向下，由左向右），然后再去和倉庫進行匹配。
再看一下這段代碼
在js預(yù)解析的時候，在遇到變量和函數(shù)重名的時候，只會保留函數(shù)塊。在逐行解析代碼的時候表達式（+、-、*、/、%、++、–、 參數(shù) ……）會改變倉庫里對應(yīng)的值。
來！繼續(xù)深入…
我們來了解一個詞“作用域”，現(xiàn)在把這個詞拆分一下。
作用：讀、寫操作
域：空間、范圍、區(qū)域…
連起來就是能夠進行讀寫操作的一個區(qū)域。
“域”：函數(shù)、json、……都是作為一塊作用域。
全局變量、局部變量、全局函數(shù)
一段 也是一塊域。在域解析的時候，也是由上向下開始解析。這就解釋了為什么引用的外部公共js文件（比如：jquery）應(yīng)該放到自定義js上邊的原因。
再來看一下這段代碼
繼續(xù)跟蹤一下解析器的解析過程：首先函數(shù)fn()外部的a是一個全局變量，fn()里面的a是一個局部變量。fn()函數(shù)同時是一個作用域，只要是作用域，就得做預(yù)解析和逐行解析的步驟。所以第一個alert打印的是fn()作用域的倉庫指向的變量a，即為undefeated。第二個alert打印的是全局的變量a，即為1。
接下來繼續(xù)看代碼，基本雷同的代碼，我改變其中一小個地方。
看到這里當解析到fn()的時候，發(fā)現(xiàn)里面并沒有任何變量，所以也就不往倉庫里面存什么，此時的倉庫里面是空的，啥也沒有。但是這個時候解析并沒有結(jié)束，而是從函數(shù)里面向外開始找，找到全局的變量a。此時打印的正式全局變量a的值。
這里就涉及到一個作用域鏈的問題。整個解析過程像是一條鏈子一樣。由上向下，由里到外！局部能夠讀寫全局，全局無法讀寫局部。
來，繼續(xù)看代碼，基本雷同的代碼，我再次改變其中一小個地方。
千萬不能忘了，在預(yù)解析的時候瀏覽器除了要找變量和函數(shù)之外還需要找一些參數(shù)，并且賦值為未定義。所以這里的fn(a)相當于fn(var a)，這個時候的邏輯就和第一段實例代碼一樣了。
繼續(xù)搞事情，繼續(xù)看代碼，基本雷同的代碼，我再次改變其中一小個地方。
當代碼執(zhí)行到fn(a);的時候調(diào)用的fn()函數(shù)并且把全局變量a作為參數(shù)傳遞進去。此時打印的自然是1，要記住function fn(a)相當于function fn(var a)，所以這時候a=2；改變的是局部變量a，并沒有影響到全局變量a，所以第二次打印的依然是1。
對于瀏覽器如何解析html、css、js就先介紹到這兒了，如有不對的地方，歡迎指正。
我是貓哆哩，一個不成熟的程序員！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/113851.html
摘要：全局變量局部變量全局函數(shù)一段也是一塊域。此時打印的自然是，要記住相當于，所以這時候改變的是局部變量，并沒有影響到全局變量，所以第二次打印的依然是。 在熟悉了瀏覽器的工作原理之后，今天我們來講講瀏覽器在從服務(wù)器獲取到網(wǎng)頁文件之后是如何解析的。了解了這個基礎(chǔ)知識，對敲出來的代碼，質(zhì)量會有不小的提升。 一、瀏覽器如何解析html html文件在沒有寫入html標簽之前和txt文本是一個性質(zhì)的...
摘要：全局變量局部變量全局函數(shù)一段也是一塊域。此時打印的自然是，要記住相當于，所以這時候改變的是局部變量，并沒有影響到全局變量，所以第二次打印的依然是。 在熟悉了瀏覽器的工作原理之后，今天我們來講講瀏覽器在從服務(wù)器獲取到網(wǎng)頁文件之后是如何解析的。了解了這個基礎(chǔ)知識，對敲出來的代碼，質(zhì)量會有不小的提升。 一、瀏覽器如何解析html html文件在沒有寫入html標簽之前和txt文本是一個性質(zhì)的...
摘要：前言我的項目沒問題，是用戶的網(wǎng)絡(luò)環(huán)境不夠好前端作為一個最貼近用戶的技術(shù)工種，毫無疑問應(yīng)該把戶體驗放在第一位而用戶體驗，基本正比于頁面的打開速度，特別是做移動端的同學(xué)，所以如何優(yōu)化自己的項目，提高頁面的加載速度成為重中之重資源的下載及解析對前 前言 我的項目沒問題，是用戶的網(wǎng)絡(luò)環(huán)境不夠好 前端作為一個最貼近用戶的技術(shù)工種，毫無疑問應(yīng)該把戶體驗放在第一位. 而用戶體驗，基本正比于頁面的打開...
摘要：是用來做瀏覽器兼容的，這個必須要配置，否則在打包的時候就會報錯，在這個中我們引用了之前安裝的，這個是用來自動匹配瀏覽器來補全前綴的，然后我們設(shè)置為最近五個瀏覽器版本。 上一篇文章講述了如何安裝和配置webpack的基礎(chǔ)依賴，可以看鏈接描述 這篇文章我們來看看如何配置webpack最重要的配置文件webpack.config.js 首先我們先在根目錄下新建一個webpack.config...
閱讀 1932·2021-09-22 15:23
閱讀 3415·2021-09-04 16:45
閱讀 2198·2021-07-29 14:49
閱讀 2831·2019-08-30 15:44
閱讀 1622·2019-08-29 16:36
閱讀 1152·2019-08-29 11:03
閱讀 1597·2019-08-26 13:53
閱讀 570·2019-08-26 11:57
