SS是如何運行的?他到底是怎么工作的,如何從CSS應用到DOM,今天和大家分享下!
知識分類 | 基礎計算機知識、基礎軟件安裝、簡單文件知識、HTML基礎知識 |
目 標 | 理解瀏覽器如何加載CSS和HTML、瀏覽器遇到無法解析的CSS會發生什么 |
原 因 | 在一些面試場合,也會因為CSS原理會問到 |
當設備一個文件的時候,必須符合文件的內容文件的樣式信息,下面我們會處理它的標準文件的樣式信息,是,下面的步驟是加載網頁的需要瀏覽的版本,展示它的版本。瀏覽器并且在處理文件的時候會有不同的方式,但是下面的步驟基本都會出現。
結合下面的圖示更形象:
一個DOM有一個樹形文字結構,標注語言中的每個元素、屬性以及每一段都著結構樹中的節點(Node/DOM或DOM node)。節點由一個節點本身和其他DOM節點的關系定義,有些有父節點,有些節點有兄弟節點(同級)。
對于DOM的理解操作會幫助你設計、調試和維護你的CSS,因為DOM是你的CSS樣式和文件內容的部分。當你瀏覽器F12調試的時候你需要DOM以查看使用了哪些規則。
很長且枯燥的案例,這里我們通過一個HTML片段來了解HTML如何轉換成DOM
下面列HTML代碼:當前
在這個 DOM 中,<p>元素的節點是父節點,它的子節點是一個文本節點和三個節點節點<span>的節點節點,SPAN同時也是他們的文本節點的父節點。
上圖就是瀏覽器怎么解析之前的那個HTML片段——它生成上圖的DOM樹形結構,然后按照輸出到瀏覽器:
讓我們看看添加一些CSS到文件里渲染,同樣的HTML代碼:
下面為CSS代碼:
瀏覽器會解析HTML并創建一個DOM,然后解析CSS。可以看到唯一的選擇器就是span元素選擇器,瀏覽器處理規則會非常快!把同樣的規則用在三個<span>標簽上,然后直接渲染出圖像到屏幕上。
現在的顯示如下:
在的文章中提到了并不會實現所有的瀏覽器,很多人也不會實現最新的瀏覽器的文章,因此我們可以同時使用 CSS 持續不斷地開發之前的領先瀏覽器,你可能會宣布奇怪的選擇器遇到無法解析的 CSS 器或何時會發生瀏覽?
答案就是瀏覽器什么也不會做,繼續解析下一個CSS樣式!
如果這些瀏覽器在解析你所寫的 CSS 規則制定的過程中遇到了無法理解的屬性或值,它會顯示并繼續解析 CSS 聲明。或者當瀏覽器遇到它很新的時候還沒有支持的 CSS 代碼的時候上面的情況同樣會發生(觸發)。
類似的,當遇到無法解析選擇器的時間時,他會直接啟動整個選擇器規則,解析下一個 CSS 選擇器。
下面的案例中,我使用會導致錯誤的英式拼寫來寫“顏色”,所以我的屬性的段落沒有被渲染成藍色,而執行其他的CSS代碼會正常,只有錯誤的部分會被觸發。
瀏覽器瀏覽中多,代表著你使用最新的 CSS 優化過程中的一個無法解析的規則也不會報錯。當你瀏覽多個 CSS 樣式的時候,會加載樣式表中指定的元素最后的 CSS 代碼進行渲染多個樣式表,上級請同一個指定的樣式表,正因為這樣,你來解決一些瀏覽器等瀏覽器也不能為新特性的問題(比如指定兩個 CSS 樣式)個width)。
這個特點在你想的一個很新的 CSS 特性,但不是所有的瀏覽器都支持使用的時候(瀏覽器)非常有用,更有意義,一些老的瀏覽器不接受calc()(計算一下,CSS3 新增,作為元素動態寬度、長度等,注意指定這里的動態是計算的一個值)。就這樣;新式的瀏覽器指定并把一個行解析成圖片,覆蓋第一行的豐富內容。
后面的課程我們會討論更多關于瀏覽器的連接問題。
恭喜你完成本模塊,下面的文章你用你的新知識來完成覆蓋樣式的案例,在這個過程中測試一些 CSS 樣式。
理解JavaScript運行原理,我們需要理解以下兩方面內容。
JavaScript引擎是一個計算機程序,它的主要作用是JavaScript運行時將源碼編譯為機器碼。
每個主流Web瀏覽器都有自己的JavaScript引擎,它通常由web瀏覽器供應商開發。
主流web瀏覽器
以前的JavaScript引擎主要在web瀏覽器使用,不過隨著nodejs的出現就打破了這種局限。
V8包含了解析器(parser),解釋器(Ignition),優化編譯器(TurboFan )。
解析器(parser):用于生成抽象語法樹。
JavaScript代碼的句法結構的樹形表示形式
解釋器(Ignition):將源碼轉換為字節碼。
解釋器
優化編譯器(TurboFan ):進行一些優化編譯優化處理,比如內聯緩存。
下面是V8引擎的大體工作流程。
源碼轉化為機器碼流程
瀏覽器運行環境中,瀏覽器提供了Web API,如:HTTP請求,計時器,事件等。
服務器運行環境中,nodejs提供了API。
下面是JavaScript在瀏覽器中運行時的架構,它包含一個內存堆、一個內存棧、一個事件循環、一個回調隊列。
JavaScript運行時架構
下面代碼展示了JavaScript執行的調用棧變化。
JavaScript調用棧
function add(x, y) {
return x + y;
}
function print(x, y) {
console.log('x+y=',add(x, y))
}
print(1, 3)
JavaScript先執行了print函數,然后調用Web API setTimeout(),Web API存儲了setTimeout() 的回調函數,3秒后將回調函數添加到回調隊列,事件循環發現調用棧為空,于是將隊列里的回調函數移至調用棧執行。
異步任務
function add(x, y) {
return x + y;
}
function print(x, y) {
setTimeout(function (){
console.log('x+y=',add(x, y))
}, 3000)
}
print(1, 3)
JavaScript運行主要依靠JavaScript引擎和運行環境,引擎將js源碼翻譯成計算機所理解的機器碼,運行環境提供了一些與計算機底層通訊的API和運行實現。
者:Lydia Hallie
譯者:前端小智
來源:dev
JavaScript 很酷,但是 JS 引擎是如何才能理解我們編寫的代碼呢?作為 JS 開發人員,我們通常不需要自己處理編譯器。然而,了解 JS 引擎的基礎知識并了解它如何處理JS代碼,并將其轉換成機器能夠理解的東西,絕對是個有益無害的事情。
注意:本文主要基于 Node.js 和基于 Chrome 的瀏覽器使用的 V8 引擎。
HTML解析器遇到帶有源代碼的script標簽。來自此源的代碼從網絡,緩存或已安裝的服務工作程序中加載。響應是將請求的腳本作為字節流,由字節流解碼器負責。字節流解碼器在下載字節流時對其進行解碼。
字節流解碼器從已解碼的字節流中創建令牌。例如,0066解碼為f, 0075到u,006e到n, 0063到c, 0074到t, 0069到i, 006f到o, 006e到n,后面跟一個空格。就像JS中的function,這是 JS 中的一個保留關鍵字,它會創建一個標記,并將其發送給解析器。對于字節流的其余部分也是如此。
該引擎使用兩個解析器:預解析器(pre-parser)和解析器(parser)。預解析器只提前檢查標記,以查看是否有語法錯誤。這可以減少發現代碼中的錯誤所需的時間,否則解析器稍后就會發現這些錯誤。
如果沒有錯誤,解析器將根據從字節流解碼器接收到的標記創建節點。使用這些節點,它創建了一個抽象語法樹,即AST。
接下來,輪到解釋器(interpreter)了。遍歷AST并根據AST包含的信息生成字節碼的解釋器。一旦字節碼完全生成,AST就會被刪除,從而清除內存空間。最后,生成的機器碼就可以在電腦上運行了。
雖然字節碼很快,但它可以更快。當這個字節碼運行時,將生成信息。它可以檢測某些行為是否經常發生,以及所使用數據的類型。也許已經調用一個函數幾十次了:現在是時候優化它了,這樣它會運行得更快!
字節碼與生成的類型反饋一起發送到優化編譯器(ptimizing compiler)。優化的編譯器接收字節碼和類型反饋,并根據這些信息生成高度優化的機器碼。
JS 是一種動態類型語言,這意味著數據類型可以不斷變化。如果 JS引擎每次都要檢查某個值的數據類型,那么速度會非常慢。
相反,JS 引擎使用一種稱為內聯緩存(inline caching)的技術。它將代碼緩存在內存中,希望將來它會以相同的行為返回相同的值.假設某個函數被調用100次,并且到目前為止總是返回相同的值。它將假設在第101次調用它時也會返回這個值。
假設我們有以下函數sum,(到目前為止)每次都使用數值作為參數來調用它:
ffunction sum(a, b){
return a + b
}
sum(1, 2
執行結果為 3。下次調用它時,它將假定我們再次使用兩個相同數字對其進行調用。
如果假投,那么就不需要動態查找,只需要使用存儲在特定內存槽中的結果,該槽已經有一個引用。否則,如果假設不正確,它將反優化代碼并恢復到原始字節碼,而不是優化后的機器碼。
例如,下一次調用它時,我們傳遞的是字符串而不是數字。因為 JS 是動態類型的,所以這樣做不會有任何錯誤。
function sum(a, b){
return a + b
}
sum('1', 2)
這意味著數字2將被強制轉換成字符串,而函數將返回字符串'12'。它返回執行解釋的字節碼并更新類型反饋。
我希望這篇文章對你有用!當然,在這篇文章中還沒有涉及到引擎的更多部分(JS堆,調用堆棧,等等),后續會繼續分享。如果你對 JS 的內部機制感興趣,強烈建議自己可以做一些研究,V8 是開源的,并且有一些很棒的文檔說明它是如何工作的。
https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf
*請認真填寫需求信息,我們會在24小時內與您取得聯系。