整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
别
1、HTTP2 采用二进制格式而非文本格式，比起文本格式，二进制格式解析起来更加高效，并且错误少。
2、HTTP2 是完全的多路复用，非有序并阻塞的----只需要一个连接即可实现并行，多路复用的意思是它能同时处理多个消息的请求和响应，HTTP1 是一个连接一次只能提交一个请求的效率比较高，多了就会变慢。
3、使用报头压缩，HTTP2 降低了开销，HTTP1 的消息头很大冗余,HTTP2 是将消息头中的不同的部分分别用不用的索引进行表示，且会用哈夫曼编码压缩字符串，最后封装成 frame。
4、HTTP2 让服务器可以将响应主动”推送”到客户端缓存中，HTTP2 中服务器会主动将资源推送给客户端，例如把 js 和 css 文件主动推送给客户端而不用客户端解析 HTML 后请求再响应。
览器解析HTML文件的过程是网页呈现的关键步骤之一。具体介绍如下：
HTML文档的接收和预处理
解析为DOM树
CSS解析与CSSOM树构建
JavaScript加载与执行
渲染树的构建
布局计算（Layout）
绘制（Paint）
因此，我们开发中要注意以下几点：
综上所述，浏览器解析HTML文件是一个复杂而高度优化的过程，涉及从网络获取HTML文档到最终将其渲染到屏幕上的多个步骤。开发者需要深入理解这些步骤，以优化网页性能和用户体验。通过合理组织HTML结构、优化资源加载顺序、减少不必要的DOM操作和合理安排CSS和JavaScript的加载与执行，可以显著提升页面加载速度和运行效率。
山姆·奥尔伯里( 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 像素的字体大小。
当我们使用标准功能在画布上打印时，我们只有灰度像素。
当我们直接在页面上打印文本时，我们有大量不同颜色的像素；虽然在肉眼看来，角色看起来是纯黑色（或深灰色）。此外，它们看起来比以前的打印方式要好得多。
*请认真填写需求信息，我们会在24小时内与您取得联系。
