整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
覽器（也稱為網(wǎng)絡(luò)瀏覽器或互聯(lián)網(wǎng)瀏覽器）是安裝在我們設(shè)備上的軟件應(yīng)用程序，使我們能夠訪問萬維網(wǎng)。在閱讀這篇文字時，你實際上正在使用一個瀏覽器。
有許多瀏覽器正在被使用，截至2022年，使用最多的是：谷歌瀏覽器、蘋果的Safari、微軟的Edge和火狐。
但是，它們實際上是如何工作的，從我們在地址欄中鍵入網(wǎng)絡(luò)地址開始，到我們試圖訪問的頁面顯示在屏幕上，會發(fā)生什么？
關(guān)于這個問題的答案，一個極其簡化的版本是：
當(dāng)我們從一個特定的網(wǎng)站請求一個網(wǎng)頁時，瀏覽器從網(wǎng)絡(luò)服務(wù)器檢索必要的內(nèi)容，然后在我們的設(shè)備上顯示該網(wǎng)頁。
很直接，對嗎？是的，但在這個看似超級簡單的過程中還涉及更多的內(nèi)容。在這個系列中，我們將討論導(dǎo)航、獲取數(shù)據(jù)、解析和渲染等步驟，并希望能使你對這些概念更清晰。
導(dǎo)航是加載網(wǎng)頁的第一步。它指的是當(dāng)用戶通過點擊一個鏈接、在瀏覽器地址欄中寫下一個網(wǎng)址、提交一個表格等方式請求一個網(wǎng)頁時發(fā)生的過程。
導(dǎo)航到一個網(wǎng)頁的第一步是找到該網(wǎng)頁的靜態(tài)資源位置（HTML、CSS、Javascript和其他類型的文件）。如果我們導(dǎo)航到 https://example.com ，HTML 頁面位于 IP 地址為 93.184.216.34 的服務(wù)器上（對我們來說，網(wǎng)站是域名，但對計算機來說，它們是 IP 地址）。如果我們以前從未訪問過這個網(wǎng)站，就必須進行域名系統(tǒng)（DNS）查詢。
DNS 服務(wù)器是包含公共 IP 地址及其相關(guān)主機名數(shù)據(jù)庫的計算機服務(wù)器（這通常被比作電話簿，因為人們的名字與一個特定的電話號碼相關(guān)聯(lián)）。在大多數(shù)情況下，這些服務(wù)器按照要求將這些名字解析或翻譯成 IP 地址（現(xiàn)在有 600 多個不同的 DNS 根服務(wù)器分布在世界各地）。
因此，當(dāng)我們請求進行 DNS 查詢時，我們實際做的是與這些服務(wù)器中的一個進行對話，要求找出與https://example.com 名稱相對應(yīng)的IP地址。如果找到了一個對應(yīng)的 IP，就會返回。如果發(fā)生了一些情況，查找不成功，我們會在瀏覽器中看到一些錯誤信息。
在這個最初的查詢之后，IP 地址可能會被緩存一段時間，所以下次訪問同一個網(wǎng)站會更快，因為不需要進行 DNS 查詢（記住，DNS 查詢只發(fā)生在我們第一次訪問一個網(wǎng)站時）。
一旦瀏覽器知道了網(wǎng)站的 IP 地址，它將嘗試通過 TCP 三次握手（也稱為 SYN-SYN-ACK，或者更準(zhǔn)確的說是 SYN、SYN-ACK、ACK，因為 TCP 有三個消息傳輸，用于協(xié)商和啟動兩臺計算機之間的TCP 會話），與持有資源的服務(wù)器建立連接。
TCP 是傳輸控制協(xié)議的縮寫，是一種通信標(biāo)準(zhǔn)，使應(yīng)用程序和計算設(shè)備能夠在網(wǎng)絡(luò)上交換信息。它被設(shè)計用來在互聯(lián)網(wǎng)上發(fā)送數(shù)據(jù)包，并確保數(shù)據(jù)和信息在網(wǎng)絡(luò)上成功傳遞。
TCP 握手是一種機制，旨在讓兩個想要相互傳遞信息的實體（在我們的例子中是瀏覽器和服務(wù)器）在傳輸數(shù)據(jù)之前協(xié)商好連接的參數(shù)。
>
因此，如果瀏覽器和服務(wù)器是兩個人，他們之間的對話會是這樣的：
瀏覽器向服務(wù)器發(fā)送一個 SYNC 消息，要求進行同步（同步意味著連接）
然后，服務(wù)器將回復(fù)一個 SYNC-ACK 消息（ SYNChronization 和 ACKnowledgement）
在最后一步，瀏覽器將回復(fù)一個 ACK 信息
現(xiàn)在，TCP連接（雙向連接）已經(jīng)通過3次握手建立，TLS協(xié)商可以開始。
對于通過 HTTPS 建立的安全連接，需要進行另一次握手。這種握手（TLS協(xié)商）決定了哪個密碼將被用于加密通信，驗證服務(wù)器，并在開始實際的數(shù)據(jù)傳輸之前建立一個安全的連接。
傳輸層安全（TLS）是現(xiàn)已廢棄的安全套接字層（SSL）的繼任者，是一種加密協(xié)議，旨在通過計算機網(wǎng)絡(luò)提供通信安全。該協(xié)議被廣泛用于電子郵件和即時通訊等應(yīng)用，但它在確保 HTTPS安全方面的應(yīng)用仍然是最公開的。由于應(yīng)用程序可以使用或不使用 TLS（或SSL）進行通信，因此客戶（瀏覽器）有必要要求服務(wù)器建立 TLS 連接。
在這一步驟中，瀏覽器和服務(wù)器之間還交換了一些信息
現(xiàn)在可以開始從服務(wù)器請求和接收數(shù)據(jù)了
在上一節(jié)中，我們談到了導(dǎo)航，這是瀏覽器顯示網(wǎng)站的第一步。現(xiàn)在，我們將進入下一個步驟，看看如何獲取資源。
在我們與服務(wù)器建立安全連接后，瀏覽器將發(fā)送一個初始的 HTTP GET 請求。首先，瀏覽器將請求頁面的 HTML 文件。它將使用 HTTP 協(xié)議來做這件事。
HTTP（超文本傳輸協(xié)議）是一個獲取資源的協(xié)議，如HTML文件。它是網(wǎng)絡(luò)上任何數(shù)據(jù)交換的基礎(chǔ)，它是一個客戶-服務(wù)器協(xié)議，這意味著請求是由接收者發(fā)起的，通常是網(wǎng)絡(luò)瀏覽器。
請求方法 - POST, GET, PUT, PATCH, DELETE 等
URI - 是統(tǒng)一資源識別符的縮寫。URIs 用于識別互聯(lián)網(wǎng)上的抽象或物理資源，如網(wǎng)站或電子郵件地址等資源。一個 URI 最多可以有 5 個部分
scheme：用于說明使用的是什么協(xié)議
authority：用于識別域名
path：用于顯示資源的確切路徑
query：用于表示一個請求動作
fragment：用來指代資源的一部分
// URI parts
scheme :// authority path ? query # fragment
//URI example
<https://example.com/users/user?name=Alice#address>
https: // scheme name
example.com // authority
users/user // path
name=Alice // query
address // fragment
HTTP 頭字段 - 是瀏覽器和服務(wù)器在每個 HTTP 請求和響應(yīng)中發(fā)送和接收的字符串列表（它們通常對終端用戶是不可見的）。在請求的情況下，它們包含關(guān)于要獲取的資源或請求資源的瀏覽器的更多信息。
如果你想看看這些請求頭字段是什么樣子的，請進入 Chrome 瀏覽器并打開開發(fā)者工具（F12）。進入 Network 標(biāo)簽，選擇 FETCH/XHR。在下面的屏幕截圖中，我剛剛在搜索引擎上搜索了Palm Springs，這就是請求頭的樣子。
一旦服務(wù)器收到請求，它將對其進行處理并回復(fù)一個 HTTP 響應(yīng)。在響應(yīng)的正文中，我們可以找到所有相關(guān)的響應(yīng)頭和我們請求的HTML文檔的內(nèi)容
狀態(tài)代碼 - 例如：200、400、401、504網(wǎng)關(guān)超時等（我們的目標(biāo)是 200 狀態(tài)代碼，因為它告訴我們一切正常，請求是成功的）
響應(yīng)頭字段 - 保存關(guān)于響應(yīng)的額外信息，如它的位置或提供它的服務(wù)器。
一個 HTML 文檔的例子可以是這樣的
<!doctype HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的頁面</title>
<link rel="stylesheet" src="styles.css"/>
<script src="mainScripts.js"></script>
</head>
<body>
<h1 class="heading">這個是我的頁面</h1>
<p>一個段落和一個 <a href="<https://example.com/about>">鏈接</a></p>
<div>
<img src="myImage.jpg" alt="image description"/>
</div>
<script src="sideEffectsScripts.js"></script>
</body>
</html>
對于我前面提到的同一個搜索，響應(yīng)頭是這樣的
如果我們看一下HTML文檔，我們會發(fā)現(xiàn)它引用了不同的 CSS 和 Javascript 文件。這些文件不會被請求。在這個時候，只有 HTML 被請求并從服務(wù)器接收。
這個初始請求的響應(yīng)包含收到的第一個字節(jié)的數(shù)據(jù)。第一個字節(jié)的時間（TTFB）是指從用戶提出請求（在地址欄中輸入網(wǎng)站名稱）到收到第一個 HTML 數(shù)據(jù)包（通常為14kb）的時間。
TCP 慢啟動 是一種平衡網(wǎng)絡(luò)連接速度的算法。 第一個數(shù)據(jù)包將是 14kb（或更小），其工作方式是逐漸增加傳輸?shù)臄?shù)據(jù)量，直到達到預(yù)定的閾值。 從服務(wù)器接收到每個數(shù)據(jù)包后，客戶端以 ACK 消息響應(yīng)。 由于連接容量有限，如果服務(wù)器發(fā)送太多數(shù)據(jù)包太快，它們將被丟棄。 客戶端不會發(fā)送任何 ACK 消息，因此服務(wù)器會將此解釋為擁塞。 這就是擁塞算法發(fā)揮作用的地方。 他們監(jiān)控發(fā)送的數(shù)據(jù)包和 ACK 消息的流，以確定流量的最佳速率并創(chuàng)建穩(wěn)定的流量流。
到目前為止，我們討論了導(dǎo)航和數(shù)據(jù)獲取。 今天我們將討論解析，特別是 HTML 解析。
我們看到在向服務(wù)器發(fā)出初始請求后，瀏覽器如何收到包含我們嘗試訪問的網(wǎng)頁的 HTML 資源（第一塊數(shù)據(jù)）的響應(yīng)。 現(xiàn)在瀏覽器的工作就是開始解析數(shù)據(jù)。
解析是指將程序分析并轉(zhuǎn)換為運行時環(huán)境實際可以運行的內(nèi)部格式
換句話說，解析意味著將我們編寫的代碼作為文本（HTML、CSS）并將其轉(zhuǎn)換為瀏覽器可以使用的內(nèi)容。 解析將由瀏覽器引擎完成（不要與瀏覽器的 Javascript 引擎混淆）。
瀏覽器引擎是每個主要瀏覽器的核心組件，它的主要作用是結(jié)合結(jié)構(gòu) (HTML) 和樣式 (CSS)，以便它可以在我們的屏幕上繪制網(wǎng)頁。 它還負責(zé)找出哪些代碼片段是交互式的。 我們不應(yīng)將其視為一個單獨的軟件，而應(yīng)將其視為更大軟件（在我們的例子中為瀏覽器）的一部分。
有許多瀏覽器引擎，但大多數(shù)瀏覽器使用這三個活躍且完整引擎之一：
Gecko 它是由 Mozilla 為 Firefox 開發(fā)的。 過去，它曾為其他幾種瀏覽器提供支持，但目前，除了 Firefox，Tor 和 Waterfox 是唯一仍在使用 Gecko 的瀏覽器。 它是用 C++ 和 JavaScript 編寫的，自 2016 年起，還用 Rust 編寫。
WebKit 它主要由 Apple 為 Safari 開發(fā)。 它還為 GNOME Web (Epiphany) 和 Otter 提供支持。 （令人驚訝的是，在 iOS 上，包括 Firefox 和 Chrome 在內(nèi)的所有瀏覽器也由 WebKit 提供支持）。 它是用 C++ 編寫的。
Blink，Chromium 的一部分 它最初是 WebKit 的一個分支，主要由 Google 為 Chrome 開發(fā)。 它還為 Edge、Brave、Silk、Vivaldi、Opera 和大多數(shù)其他瀏覽器項目（一些通過 QtWebEngine）提供支持。 它是用 C++ 編寫的。
現(xiàn)在我們了解了誰將進行解析，讓我們看看在從服務(wù)器接收到第一個 HTML 文檔后到底發(fā)生了什么。 讓我們假設(shè)文檔如下所示：
<!doctype HTML>
<html>
<head>
<title>This is my page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>This is my page</h1>
<h3>This is a H3 header.</h3>
<p>This is a paragraph.</p>
<p>This is another paragraph,</p>
</body>
</html>
即使請求頁面的 HTML 大于初始的 14KB 數(shù)據(jù)包，瀏覽器也會開始解析并嘗試根據(jù)其擁有的數(shù)據(jù)呈現(xiàn)體驗。 HTML 解析涉及兩個步驟：詞法分析 和 樹構(gòu)造（構(gòu)建稱為 DOM 樹的東西）。
它將一些輸入轉(zhuǎn)換為標(biāo)簽（源代碼的基本組件）。 想象一下，我們將一段英文文本分解成單詞，其中單詞就是標(biāo)簽。
詞法分析過程結(jié)束時的結(jié)果是一系列 0 個或多個以下標(biāo)簽：DOCTYPE、開始標(biāo)簽 (<tag>)、結(jié)束標(biāo)簽(</tag>)、自閉合標(biāo)簽 (<tag/>) 、屬性名稱、值、注釋、字符、文件結(jié)尾或元素中的純文本內(nèi)容。
創(chuàng)建第一個 token 后，樹構(gòu)建開始。 這實質(zhì)上是基于先前解析的標(biāo)簽創(chuàng)建樹狀結(jié)構(gòu)（稱為文檔對象模型）。
DOM 樹描述了 HTML 文檔的內(nèi)容。 <html> 元素是文檔樹的第一個標(biāo)簽和根節(jié)點。 樹反映了不同標(biāo)簽之間的關(guān)系和層次結(jié)構(gòu)。 我們有父節(jié)點，嵌套在其他標(biāo)簽中的標(biāo)簽是子節(jié)點。 節(jié)點數(shù)越多，構(gòu)建 DOM 樹所需的時間就越長。 下面是我們從服務(wù)器獲得的 HTML 文檔示例的 DOM 樹：
實際上，DOM 比我們在該模式中看到的更復(fù)雜，但我保持簡單以便更好地理解（另外，我們將在以后的文章中更詳細地討論 DOM 及其重要性）。
此構(gòu)建階段是可重入的，這意味著在處理一個 token 時，分詞器可能會恢復(fù)，導(dǎo)致在第一個 token 處理完成之前觸發(fā)并處理更多 token。 從字節(jié)到創(chuàng)建 DOM，整個過程如下所示：
解析器從上到下逐行工作。 當(dāng)解析器遇到非阻塞資源（例如圖像）時，瀏覽器會向服務(wù)器請求這些圖像并繼續(xù)解析。 另一方面，如果它遇到阻塞資源（CSS 樣式表、在 HTML 的 部分添加的 Javascrpt 文件或從 CDN 添加的字體），解析器將停止執(zhí)行，直到所有這些阻塞資源都被下載。 這就是為什么，如果你正在使用 Javascript，建議在 HTML 文件的末尾添加<script> 標(biāo)簽，或者如果你想將它們保留在 <head> 標(biāo)簽中，你應(yīng)該向它們添加 defer 或 async 屬性（ async 允許在下載腳本后立即執(zhí)行異步操作，而 defer 只允許在整個文檔被解析后執(zhí)行。）。
Internet Explorer、WebKit 和 Mozilla 都在 2008 年實現(xiàn)了預(yù)加載器，作為處理阻塞資源的一種方式，尤其是腳本（我們之前說過，當(dāng)遇到腳本標(biāo)簽時，HTML 解析將停止，直到腳本被下載并執(zhí)行）。
使用預(yù)加載器，當(dāng)瀏覽器卡在腳本上時，第二個較輕的解析器會掃描 HTML 以查找需要檢索的資源（樣式表、腳本等）。 然后預(yù)加載器開始在后臺檢索這些資源，目的是在主 HTML 解析器到達它們時它們可能已經(jīng)被下載（如果這些資源已經(jīng)被緩存，則跳過此步驟）。
解析完 HTML 之后，就該解析 CSS（在外部 CSS 文件和樣式元素中找到）并構(gòu)建 CSSOM 樹（CSS 對象模型）。
當(dāng)瀏覽器遇到 CSS 樣式表時，無論是外部樣式表還是嵌入式樣式表，它都需要將文本解析為可用于設(shè)置布局樣式的內(nèi)容。 瀏覽器將 CSS 變成的數(shù)據(jù)結(jié)構(gòu)稱為 CSSOM。 DOM 和 CSSOM 遵循相似的概念，因為它們都是樹，但它們是不同的數(shù)據(jù)結(jié)構(gòu)。 就像從我們的 HTML 構(gòu)建 DOM 一樣，從 CSS 構(gòu)建 CSSOM 被認(rèn)為是一個「渲染阻塞 」過程。
與 HTML 解析類似，CSS 解析從詞法分析開始。 CSS 解析器獲取字節(jié)并將它們轉(zhuǎn)換為字符，然后是標(biāo)簽，然后是節(jié)點，最后它們被鏈接到 CSSOM 中。 瀏覽器會執(zhí)行一些稱為選擇器匹配的操作，這意味著每組樣式都將與頁面上的所有節(jié)點（元素）匹配。
瀏覽器從適用于節(jié)點的最通用規(guī)則開始（例如：如果節(jié)點是 body 元素的子節(jié)點，則所有 body 樣式都由該節(jié)點繼承），然后通過應(yīng)用更具體的規(guī)則遞歸地優(yōu)化計算出的樣式。 這就是為什么我們說樣式規(guī)則是級聯(lián)的。
假設(shè)我們有下面的 HTML 和 CSS：
body {
font-size: 16px;
color: white;
}
h1 {
font-size: 32px;
}
section {
color: tomato;
}
section .mainTitle {
margin-left: 5px
}
div {
font-size: 20px;
}
div p {
font-size: 8px;
color: yellow;
}
這段代碼的 CSSOM 看起來像這樣：
請注意，在上面的模式中，嵌套元素既有繼承的樣式（來自父級 - 例如：h1 從 body 繼承其顏色，section 從 body 繼承其字體大小）和它們自己的樣式（可以覆蓋繼承的規(guī)則 是否來自父節(jié)點 - 例如：p 覆蓋了從 div 繼承的顏色和字體大小，而 mainTitle 沒有從父節(jié)點獲得其左邊距）。
由于我們的 CSS 可以有多個來源，并且它們可以包含適用于同一節(jié)點的規(guī)則，因此瀏覽器必須決定最終應(yīng)用哪個規(guī)則。 這就是優(yōu)先級發(fā)揮作用的時候，如果您想了解更多相關(guān)信息，可以訪問此頁面。
想象一下，您在機場尋找您的朋友 John。 如果你想通過喊他的名字找到他，你可以喊 “ John ”。 可能不止一個 John 會同時出現(xiàn)在機場，所以他們可能都會做出回應(yīng)。 更好的方法是用他的全名打電話給你的朋友，這樣當(dāng)你喊“John Doe”時，你就有更好的機會找到他，因為“ John Doe ”比“ John ”更具體。
同樣，假設(shè)我們有這個元素：
<p>
<a href="<https://dev.to/>">This is just a link!</a>
</p>
以及這些 CSS 樣式：
a {
color: red;
}
p a {
color: blue;
}
您認(rèn)為瀏覽器會應(yīng)用哪條規(guī)則？ 答案是第二條規(guī)則，因為 p 標(biāo)簽中的所有 a 標(biāo)簽選擇器比所有a 標(biāo)簽選擇器都具有更高的優(yōu)先級。 如果你想玩玩優(yōu)先級，你可以使用這個 優(yōu)先級計算器。
CSS 規(guī)則是從右到左閱讀的，這意味著如果我們有這樣的代碼： section p { color: blue; }, 瀏覽器將首先查找頁面上的所有 p 標(biāo)簽，然后它會查看這些 p 標(biāo)簽中是否有一個 section 標(biāo)簽作為父標(biāo)簽。 如果查找能夠命中，它將應(yīng)用這個 CSS 規(guī)則
在解析 CSS 并創(chuàng)建 CSSOM 的同時，還會下載其他資產(chǎn)，包括 JavaScript 文件。 這要歸功于我們在之前文章中提到的預(yù)加載器。
預(yù)加載器就像一個解析器，它在主解析器處理 HTML 代碼時掃描 HTML 文件。 它的作用是查找樣式表、腳本或圖片（也需要從服務(wù)器檢索）等資源并請求它們。 希望在解析 HTML 時，這些資源已經(jīng)下載并準(zhǔn)備好進行處理。
所以，當(dāng)我們從服務(wù)器獲取 Javascript 文件后，代碼被解釋、編譯、解析和執(zhí)行。 計算機無法理解 Javascript 代碼，只有瀏覽器可以。 JS 代碼需要被翻譯成計算機可以使用的東西，這是 Javascript 瀏覽器引擎的工作（不要與瀏覽器引擎混淆）。 根據(jù)瀏覽器的不同，JS 引擎可以有不同的名稱和不同的工作方式。
javascript 引擎（有時也稱為 ECMAScript 引擎）是一種在瀏覽器中執(zhí)行（運行）Javascript 代碼的軟件，而不僅僅是零部件（例如，V8 引擎是 Node.js 環(huán)境的核心組件）。
JavaScript 引擎通常由 Web 瀏覽器供應(yīng)商開發(fā)，每個主要瀏覽器都有一個。 我們說過，目前使用最多的瀏覽器是 Chrome、Safari、Edge 和 Firefox。 每個都使用不同的 Javascript 引擎，它們是：
V8 V8 是 Google 的高性能 JavaScript 引擎。 它是用 C++ 編寫的，用于 Chrome 和 Node.js 等。 它實現(xiàn)了 ECMAScript（一種 JavaScript 標(biāo)準(zhǔn)，旨在確保網(wǎng)頁在不同 Web 瀏覽器之間的互操作性）和 WebAssembley。 它實現(xiàn)了 ECMA-262。
JavaScriptCore JavaScriptCore 是 WebKit 的內(nèi)置 JavaScript 引擎，它為 Safari 瀏覽器、郵件和 macOS 上使用的其他應(yīng)用程序提供支持。 它目前按照 ECMA-262 規(guī)范實現(xiàn) ECMAScript。 它也被稱為 SquirrelFish 或 SquirrelFish Extreme。
Chakra Chakra 是微軟為其 Microsoft Edge 網(wǎng)絡(luò)瀏覽器和其他 Windows 應(yīng)用程序開發(fā)的 Javascript 引擎。 它實現(xiàn)了 ECMAScript 5.1，并且對 ECMAScript 6 有部分（不斷增加的）支持。它是用 C++ 編寫的。
SpiderMonkey SpiderMonkey 是 Mozilla 的 Javascript 和 WebAssembly 引擎。 它是用 C++、Javascript 和 Rust 編寫的，用于為 Firefox、Servo 和其他項目提供支持。
一開始，Javascript 引擎只是簡單的解釋器。 我們今天使用的現(xiàn)代瀏覽器能夠執(zhí)行稱為即時 (JIT) 編譯的功能，這是編譯和解釋的混合體。
編譯
在編譯過程中，一個稱為編譯器的軟件將用高級語言編寫的代碼一次性轉(zhuǎn)換為機器代碼。 創(chuàng)建一個目標(biāo)文件，該文件可以在任何機器上運行。 采取這些步驟后，就可以執(zhí)行代碼了。
解釋
在解釋過程中，解釋器逐行檢查 Javascript 代碼并立即執(zhí)行。 沒有進行編譯，因此沒有創(chuàng)建目標(biāo)代碼（代碼的輸出由解釋器本身使用其內(nèi)部機制創(chuàng)建）。 舊版本的 Javascript 使用這種類型的代碼執(zhí)行。
即時編譯( JIT Compilation )
即時編譯是給定語言的解釋器的一個特性，它試圖同時利用編譯和解釋。 是在純編譯期間，代碼是在執(zhí)行之前被編譯，然而在 JIT 編譯中，代碼在執(zhí)行時（在運行時）被編譯。 所以我們可以說源代碼是動態(tài)轉(zhuǎn)換為機器代碼的。 較新版本的 Javascript 使用這種類型的代碼執(zhí)行。
JIT 編譯的一個很重要的方面就是將源代碼編譯成當(dāng)前正在運行的機器的機器碼指令。 這意味著生成的機器代碼是針對正在運行的機器的 CPU 架構(gòu)進行了優(yōu)化。
簡而言之，這三個過程可以總結(jié)為：
今天，編譯和解釋這兩個術(shù)語之間的界限已經(jīng)變得非常模糊，因此這個主題可以進行廣泛的辯論。 如果你想了解更多關(guān)于這些過程的信息，你可以閱讀這篇關(guān)于 Mozilla Hacks for starters 的文章。
請注意，我提到了舊版本和新版本的 Javascript。 不支持較新版本語言的瀏覽器將解釋代碼，而支持的瀏覽器將使用某些版本的 JIT 來執(zhí)行代碼（V8、Chakra JavaScriptCore 和 SpiderMonkey 引擎都使用 JIT）。 事實上，盡管 Javascript 是一種解釋型語言（它不需要編譯），但如今大多數(shù)瀏覽器都會使用 JIT 編譯來運行代碼，而不是純粹的解釋型語言。
當(dāng) Javascript 代碼進入 Javascript 引擎時，它首先被解析。 這意味著代碼被讀取，并且在這種情況下，代碼被轉(zhuǎn)換為稱為抽象語法樹 (AST) 的數(shù)據(jù)結(jié)構(gòu)。 代碼將被拆分成與語言相關(guān)的部分（如 function 或 const 關(guān)鍵字），然后所有這些部分將構(gòu)建抽象語法樹。
假設(shè)我們有一個文件，其中包含一個只做一件事的程序，那就是定義一個變量：
const age = 25;
這就是這行非常簡單的代碼看起來像抽象語法樹的方式（我正在使用@babel/parser-7.16.12）：
如果你想將一些 Javascript 轉(zhuǎn)換為抽象語法樹，你可以使用這個工具。 編寫變量后得到的 AST 實際上要大得多，在屏幕截圖中隱藏了更多節(jié)點。
構(gòu)建 AST 后，它會被翻譯成機器代碼并立即執(zhí)行，因為現(xiàn)代 Javascript 使用即時編譯。 這段代碼的執(zhí)行將由 Javascript 引擎完成，利用稱為“調(diào)用堆棧”的東西。
調(diào)用堆棧是解釋器（如 Web 瀏覽器中的 JavaScript 解釋器）跟蹤其在調(diào)用多個函數(shù)的腳本中的位置的機制——當(dāng)前正在運行的函數(shù)以及從該函數(shù)中調(diào)用的函數(shù)等。
除了我們一直在討論的所有這些樹（DOM、CSSOM 和 AST）之外，瀏覽器還構(gòu)建了一種稱為可訪問（無障礙）樹的東西。
Web 開發(fā)中的可訪問性（通常縮寫為 A11y — 如“a”，然后是 11 個字符，然后是“y”）意味著讓盡可能多的人能夠使用網(wǎng)站，即使這些人的能力在某種程度上受到限制。 對很多人來說，技術(shù)讓事情變得更容易。 對于殘障人士，技術(shù)使事情成為可能。 可訪問性意味著開發(fā)盡可能易于訪問的內(nèi)容，無論個人的身體和認(rèn)知能力以及他們?nèi)绾卧L問網(wǎng)絡(luò) (ACT)。
一般而言，殘疾用戶可以并且確實在使用具有各種輔助技術(shù)的網(wǎng)頁。 他們使用屏幕閱讀器、放大鏡、眼動追蹤、語音命令等。 為了讓這些技術(shù)發(fā)揮作用，它們需要能夠訪問頁面的內(nèi)容。 由于他們無法直接讀取 DOM，因此 ACT 開始發(fā)揮作用。
可訪問性樹是使用 DOM 構(gòu)建的，稍后輔助設(shè)備將使用它來解析和解釋我們正在訪問的網(wǎng)頁的內(nèi)容。 ACT 就像 DOM 的語義版本，每次 DOM 更新時它都會更新。 每個需要暴露給輔助技術(shù)的 DOM 元素都會在 ACT 中有一個對應(yīng)節(jié)點。 在未構(gòu)建 ACT 之前，屏幕閱讀器無法訪問內(nèi)容。
要查看可訪問性樹的實際的樣子，您可以通過 Google Chrome 瀏覽器。 打開調(diào)試器 (F12) 并轉(zhuǎn)到“元素”選項卡。 從那里，你可以在右側(cè)選擇“輔助功能”窗格。
我去 Google 并檢查了搜索輸入，這是我在“計算”屬性下的“輔助功能”窗格中得到的：
使用語義 HTML 的重要性超出了本文的范圍，但作為開發(fā)人員，我們都應(yīng)該記住，我們構(gòu)建的網(wǎng)站應(yīng)該可供所有希望使用它們的人使用。 如果您想閱讀有關(guān)該主題的更多信息，可以在此處找到一篇關(guān)于 Web 可訪問性的很好的介紹性文章。 據(jù)互聯(lián)網(wǎng)協(xié)會無障礙訪問特別興趣小組稱，目前全世界有超過 13 億人（約占世界人口的 15%）患有某種形式的殘疾。
在解析階段構(gòu)建的樹（DOM、CSSOM）被組合成一種叫做渲染樹的東西。 這用于計算最終將繪制到屏幕上的所有可見元素的布局。 渲染樹的目的是確保頁面內(nèi)容以正確的順序繪制元素。 它將作為在屏幕上顯示像素的繪畫過程的輸入。
DOM 和 CSSOM 是使用 HTML 和 CSS 文件創(chuàng)建的。 這兩個文件包含不同類型的信息，樹的結(jié)構(gòu)也不同，那么渲染樹是如何創(chuàng)建的呢？
以上步驟的結(jié)果將是一個包含所有可見節(jié)點、內(nèi)容和樣式的渲染樹。
渲染樹包含有關(guān)顯示哪些節(jié)點及其計算樣式的信息，但不包含每個節(jié)點的尺寸或位置。
接下來需要做的是計算這些節(jié)點在設(shè)備視口（瀏覽器窗口內(nèi)）內(nèi)的確切位置及其大小。 這個階段稱為布局（在 Chrome、Opera、Safari 和 Internet Explorer 中）或重排（在 Firefox 中），但它們的意思相同。 瀏覽器在渲染樹的根部開始這個過程并遍歷它。
回流步驟不會只發(fā)生一次，而是每次我們更改 DOM 中影響頁面布局的某些內(nèi)容時，即使是部分更改，都會觸發(fā)回流。 重新計算元素位置的情況示例如下：
讓我們來看一個非常基本的 HTML 示例，其中內(nèi)嵌了一些 CSS：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Reflow</title>
</head>
<body>
<div style="width: 100%; height: 50%">
<div style="width: 50%; height: 50%">This is the reflow stage!</div>
</div>
</body>
</html>
上面的代碼只是說在視口內(nèi)我們應(yīng)該有兩個 div，其中第二個嵌套在第一個里面。 父 div 占據(jù)視口寬度的 100%和高度的 50%。第二個 div 占據(jù)父 div 的 50% 這看起來像這樣：
這個過程的輸出是一個類似盒子的模型，它準(zhǔn)確地捕獲了每個元素需要在屏幕上的位置及其大小。 完成此步驟后，輸出就可以傳遞到下一步，稱為繪畫階段。
在瀏覽器決定哪些節(jié)點需要可見并計算出它們在視口中的位置后，就可以在屏幕上繪制它們（渲染像素）了。 這個階段也被稱為光柵化階段，瀏覽器將在布局階段計算的每個盒子轉(zhuǎn)換為屏幕上的實際像素。
就像布局階段一樣，繪畫階段不會只發(fā)生一次，而是每次我們改變屏幕上元素的外觀時。 這些情況的例子是：
繪畫意味著瀏覽器需要將元素的每個視覺部分繪制到屏幕上，包括文本、顏色、邊框、陰影和替換元素（如按鈕和圖像），并且需要超快地完成。 為了確保重繪可以比初始繪制更快地完成，屏幕上的繪圖通常被分解成幾層。 如果發(fā)生這種情況，則需要進行合成。
傳統(tǒng)意義上，網(wǎng)絡(luò)瀏覽器完全依賴 CPU 來呈現(xiàn)網(wǎng)頁內(nèi)容。 但現(xiàn)在即使是最小的設(shè)備也有高性能的 GPU，所有大部分實現(xiàn)方案都圍繞著 GPU 來尋求更好的體驗。
合成是一種將頁面的各個部分分成層的技術(shù)，分別繪制它們并在稱為合成器線程的單獨線程中合成為頁面。 當(dāng)文檔的各個部分繪制在不同的層中并相互重疊時，合成是必要的，以確保它們以正確的順序繪制到屏幕上并且內(nèi)容被正確呈現(xiàn)。
通常，只有特定的任務(wù)會被重定向到 GPU，而這些任務(wù)可以由合成器線程單獨處理。
為了找出哪些元素需要在哪一層，主線程遍歷布局樹并創(chuàng)建層樹。 默認(rèn)情況下，只有一層（這些層的實現(xiàn)方式因瀏覽器而異），但我們可以找到會觸發(fā)重繪的元素，并為每個元素創(chuàng)建一個單獨的層。 這樣，重繪不應(yīng)應(yīng)用于整個頁面，而且此過程將可以使用到 GPU
如果我們想向瀏覽器提示某些元素應(yīng)該在一個單獨的層上，我們可以使用 will-change CSS 屬性。 實際上有一些特定的屬性和元素表示新層的創(chuàng)建。 其中一些是 <video>、<canvas> 和任何具有 CSS opacity 屬性、3D transform、will-change 和其他一些屬性的元素。 這些節(jié)點連同它們的后代將被繪制到它們自己的圖層上。
上面討論的兩種操作，回流和重繪，都是昂貴的，尤其是在像手機這樣處理能力低的設(shè)備上。 這就是為什么在處理 DOM 更改時我們應(yīng)該嘗試優(yōu)化它們（我將在我的 DOM 系列的未來一篇文章中詳細討論這一點）。 有些動作只會觸發(fā)重繪，有些動作會同時觸發(fā)回流和重繪。
以上包含了瀏覽器的核心工作原理，希望對正在學(xué)習(xí)前端的你有所幫助。當(dāng)然，這并不是所有的內(nèi)容，后續(xù)我還會一直更新這篇文章，從更多方面去探討瀏覽器的工作原理。最后感謝大家對本文的支持～歡迎點贊收藏，在評論區(qū)留下你的高見
本文為翻譯文，原文地址：https://dev.to/arikaturika/how-web-browsers-work-part-1-with-illustrations-1nid
家好，我是 Echa。
今天來分享 50 個超實用的 Chrome 瀏覽器擴展！
JSON Viewer Pro 用于可視化JSON文件。其核心功能包括：
輸入界面如下：
格式化之后：
JSONVue 是一個JSON數(shù)據(jù)查看器，主要用來格式化JSON數(shù)據(jù)：
Library Sniffer 是一款給開發(fā)者使用的工具，能夠探測當(dāng)前網(wǎng)頁所使用的類庫、框架和服務(wù)器環(huán)境，為開發(fā)者提供了方便。
Wappalyzer 擴展可以用來識別網(wǎng)站背后的底層技術(shù)。通過此擴展，可以了解特定應(yīng)用程序是否是用 React、Vue、Angular、PHP等編寫的。還可以訪問有關(guān) Web 服務(wù)器、編程語言、框架、內(nèi)容管理系統(tǒng)、分析的信息工具、數(shù)據(jù)庫等。
WhatRuns 擴展程序只需單擊一下即可找到任何網(wǎng)站上使用的技術(shù)。
使用PerfectPixel插件可以將設(shè)計圖加載至網(wǎng)頁中，與已成型的網(wǎng)頁進行重疊對比，以幫助開發(fā)和設(shè)計人員規(guī)范網(wǎng)頁像素精度。這是一款可以優(yōu)化前端頁面顯示的Chrome插件。
可以使用此擴展程序快速清除緩存，無需任何確認(rèn)對話框、彈出窗口等。可以在選項頁面上自定義要清除的數(shù)據(jù)和數(shù)量，包括：應(yīng)用程序緩存、緩存、Cookie、下載、文件系統(tǒng)、表單數(shù)據(jù)、歷史記錄、索引數(shù)據(jù)庫、本地存儲、插件數(shù)據(jù)、密碼和 WebSQL。
VisBug 是一個使用 JavaScript 構(gòu)建的開源網(wǎng)頁設(shè)計調(diào)試工具，它可以讓用戶使用點擊式和拖放式界面來查看網(wǎng)站的元素。
Debug CSS 是一個幫助調(diào)試CSS的插件。他可以顯示出頁面元素的輪播，按住Ctrl，并將鼠標(biāo)懸浮在元素上，即可查看其信息：
CSS Viewer 是一款適用于 Web 開發(fā)人員的高效 Chrome 擴展。顧名思義，CSS 查看器可以顯示將鼠標(biāo)懸停在任何網(wǎng)頁上的元素的 CSS 屬性。
EditThisCookie 是一個 cookie 管理器。可以添加，刪除，編輯，搜索，鎖定和屏蔽cookies。
React Developer Tools 是開源 JavaScript 庫 React 的 Chrome DevTools 擴展。它允許我們在 Chrome 開發(fā)者工具中檢查 React 組件層次結(jié)構(gòu)。安裝此插件之后，將在 Chrome DevTools 中獲得兩個新選項卡："?? Components" 和 "?? Profiler"：
Vue.js devtools 是一款基于chrome瀏覽器的用于調(diào)試Vue.js應(yīng)用程序的插件，可以使得開發(fā)人員大大提高調(diào)試效率。支持用戶對DOM結(jié)構(gòu)數(shù)據(jù)結(jié)構(gòu)進行解析和調(diào)試功能。
Augury 可以幫助開發(fā)人員在 Google Chrome 瀏覽器中調(diào)試和分析 Angular 應(yīng)用程序。
Firebug Lite是火狐瀏覽器中著名的開發(fā)者工具firebug插件移植到Chrome中的插件，在Chrome中安裝了Firebug Lite插件以后，開發(fā)人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來調(diào)試網(wǎng)頁內(nèi)容，其包含了基本的HTML、CSS以及Javascript的調(diào)試功能，用于幫助網(wǎng)頁前端開發(fā)工程師快速地調(diào)試網(wǎng)頁，以便及時地找到網(wǎng)頁中的BUG并及時修復(fù)。
HTML Validator 在 Chrome 的開發(fā)者工具中添加了 HTML Validator。HTML 頁面的錯誤數(shù)通過瀏覽器狀態(tài)欄中的圖標(biāo)顯示，詳細信息可以在瀏覽器的開發(fā)者工具中查看。
Web Developer 擴展為帶有各種 Web 開發(fā)工具的瀏覽器添加了一個工具欄按鈕。該擴展適用于 Chrome 和 Firefox，并且可以在這些瀏覽器支持的任何平臺上運行，包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox瀏覽器插件，提供URL轉(zhuǎn)發(fā)、修改HTTP請求和結(jié)果、插入腳本等功能。
Window Resizer 主要用來調(diào)整瀏覽器窗口的大小以模擬各種屏幕分辨率。
Responsive Viewer 是在一個視圖中顯示多個屏幕的 Chrome 擴展程序。該擴展將幫助前端開發(fā)人員在開發(fā)響應(yīng)式網(wǎng)站/應(yīng)用程序時測試多個屏幕。
此插件允許直接從瀏覽器發(fā)送跨域請求，而不會收到跨域錯誤。可以使用此插件覆蓋 Request Origin 標(biāo)頭，并將 Access-Control-Allow-Origin 設(shè)置為 *.
ColorPick Eyedropper 是一個放大的吸管和顏色選擇器工具，可讓從網(wǎng)頁等中選擇顏色值。
CSS Peeper 用于檢查和復(fù)制元素樣式的優(yōu)秀工具，使用 CSSPeeper 可以將鼠標(biāo)懸停在網(wǎng)頁中的任何元素上，然后單擊鼠標(biāo)即可復(fù)制元素的樣式。
24. Dimensions
Dimensions是一款能幫助使用者對網(wǎng)頁上各種元素屬性之間的距離進行測量的Chrome頁面元素測量插件，該插件在點擊啟動插件圖標(biāo)后，可以對頁面中圖像、輸入字段、按鈕以及視頻等頁面元素之間上下左右的方位尺寸進行測量，同時還可以通過使用快捷鍵來快速啟用或關(guān)閉該插件的功能，簡單實用。
Site Palette 用于生成調(diào)色板。設(shè)計師和前端開發(fā)人員必備的工具。可以通過這款插件輕松獲取網(wǎng)站的配色方案。
ColorZilla 是一款功能強大地提取網(wǎng)頁色彩的工具；也是個快速的對顏色進行調(diào)節(jié)的Chrome插件，許多的用戶將這款軟件稱呼為顏色吸取插件，它提取的顏色是非常的多樣化，還可生產(chǎn)css顏色的代碼等。
當(dāng)我們想查看網(wǎng)頁中文字的字體時，最常用的方法就是在控制臺查看文字的字體樣式。那還有沒有更簡單的方法呢？WhatFont 就是一個查看網(wǎng)頁字體的Chrome擴展。只需要的點擊擴展圖標(biāo)，再點需要查看為文字即可：
Fonts Ninja 可以從任何網(wǎng)站識別字體、添加書簽、試用并購買它們。
使用 BrowserStack 快速啟動擴展在任何瀏覽器中啟動一個新的測試會話。最多可設(shè)置 12 個瀏覽器以實現(xiàn)快速訪問并最大限度地減少切換瀏覽器所花費的時間。
Toby 是一款 Chrome 新標(biāo)簽頁工具，能夠?qū)⑽醋x的標(biāo)簽頁分組顯示在新標(biāo)簽頁中，這樣就能把所有未看完的標(biāo)簽頁都關(guān)閉了。分組相當(dāng)于多個 Chrome 窗口，將你的標(biāo)簽頁都拖進 Toby 中，就不需要實時開著占地方了。
該擴展提供了每日熱門開發(fā)者新聞，不需要再浪費時間搜索高質(zhì)量的文章了。
Momentum 擁有漂亮的新標(biāo)簽頁面，每日更新精彩背景壁紙圖片，可設(shè)置每日新鮮事焦點以及跟蹤待辦事項，無廣告，無彈窗。
The Great Suspender 是一個輕量級的擴展用來減少 Chrome 的內(nèi)存占用。如果同時打開許多選項卡，在可配置的時間之后未查看的選項卡將在后臺自動掛起，從而釋放該選項卡消耗的內(nèi)存和 CPU。
Session Buddy是一個可以幫助用戶查看、新增、編輯當(dāng)前網(wǎng)站Session狀態(tài)的Chrome插件。用戶可以利用該插件保存網(wǎng)站當(dāng)前的狀態(tài)以便在關(guān)閉Chrome或關(guān)閉計算機后恢復(fù)，從而達到節(jié)省內(nèi)存的作用。
Octotree 旨在讓 GitHub 體驗更好。通常，為了檢查 Github 中的子文件夾，需要手動單擊文件夾并導(dǎo)航。Octotree 擴展解決了這個問題。此擴展在項目的左側(cè)顯示存儲庫的目錄結(jié)構(gòu)，這有助于更好地理解文件夾結(jié)構(gòu)。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標(biāo)替換為特定文件類型的圖標(biāo)。
ax DevTools 是一個快速、輕量級但功能強大的測試工具，由 Deque 開發(fā)的世界上最值得信賴的可訪問性測試引擎 axe-core 驅(qū)動。使用 ax DevTools 在網(wǎng)站開發(fā)過程中查找并修復(fù)更多可訪問性問題。
OctoLinker 可以將特定語言的語句（如 include、require 或 import）轉(zhuǎn)換為鏈接。當(dāng)打開一個包含多個導(dǎo)入語句的文件并且想要快速打開它時，只需將鼠標(biāo)懸停在鏈接的文件上并單擊即可打開。
此擴展可幫助 Web 開發(fā)人員分析網(wǎng)頁是否違反最佳實踐。
Check My Links 是一個鏈接檢查器，它可以抓取網(wǎng)頁并查找損壞的鏈接。
Checkbot 是用于驗證一組HTML頁面上的鏈接的工具。Checkbot可以檢查一個或多個服務(wù)器上的單個文檔或一組文檔。它會創(chuàng)建一個報告，該報告匯總了引起某種警告或錯誤的所有鏈接。
Google Page Speed Insighs 是一款旨在優(yōu)化所有設(shè)備上的網(wǎng)頁、提高網(wǎng)頁加載速度的工具。
META SEO inspector是一款可以幫助用戶分析網(wǎng)頁的meta信息并得到SEO評估的谷歌瀏覽器插件。
Ghostery 是強大的隱私保護擴展程序。其主要有以下功能：
AdBlock 用來在YouTube、Facebook、Twitch和其他你喜愛的網(wǎng)站上攔截廣告和彈窗。
番茄工作法（Pomodoro?）時間管理助理。? 長短兩種休息時間 ? 帶有倒計時顯示的工具欄圖標(biāo) ? 追蹤Pomodoro歷史和統(tǒng)計訊息 ? 可配置的長休間隔 ? 可配置的定時器時長 ? 桌面與新標(biāo)簽頁通知 ? 超過20種音效可選的聲音通知 ? 計時器秒針走動音效
Loom 可以用來快速錄制視頻，并且能夠?qū)浿频囊曨l上傳到指定的網(wǎng)頁中，Loom還支持在用戶點擊啟動插件時，立即捕捉屏幕圖像，同時開始視頻錄制操作，還可以將錄制好的視頻復(fù)制到粘貼板中存儲。
GoFullPage 是一款全屏截圖插件（整個網(wǎng)頁截圖），完整捕獲您當(dāng)前頁面的屏幕，進行滾動截圖，而無需任何額外的權(quán)限。單擊擴展程序圖標(biāo)，然后將其傳輸?shù)狡聊豢煺盏男聵?biāo)簽頁中，可以在其中將其下載為圖像或PDF，甚至只需拖動即可，保存到桌面。
BetterViewer 可以提供更好的圖像查看體驗，旨在替代基于 Chrome 瀏覽器中內(nèi)置的圖像查看模式。使用時，只需在頁面右鍵點擊圖片，選擇“在新標(biāo)簽頁中打開圖片”即可。
svg-grabber 是一個快速預(yù)覽并從網(wǎng)站獲取所有 svg 的工具。可以用來預(yù)覽、下載和復(fù)制網(wǎng)站中所有 SVG 圖標(biāo)和插圖的代碼。
常，我們希望限制元素相對于其父元素的寬度，同時使其具有動態(tài)性。因此，有一個基礎(chǔ)寬度或高度的能力，使其擴展的基礎(chǔ)上，可用的空間。比如說，我們有一個按鈕，它的寬度應(yīng)該是最小的，不應(yīng)該低于它的寬度。這就是最大和最小屬性變得方便的地方。
在本文中，我們將詳細介紹CSS的最大和最小寬度和高度屬性，并使用可能的用例和技巧詳細解釋每一個屬性。
首先要討論的是與寬度相關(guān)的屬性。我們有min-width和max-width，它們中的每一個都很重要，都有自己的用例。
設(shè)置min-width的值時，其好處在于防止width屬性使用的值變得小于min-width的指定值。 請注意，min-width的默認(rèn)值是auto，它解析為0。
讓我們舉一個基本的例子來說明這一點。
我們有一個按鈕，里面有一個變化的文本。文本的范圍可能從一個單詞到多個單詞。為了確保即使只有一個單詞，它也有最小寬度，應(yīng)該使用min-width。
最小寬度為100px，這樣即使按鈕的內(nèi)容很短，比如Done，或者只有一個圖標(biāo)，它仍然足夠大，可以被注意到。在使用阿拉伯語等多語言網(wǎng)站時，這一點非常重要。 考慮以下來自Twitter的示例：
在以前的情況下，按鈕上帶有單詞“??”，表示完成。 按鈕的寬度太小，因此在后面的案例中，我增加了它的最小寬度。
在內(nèi)容較長的情況下，min-width可以擴展按鈕的寬度，而水平方向上的padding應(yīng)該被添加，以實現(xiàn)一個合適的外觀按鈕。
在設(shè)置max-width值時，它的好處在于防止width屬性使用的值超過max-width的指定值。max-width的默認(rèn)值是none。
max-width的常見且簡單的用例是將其與圖像一起使用。 考慮以下示例：
圖像比它的父元素大。通過使用max-width: 100%，圖像的寬度不會超過其父圖像的寬度。如果圖像比父圖像小，則max-width: 100%不會對圖像產(chǎn)生實際影響，因為它比父圖像小。
當(dāng)min-width和max-width都用于一個元素時，它們中的哪一個將覆蓋另一個?換句話說，哪個優(yōu)先級更高?
html
<div class="wrapper">
<div class="sub"></div>
</div>css
.sub {
width: 100px;
min-width: 50%;
max-width: 100%;
}初始width值為100px，并在其上加上min-width和max-width值。 結(jié)果是元素寬度未超過其包含的塊/父元素的50％。
除了最小和最大寬度屬性外，我們還具有與高度相同的屬性。
設(shè)置min-height的值時，其好處在于防止使用的height屬性值變得小于min-height的指定值。 請注意，最小高度的默認(rèn)值為auto，它解析為0。
我們用一個簡單的例子來演示一下。
我們有一個帶有描述文本的部分。目標(biāo)是為section設(shè)置一個最小高度，這樣它就可以處理短或長內(nèi)容。考慮下面的基本情況
.sub {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
min-height: 100px;
color: #fff;
background: #3c78dB;
}最小高度為100px，使用flexbox時，內(nèi)容水平和垂直居中。 如果內(nèi)容更長，會發(fā)生什么？ 例如一段？
是的，你猜對了!section的高度將展開以包含新內(nèi)容。有了它，我們就可以構(gòu)建靈活的組件，并對其內(nèi)容做出響應(yīng)。
事例源碼:https://codepen.io/shadeed/pen/cfb600cf30acdae9cf6f9cb5347a37cf
在設(shè)置max-height值時，它的好處在于防止height屬性使用的值超過max-height的指定值。注意，max-height的默認(rèn)值是none。
考慮下面的示例，其中我為內(nèi)容設(shè)置了max-height。 但是，因為它大于指定的空間，所以會發(fā)生溢出。 因此，文本超出了其父邊界。
我們將介紹min-width，min-height，max-width和max-height的一些常見和不常見的用例。
當(dāng)有一個標(biāo)簽列表時，建議限制一個標(biāo)簽的最小寬度，這樣如果它的內(nèi)容很短，它的外觀就不會受到影響。
通過具有這種靈活性，無論內(nèi)容有多短，標(biāo)簽都將看起來不錯。 但是，如果內(nèi)容作者輸入了一個非常長的標(biāo)簽名稱，而他使用的內(nèi)容管理系統(tǒng)沒有標(biāo)簽的最大字符長度，將會發(fā)生什么情況呢？ 我們也可以使用max-width。
.c-tag {
display: inline-block;
min-width: 100px;
max-width: 250px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/*Other styles*/
}通過使用max-width，標(biāo)簽寬度將被限制為特定值。 但是，這還不夠，標(biāo)簽名稱應(yīng)被截斷。
事例地址：https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16
對于按鈕的最小值和最大值有不同的用例，因為按鈕組件有多種變體。考慮下面的圖：
請注意，按鈕的“Get”寬度太小。 如果不設(shè)置最小寬度，則由于任何原因而沒有文本時，情況可能會變得更糟。 在這種情況下，設(shè)置最小寬度很重要。
min-width的默認(rèn)值是auto，它被計算為0。當(dāng)一個元素是一個flex項時，min-width的值不會計算為零。flex 項目的最小大小等于其內(nèi)容的大小。
根據(jù)CSSWG：
默認(rèn)情況下，flex項目不會縮小到它們的最小內(nèi)容大小(最長單詞或固定大小元素的長度)以下。要更改此設(shè)置，請設(shè)置min-width或 min-height屬性。
考慮下面的例子
這個人的名字有一個很長的單詞，這導(dǎo)致了溢出和水平滾動。盡管如此，我還是在標(biāo)題中添加了下面的CSS來截斷它
.c-person__name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}由于title是flex項目，因此解決方案是重置min-width并將其強制為零。
.c-person__name {
/*Other styles*/
min-width: 0;
}下面是修復(fù)后的樣子
根據(jù)CSSWG：
在彈性項目的主軸上可見溢出的項目上，當(dāng)在彈性項目的主軸min-size屬性中指定時，指定自動最小尺寸。
意味著，將overflow設(shè)置為visible值以外的值會導(dǎo)致min-width被計算為0，這解決了我們不設(shè)置min-width: 0的問題。
事例源碼：https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57
雖然與min-width相比，這是一個不太常見的問題，但是它可能發(fā)生。 只是為了確認(rèn)，問題與不能少于其內(nèi)容的彈性項目有關(guān)。 結(jié)果min-height值被設(shè)置為與內(nèi)容一樣長。
考慮以下示例：
用紅色表示的文本應(yīng)該在父文本中裁剪。因為面板主體是一個flex項目，所以它的min-height與它的內(nèi)容相等。為了防止這種情況，我們應(yīng)該重新設(shè)置最小高度值。看看HTML和CSS是怎么樣的。
HTML
<div class="c-panel">
<h2 class="c-panel__title"><!-- Title --></h2>
<div class="c-panel__body">
<div class="c-panel__content"><!-- Content --></div>
</div>
</div>CSS
.c-panel {
display: flex;
flex-direction: column;
height: 180px;
}
.c-panel__body {
min-height: 0;
}
.c-panel__content {
overflow-y: scroll;
height: 100%;
}通過向面板主體添加min-height: 0，這將重置該屬性，并且現(xiàn)在應(yīng)該可以正常工作。
事例源碼：https://codepen.io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100
在某些情況下，我們有一個最小寬度的元素，但同時，它沒有最大寬度。這可能會導(dǎo)致組件太寬，而我們并不想這樣做。考慮以下示例
由于寬度是以像素為單位定義的，因此不能保證上面的方法適用于移動視口。為了解決這個問題，我們可以使用百分比來代替像素作為最小和最大屬性。考慮下面這個具有article主體的示例。
我為圖像添加了以下CSS：
img {
min-width: 35%;
max-width: 70%;
}事例源碼:https://codepen.io/shadeed/pen/11f49fd1a35ad06ce241bee17c3d3124
#### 頁面包裝器/容器
最常用的｀max-width｀用例之一是頁面包裝器或容器。通過向頁面添加最大寬度，我們可以確保內(nèi)容對用戶來說是可讀的、易于瀏覽的。
下面是一個包裝器的例子，它是居中的，左右兩邊有水平的填充。
.wrapper {
max-width: 1170px;
padding-left: 16px;
padding-right: 16px;
margin-left: auto;
margin-right: auto;
}ch 是一個相對于數(shù)字0的大小，1ch 就是數(shù)字 0 的寬度。如定義一個3ch的寬度，那么就只能裝下 3個0。
<!-- HTML代碼 -->
<div>0000</div>
/* CSS代碼 */
div {
width: 3ch;
background: powderblue;
}在前面的wrapper元素示例中，我們可以利用ch單元，因為它是一個article 主體。
.wrapper {
max-width: 70ch;
/* Other styles */
}在某些情況下，我們面臨著使手風(fēng)琴或移動菜單具有意想不到的內(nèi)容高度的挑戰(zhàn)。在這種情況下，max-height可能是一個很好的解決方案。
請考慮以下示例：
單擊菜單按鈕后，菜單應(yīng)隨動畫從上到下滑動。 如果沒有固定的高度（不建議這樣做），除非使用JavaScript，否則這是不可能的。 但是，對于max-height，這是可能的。 想法是為高度添加一個較大的值，例如max-height：20rem，可能無法達到，然后我們可以使用動畫從max-height: 0變換到max-height: 20rem。
.c-nav {
max-height: 0;
overflow: hidden;
transition: 0.3s linear;
}
.c-nav.is-active {
max-height: 22rem;
}點擊菜單按鈕可以看到動畫的運行。
事例源碼：https://codepen.io/shadeed/pen/164c7ef67f5d4541bddb8bc12b2772da
一般來說，我不喜歡給元素添加固定的高度。我覺得這樣做，會破壞流式布局的結(jié)構(gòu)。但有些情況設(shè)置固定高度卻很有用。
考慮下面的例子，在這里我們有一個設(shè)置了固定高度的hero部分。
是，當(dāng)內(nèi)容較長時，它會溢出并離開hero包裝器，這可不太好。
為了預(yù)先解決這個問題，我們可以使用min-height來代替height。我們可以用這種方式先解決問題，盡管這可能會導(dǎo)致頁面看起來很奇怪，但是我認(rèn)為應(yīng)該首先防止內(nèi)容管理系統(tǒng)(CMS)中發(fā)生這樣的事情。這樣，問題就解決了，看起來也不錯。
內(nèi)容溢出的問題不僅在于內(nèi)容是否大于固定的hero 高度。它可以發(fā)生在屏幕大小調(diào)整作為文本換行的結(jié)果。
如果改用min-height，則上述情況根本不會發(fā)生。
對于模態(tài)組件，它需要最小和最大寬度，以便可以適應(yīng)移動設(shè)備到PC的屏幕上的適應(yīng)。
思路1
.c-modal__body {
width: 600px;
max-width: 100%;
}思路2
.c-modal__body {
width: 100%;
max-width: 600px;
}對于我來說，我更喜歡第二個思路，因為我只需要定義max-width: 600px。modal是一個<div>元素，因此它已經(jīng)具有其父元素的100％寬度，對嗎？
考慮下面為模態(tài)設(shè)計簡化的測試案例。 請注意，如果可用視口空間不足，則寬度如何更改為其父級的100％。
事例源碼：https://codepen.io/shadeed/pen/5dcb1c4c6773cc3a97a766c327c36443
當(dāng)一個網(wǎng)站的內(nèi)容不夠長，它希望看到頁腳粘到底部。讓我們用一個可視化的例子來更好地展示這一點。
請注意，頁腳未粘貼在瀏覽器窗口的末尾。 那是因為內(nèi)容不足以達到瀏覽器窗口高度的長度。 修復(fù)后，其外觀應(yīng)如下所示：
首先，將body元素作為flexbox容器，然后將其最小高度設(shè)置為視口高度的100％。
事例源碼：https://codepen.io/shadeed/pen/aeb14f2819b9cc4805275b88c2d55645?editors=1100
為了使比例容器能夠根據(jù)視口大小進行響應(yīng)縮放，引入了padding hack。 現(xiàn)在，我們可以通過組合CSS中的視口單位和最大寬度/高度來模仿相同的行為。
我們有一個尺寸為644 * 1000像素的圖像。 為了使其流暢，我們需要以下內(nèi)容：
人才們的 【三連】 就是小智不斷分享的最大動力，如果本篇博客有任何錯誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。
作者：Ahmad shaded 譯者：前端小智 來源：sitepoint 原文：https://www.impressivewebs.com/min-max-width-height-css
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
