整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
別
1、HTTP2 采用二進制格式而非文本格式，比起文本格式，二進制格式解析起來更加高效，并且錯誤少。
2、HTTP2 是完全的多路復用，非有序并阻塞的----只需要一個連接即可實現(xiàn)并行，多路復用的意思是它能同時處理多個消息的請求和響應，HTTP1 是一個連接一次只能提交一個請求的效率比較高，多了就會變慢。
3、使用報頭壓縮，HTTP2 降低了開銷，HTTP1 的消息頭很大冗余,HTTP2 是將消息頭中的不同的部分分別用不用的索引進行表示，且會用哈夫曼編碼壓縮字符串，最后封裝成 frame。
4、HTTP2 讓服務器可以將響應主動”推送”到客戶端緩存中，HTTP2 中服務器會主動將資源推送給客戶端，例如把 js 和 css 文件主動推送給客戶端而不用客戶端解析 HTML 后請求再響應。
覽器解析HTML文件的過程是網(wǎng)頁呈現(xiàn)的關鍵步驟之一。具體介紹如下：
HTML文檔的接收和預處理
解析為DOM樹
CSS解析與CSSOM樹構建
JavaScript加載與執(zhí)行
渲染樹的構建
布局計算（Layout）
繪制（Paint）
因此，我們開發(fā)中要注意以下幾點：
綜上所述，瀏覽器解析HTML文件是一個復雜而高度優(yōu)化的過程，涉及從網(wǎng)絡獲取HTML文檔到最終將其渲染到屏幕上的多個步驟。開發(fā)者需要深入理解這些步驟，以優(yōu)化網(wǎng)頁性能和用戶體驗。通過合理組織HTML結構、優(yōu)化資源加載順序、減少不必要的DOM操作和合理安排CSS和JavaScript的加載與執(zhí)行，可以顯著提升頁面加載速度和運行效率。
山姆·奧爾伯里( Sam Albury ) 在Unsplash上的照片
編輯：本系列文章不是關于構建 COMMON 網(wǎng)頁。
我必須承認，我發(fā)現(xiàn) HTML 和 CSS 太復雜了，尤其是在頁面元素的微調方面。規(guī)則太多，違反直覺，相互沖突。有時我們需要使用技巧（！）來實現(xiàn)簡單的事情。元素的定義可能分布在許多地方：HTML、CSS（內聯(lián)、嵌入和外部文件）和 JavaScript。在級聯(lián)系統(tǒng)中很容易迷失方向。
并且存在瀏覽器和設備問題，因為對于某些瀏覽器來說工作正常的東西可能對另一個瀏覽器來說表現(xiàn)不佳，甚至在不同設備上的同一個瀏覽器上也是如此。
我放棄了處理 HTML 和 CSS；不是因為它很復雜（對我來說）。我放棄了，因為它不起作用（應該做的）。
有一次我非常沮喪，因為當頁面在 iPhone 上加載時（盡管也使用 Chrome），表格中的某些文本占用的空間比我計劃的要多，從而破壞了布局。我多次修改和更改 CSS 甚至 HTML 都沒有結果。
你不能責怪字體，因為我使用的是特殊字體（不是瀏覽器標準字體），所以每個設備都應該使用相同的字體。我更深入地使用了自己的字體，使用了不同的名稱（也許 iPhone 緩存了不同的版本）。還是好不了。我制作了屏幕截圖并開始逐個像素地分析不同的結果，并意識到問題出在文本字符之間的空格上。iPhone 上的空間更大。所以，我很快開始編輯letter-spacing CSS 屬性。還是不好！
非 iPhone 設備上的結果
iPhone 上的結果
然后我明白了：不能依靠 HTML 和 CSS 來真正控制網(wǎng)頁的呈現(xiàn)（無處不在）。忘記使用復雜的 CSS 來設計精美的表格：將圖像扔到網(wǎng)頁中！
您無法控制網(wǎng)頁的呈現(xiàn)方式還有另一個重要原因。即使世界上只有一種設備和一種瀏覽器，由于可訪問性問題，瀏覽器讓用戶選擇最小字體大小，覆蓋您對字體大小的定義，非常混亂網(wǎng)頁設計。
計劃字體大小
用戶覆蓋的字體大小
我們可以更進一步，瀏覽器可以做的另一件事，不僅是破壞你的設計，還破壞應用程序：翻譯！我有一個非常糟糕的經(jīng)歷。我不只是在談論按鈕上的壓倒性和無意義的文本。我說的是谷歌瀏覽器顯示 12 個菜單按鈕，應該只有 6 個。它們都不起作用。讓我再說一遍：因為翻譯功能在用戶的瀏覽器中處于活動狀態(tài)，Chrome *發(fā)明* 6 個菜單按鈕并破壞了我的網(wǎng)絡應用程序！！！
標準菜單
瀏覽器“翻譯”菜單
可能發(fā)生這種情況是因為頁面元素是用 JavaScript 而不是 HTML 創(chuàng)建的，所以瀏覽器不夠聰明，無法弄清楚。
瀏覽器希望向其用戶提供翻譯。也許您可以欺騙一個瀏覽器一段時間不提供翻譯，但這并不可靠。瀏覽器是不同的并且經(jīng)常變化。
編輯：我再次測試了該應用程序的舊（2017 年）版本。Chrome 順利翻譯了頁面。干杯!
編輯 2：React 的人似乎在 2017 年遇到了類似的問題：
Make React 對谷歌翻譯中的 DOM 突變具有彈性 #11538
此外，用戶更改的縮放級別可能會破壞設計。
如果您正在創(chuàng)建一個簡單的 (*) 網(wǎng)頁，您可以繼續(xù)使用 HTML 和 CSS，推送圖像而不是使用 HTML 標記和 CSS 屬性構建表格。因此，您的表格將在任何瀏覽器、任何設備、任何縮放、任何語言和用戶配置的任何字體大小上保持美觀和良好。此外，只使用舊的、傳統(tǒng)的、通用的東西（小心炒作）。
編輯：關于簡單（*）：在這種情況下，“簡單”意味著頁面可以與瀏覽器的流暢布局相匹配。抱歉耽誤了解釋。
但是，如果您正在創(chuàng)建像這個繪圖工具這樣的復雜應用程序（目前僅適用于 PC），那么我建議您停止使用 HTML 和 CSS，而使用畫布和 JavaScript。
.html 文件
為了讓自己清楚，上面的代碼（.html 文件）包含您需要的所有 HTML 和 CSS。
使用其標準函數(shù)fillText在畫布上打印文本很簡單；但結果在視覺上很差。
var canvas = document.createElement("canvas")
var context = canvas.getContext("2d")
document.body.appendChild(canvas)context.font = "20px arial"
context.fillText("xyz", 50, 50)畫布填充文本白底黑字（放大）
直接在網(wǎng)頁上打印文本會產(chǎn)生更好的結果。
document.body.style.fontFamily = "arial"
document.body.style.fontSize = "20px"
document.write("xyz")HTML 白底黑字（放大）
上面的兩個圖像對應于在白色背景上用黑色打印“xyz”產(chǎn)生的真實像素，使用字體Arial和20 像素的字體大小。
當我們使用標準功能在畫布上打印時，我們只有灰度像素。
當我們直接在頁面上打印文本時，我們有大量不同顏色的像素；雖然在肉眼看來，角色看起來是純黑色（或深灰色）。此外，它們看起來比以前的打印方式要好得多。
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
