25、HTTP2 / HTTP1 之間的區別是什么（高薪常問）

別

1、HTTP2 采用二進制格式而非文本格式，比起文本格式，二進制格式解析起來更加高效，并且錯誤少。

2、HTTP2 是完全的多路復用，非有序并阻塞的----只需要一個連接即可實現并行，多路復用的意思是它能同時處理多個消息的請求和響應，HTTP1 是一個連接一次只能提交一個請求的效率比較高，多了就會變慢。

3、使用報頭壓縮，HTTP2 降低了開銷，HTTP1 的消息頭很大冗余,HTTP2 是將消息頭中的不同的部分分別用不用的索引進行表示，且會用哈夫曼編碼壓縮字符串，最后封裝成 frame。

4、HTTP2 讓服務器可以將響應主動”推送”到客戶端緩存中，HTTP2 中服務器會主動將資源推送給客戶端，例如把 js 和 css 文件主動推送給客戶端而不用客戶端解析 HTML 后請求再響應。

覽器解析HTML文件的過程是網頁呈現的關鍵步驟之一。具體介紹如下：

HTML文檔的接收和預處理

網絡請求處理：當用戶輸入URL或點擊鏈接時，瀏覽器發起HTTP請求，服務器響應并返回HTML文件。此過程中，瀏覽器需要處理DNS查詢、建立TCP連接等底層網絡通信操作。
預解析優化：為了提高性能，現代瀏覽器在主線程解析HTML之前會啟動一個預解析線程，提前下載HTML中鏈接的外部CSS和JS文件。這一步驟確保了后續渲染過程的順暢進行。

解析為DOM樹

詞法分析和句法分析：瀏覽器的HTML解析器通過詞法分析將HTML文本標記轉化為符號序列，然后通過句法分析器按照HTML規范構建出DOM樹。每個節點代表一個HTML元素，形成了多層次的樹狀結構。
生成對象接口：生成的DOM樹是頁面元素的結構化表示，提供了操作頁面元素的接口，如JavaScript可以通過DOM API來動態修改頁面內容和結構。

CSS解析與CSSOM樹構建

CSS文件加載與解析：瀏覽器解析HTML文件中的<link>標簽引入的外部CSS文件和<style>標簽中的內聯CSS，生成CSSOM樹。CSSOM樹反映了CSS樣式的層級和繼承關系。
CSS屬性計算：包括層疊、繼承等，確保每個元素對應的樣式能夠被準確計算。這些計算過程為后續的布局提供必要的樣式信息。

JavaScript加載與執行

阻塞式加載：當解析器遇到<script>標簽時，它會停止HTML的解析，轉而先加載并執行JavaScript代碼。這是因為JS可能會修改DOM結構或CSSOM樹，從而影響已解析的部分。
異步和延遲加載：為了不影響頁面的初步渲染，可以采用async或defer屬性來異步加載JS文件，這樣可以在后臺進行JS的加載和執行，而不阻塞HTML解析。

渲染樹的構建

合并DOM樹和CSSOM樹：有了DOM樹和CSSOM樹后，瀏覽器將它們組合成渲染樹，這個樹只包含顯示界面所需的DOM節點及對應的樣式信息。
不可見元素的排除：渲染樹會忽略例如<head>、<meta>等不可見元素，只關注<body>內的可視化內容。

布局計算（Layout）

元素位置和尺寸確定：瀏覽器從渲染樹根節點開始，遞歸地計算每個節點的精確位置和尺寸，這個過程也被稱為“回流”或“重排”，是后續繪制的基礎。
布局過程的優化：現代瀏覽器會盡量優化布局過程，例如通過流式布局的方式減少重復計算，確保高效地完成布局任務。

繪制（Paint）

像素級繪制：繪制是一個將布局計算后的各元素繪制成像素點的過程。這包括文本、顏色、邊框、陰影以及替換元素的繪制。
層次化的繪制：為了高效地更新局部內容，瀏覽器會將頁面分成若干層次（Layer），對每一層分別進行繪制，這樣只需更新變化的部分。

因此，我們開發中要注意以下幾點：

避免過度使用全局腳本：盡量減少使用全局腳本或者將它們放在文檔底部，以減少對HTML解析的阻塞。
合理組織CSS和使用CSS預處理器：合理組織CSS文件的結構和覆蓋規則，利用CSS預處理器進行模塊化管理。
利用瀏覽器緩存機制：通過設置合理的緩存策略，減少重復加載相同資源，提升二次訪問的體驗。
優化圖片和多媒體資源：適當壓縮圖片和優化多媒體資源的加載，減少網絡傳輸時間和渲染負擔。

綜上所述，瀏覽器解析HTML文件是一個復雜而高度優化的過程，涉及從網絡獲取HTML文檔到最終將其渲染到屏幕上的多個步驟。開發者需要深入理解這些步驟，以優化網頁性能和用戶體驗。通過合理組織HTML結構、優化資源加載順序、減少不必要的DOM操作和合理安排CSS和JavaScript的加載與執行，可以顯著提升頁面加載速度和運行效率。

1 部分：真正控制您的 Web 應用程序

山姆·奧爾伯里( Sam Albury ) 在Unsplash上的照片

編輯：本系列文章不是關于構建 COMMON 網頁。

我必須承認，我發現 HTML 和 CSS 太復雜了，尤其是在頁面元素的微調方面。規則太多，違反直覺，相互沖突。有時我們需要使用技巧（！）來實現簡單的事情。元素的定義可能分布在許多地方：HTML、CSS（內聯、嵌入和外部文件）和 JavaScript。在級聯系統中很容易迷失方向。

并且存在瀏覽器和設備問題，因為對于某些瀏覽器來說工作正常的東西可能對另一個瀏覽器來說表現不佳，甚至在不同設備上的同一個瀏覽器上也是如此。

我放棄了處理 HTML 和 CSS；不是因為它很復雜（對我來說）。我放棄了，因為它不起作用（應該做的）。

瀏覽器/設備特性

有一次我非常沮喪，因為當頁面在 iPhone 上加載時（盡管也使用 Chrome），表格中的某些文本占用的空間比我計劃的要多，從而破壞了布局。我多次修改和更改 CSS 甚至 HTML 都沒有結果。

你不能責怪字體，因為我使用的是特殊字體（不是瀏覽器標準字體），所以每個設備都應該使用相同的字體。我更深入地使用了自己的字體，使用了不同的名稱（也許 iPhone 緩存了不同的版本）。還是好不了。我制作了屏幕截圖并開始逐個像素地分析不同的結果，并意識到問題出在文本字符之間的空格上。iPhone 上的空間更大。所以，我很快開始編輯letter-spacing CSS 屬性。還是不好！

非 iPhone 設備上的結果

iPhone 上的結果

然后我明白了：不能依靠 HTML 和 CSS 來真正控制網頁的呈現（無處不在）。忘記使用復雜的 CSS 來設計精美的表格：將圖像扔到網頁中！

字體大小配置

您無法控制網頁的呈現方式還有另一個重要原因。即使世界上只有一種設備和一種瀏覽器，由于可訪問性問題，瀏覽器讓用戶選擇最小字體大小，覆蓋您對字體大小的定義，非常混亂網頁設計。

計劃字體大小

用戶覆蓋的字體大小

翻譯

我們可以更進一步，瀏覽器可以做的另一件事，不僅是破壞你的設計，還破壞應用程序：翻譯！我有一個非常糟糕的經歷。我不只是在談論按鈕上的壓倒性和無意義的文本。我說的是谷歌瀏覽器顯示 12 個菜單按鈕，應該只有 6 個。它們都不起作用。讓我再說一遍：因為翻譯功能在用戶的瀏覽器中處于活動狀態，Chrome *發明* 6 個菜單按鈕并破壞了我的網絡應用程序！！！

標準菜單

瀏覽器“翻譯”菜單

可能發生這種情況是因為頁面元素是用 JavaScript 而不是 HTML 創建的，所以瀏覽器不夠聰明，無法弄清楚。

瀏覽器希望向其用戶提供翻譯。也許您可以欺騙一個瀏覽器一段時間不提供翻譯，但這并不可靠。瀏覽器是不同的并且經常變化。

編輯：我再次測試了該應用程序的舊（2017 年）版本。Chrome 順利翻譯了頁面。干杯!

編輯 2：React 的人似乎在 2017 年遇到了類似的問題：
Make React 對谷歌翻譯中的 DOM 突變具有彈性 #11538

縮放

此外，用戶更改的縮放級別可能會破壞設計。

所以現在怎么辦？

如果您正在創建一個簡單的 (*) 網頁，您可以繼續使用 HTML 和 CSS，推送圖像而不是使用 HTML 標記和 CSS 屬性構建表格。因此，您的表格將在任何瀏覽器、任何設備、任何縮放、任何語言和用戶配置的任何字體大小上保持美觀和良好。此外，只使用舊的、傳統的、通用的東西（小心炒作）。

編輯：關于簡單（*）：在這種情況下，“簡單”意味著頁面可以與瀏覽器的流暢布局相匹配。抱歉耽誤了解釋。

但是，如果您正在創建像這個繪圖工具這樣的復雜應用程序（目前僅適用于 PC），那么我建議您停止使用 HTML 和 CSS，而使用畫布和 JavaScript。

.html 文件

為了讓自己清楚，上面的代碼（.html 文件）包含您需要的所有 HTML 和 CSS。

打印文本

使用其標準函數fillText在畫布上打印文本很簡單；但結果在視覺上很差。

var canvas = document.createElement("canvas") 
var context = canvas.getContext("2d") 
document.body.appendChild(canvas)context.font = "20px arial" 
context.fillText("xyz", 50, 50)

畫布填充文本白底黑字（放大）

直接在網頁上打印文本會產生更好的結果。

document.body.style.fontFamily = "arial" 
document.body.style.fontSize = "20px" 
document.write("xyz")

HTML 白底黑字（放大）

上面的兩個圖像對應于在白色背景上用黑色打印“xyz”產生的真實像素，使用字體Arial和20 像素的字體大小。

當我們使用標準功能在畫布上打印時，我們只有灰度像素。

當我們直接在頁面上打印文本時，我們有大量不同顏色的像素；雖然在肉眼看來，角色看起來是純黑色（或深灰色）。此外，它們看起來比以前的打印方式要好得多。

在線咨詢

上一篇：HTML標題元素
下一篇：HTML表格標簽的使用方法與示例

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商