HTML整洁可以通过归一化它们，剥离注释，按字母顺序排序，排序元素属性来清理HTML文档，并输出一致的漂亮打印的标记。结果是HTML文档，具有较少唯一的数据，具有更一致性和重复的模式。与较为整齐的组织文件相比，这产生了改善的Gzip /缩小压缩率。
您可以通过预处理和重新安排不影响文档演示文稿或语义的HTML元素来取得以下一步，并获得更好的压缩率。元数据元素
类似的数据压缩良好，但类似的数据短的字节距离相隔更好地压缩。这是您需要了解相关压缩算法如何为本文工作的所需。我会在文章末尾恢复进一步的技术解释。
网页通常需要包括重复的元数据至确保兼容性拥有流行的yabo88软件下载应用和服务。
元数据元素的文档顺序<链接>那</code>（具有异常）不会影响文档的显示方式。这些元素可以无损地重新排序。在我的实施中，我选择留下来<code class="notranslate" translate="no"><script></code>和<code class="notranslate" translate="no"><风格></code>元素未修改的所有其他元数据元素作为其顺序<em>可能</em>很重要。</p>
<p>的顺序<code class="notranslate" translate="no"><链接rel =“stylesheet”></code>如果您的布局取决于样式表覆盖，则元素会影响样式表解析。这意味着您正在向客户端发送冗余数据，并且您应该在进行本文中讨论的优化之前停止和修复。该<code class="notranslate" translate="no"><noscript></code>-Wrapped懒人加载<code class="notranslate" translate="no"><链接rel =“stylesheet”></code>当你移动时，反模式也可能破裂<code class="notranslate" translate="no"><链接></code>元素关于。</p>
<p>关于兼容性要求的第二个快速记录：<code class="notranslate" translate="no"><meta charset =“UTF-8”></code>元素必须显示为第一个子元素<code class="notranslate" translate="no"><head></code>追求与今天仍在使用的古代图书馆和工具的兼容之后。</p>
<h3>实施</h3>
<p>HTML元素应该已经在每个元素上的单行中标准化，其中字母地排序元素属性。同样，这是HTML整洁的东西，或者漂亮打印或HTML缩小工具可以为您处理。您可以在该基础上构建，并提取所有内容<code class="notranslate" translate="no"><meta></code>那<code class="notranslate" translate="no"><meta></code>，和<code class="notranslate" translate="no"><title></code>元素，最后一切<code class="notranslate" translate="no"><链接></code>来自<code class="notranslate" translate="no"><meta></code>元素，最后一切<code class="notranslate" translate="no"><head></code>文件的一部分。</p>
<p>一旦您分开了该元素列表，请添加<code class="notranslate" translate="no"><meta charset =“UTF-8”></code>元素回文档并将其从列表中删除。然后，您需要做的就是对列表进行排序并将所有内容放回文档中。</p>
<p>在考虑排序顺序时，唯一的<code class="notranslate" translate="no"><标题>示例标题</ title></code>元素可以分类为<code class="notranslate" translate="no"><meta content =“示例标题”名称=“标题”></code>。此元素仅使用一次，但此排序顺序将其与其他元数据元素一起放置完全或部分复制其值。</p>
<p>开放图协议<a href="html-link-metadata.html" title="元素以表达联系关系">烦恼地使用A.<code class="notranslate" translate="no"><meta></code>元素以表达联系关系</a>而不是奉献<code class="notranslate" translate="no"><链接></code>元件。你可以通过移动进一步优化东西<code class="notranslate" translate="no"><meta></code>其值是底部的URL的元素<code class="notranslate" translate="no"><meta></code>元素（就在第一个之前<code class="notranslate" translate="no"><链接></code>元素）。</p>
<aside>
<ins class="adsbygoogle" data-ad-client="ca-pub-1835247814769107" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="8623261132" style="display:block"></ins>
</aside>
<p>这些预处理优化应产生可测量的文档压缩率。以下是使用本文中概述的逻辑排序的短示例文档：</p>
<figure class="code horizontal-scroll" resource="#article-source-code-example1" typeof="cc:Work schema:SoftwareSourceCode">
<pre><code class="notranslate" translate="no"><meta charset =“utf-8”> <meta content =“示例标题”属性=“og：title”> <title>示例标题|网站</ title> <meta content =“示例”属性=“og：描述”> <meta content =“示例”名称=“描述”> <meta content =“https://example.com/”property =“OG：URL“> <Link Href =”https://example.com/“rel =”canonical“> <link href =”/ assut / style.css“rel =”stylesheet“> <link href =”/资产/favicon.svg“rel =”图标“></code></pre>
</figure>
<p>你可能想学习你的内容<code class="notranslate" translate="no"><head></code>文档中的部分并应用进一步的优化。然而，删除冗余标签并通常清理它可以很好地为您提供比实现本文中讨论的微优化的更好的最终结果。</p>
<h3>所有这些保存是多少？</h3>
<p>我不会说谎。这不是一个神奇的解决方案，可以为您节省大量字节。实现这一点的先决条件，例如归一化文档和排序元素属性，可能会产生比这更好的压缩增益。您应该看到更好的结果您的文档包含更多元数据。</p>
<p>但是，这里讨论的方法可以自动化。这可能仅与您实现Web优化库，或为博客编写文章而相关。</p>
<p>我将本文中讨论的元数据应用于本博客上的每个页面中的本文中讨论的预处理优化。它从每个页面的压缩文件大小中保存了26个字节的中位数。这是平均全压缩文件大小的0,58％。未压缩文件的大小不会随着它们包含相同数量的字节而改变。</p>
<p>我需要简要介绍令人缩小的算法如何更好地解释为什么这些优化步骤完全保存任何数据。</p>
<p>放气压缩在两个阶段工作。第一阶段寻找重复的字节序列。出于我们的目的，您可以将其视为识别文本内相同子字符串的重复。放气替换重复的序列与后引用，以靠近其看到序列（距离）和重复序列的长度以及重复序列的长度（反对引用）的长度。此信息讲述了解压缩器在哪里可以找到数据以及它是多少要复制。</p>
<p>第二阶段使用称为霍夫曼编码的比特减少技术。基本上，常用字节被分配了更短的代码，并且rarer rever rento rens（需要更多字节来存储它们）。有<a href="https://tools.ietf.org/html/rfc1951" rel="external">更重要的是</a>而不是那个是短版本。</p>
<p>对于文本文档，这基本上基于文件中的字符在文件中常见的字符构建新的压缩字符编码表。但是，相同的技巧用于编码用于文件中的去重复回复引用的距离和长度信息。</p>
<p>换句话说，通过对元数据元素进行排序，您可以以增加重复的方式重构文档并减少相同字节序列的副本之间的距离。这使得可缩小以节省几个字节以更有效地减少的反引用编码此信息。</p>
</div>
<footer class="entry-footer">
<aside class="entry-footer-support">
<a aria-role="button" class="entry-footer-bmac" href="https://www.buymeacoffee.com/aleksandersen" rel="external"><span>给我买咖啡</span></a>
</aside>
<p class="entry-footer-correction"><a href="mailto:correction+f115568e41644fa99e2886736ac175a5@ctrl.blog?subject=Correction%20for%20%2Fentry%2Fhtml-meta-order-compression.html" title="报告错误/更正">报告错误/更正</a></p>
<span>yabo88 app主题：</span>
<ul class="andli scili">
<li><a class="p-category" href="../topic/html.html" rel="tag">HTML.</a></li>
<li><a class="p-category" href="../topic/compression.html" rel="tag">压缩</a></li>
</ul>
</footer>
</article>
</main>
<aside class="doc-container recommendations">
<div class="entrylist">
<h3>相关阅读</h3>
<article class="has-image">
<a aria-labelledby="entry1" href="html-link-metadata.html" rel="related" tabindex="0">
<picture>
<img alt height="54" loading="lazy" src="../media/hero/linked-metadata.svg" title="“Linked Metadata”" type="image/svg+xml" width="96">
</picture>
<header>
<h4 id="entry1">URL不属于<code><meta></code>元素</h4>
</header></a>
</article>
<article class="has-image">
<a aria-labelledby="entry2" href="the-aring-element.html" rel="related" tabindex="0">
<picture>
<source sizes="(min-width:920px) 192px, 96px" srcset="../media/hero/aring-element.96x54.avif 96w, ../media/hero/aring-element.192x108.avif 192w, ../media/hero/aring-element.288x162.avif 288w, ../media/hero/aring-element.384x216.avif 384w" type="image/avif">
<source sizes="(min-width:920px) 192px, 96px" srcset="../media/hero/aring-element.96x54.webp 96w, ../media/hero/aring-element.192x108.webp 192w, ../media/hero/aring-element.288x162.webp 288w, ../media/hero/aring-element.384x216.webp 384w" type="image/webp">
<source sizes="(min-width:920px) 192px, 96px" srcset="../media/hero/aring-element.96x54.jpeg 96w, ../media/hero/aring-element.192x108.jpeg 192w" type="image/jpeg">
<img alt class="dark-color-scheme-invert" height="54" loading="lazy" src="../media/hero/aring-element.192x108.jpeg" style="background-color:rgb(236,237,234)" title="“The <å> element”" type="image/jpeg" width="96">
</picture>
<header>
<h4 id="entry2">有关<code><Å></code>元件</h4>
</header></a>
</article>
<article class="has-image">
<a aria-labelledby="entry3" href="hr-asterism.html" rel="related" tabindex="0">
<picture>
<img alt height="54" loading="lazy" src="../media/hero/asterism.svg" title="“Asterism symbol”" type="image/svg+xml" width="96">
</picture>
<header>
<h4 id="entry3">使用群体休息</h4>
</header></a>
</article>
<article class>
<a aria-labelledby="entry4" href="mozilla-readability-metadata.html" rel="related" tabindex="0">
<header>
<h4 id="entry4">Mozilla可读性如何在Firefox 63中提取元数据的变更</h4>
</header></a>
</article>
</div>
</aside>
<aside>
<ins class="adsbygoogle" data-ad-client="ca-pub-1835247814769107" data-ad-format="horizontal" data-ad-slot="4696959042" data-full-width-responsive="true" style="display:block"></ins>
</aside>
</div>
<footer id="page-footer">
<div class="page-footer-promo">
<form action="https://email.ctrl.blog/?subscribe" class="cta-email page-footer-cta" method="post">
<input name="sub" type="hidden" value="mar">
<h6>从CTRL博客获取每周电子邮件更新</h6>
<div>
<input aria-disabled="true" name="name" placeholder="Name" type="text" value>
<input aria-label="Email address" name="email" placeholder="you@example.email" required type="email">
<button type="submit">订阅</button>
</div>
</form>
<ul class="page-footer-subscribe">
<li><a href="https://twitter.com/CtrlBlog" rel="external me noopener" target="_blank" title="推特">推特</a></li>
<li><a href="../subscribe.html">通讯</a></li>
<li><a href="//www.tianyase1.com/feed/latest.atom" target="_blank" title="饲料" type="application/atom+xml">饲料</a></li>
<li><a href="https://feedly.com/i/subscription/feed/https%3A%2F%2Ffeed.ctrl.blog%2Flatest.atom" rel="external noopener" target="_blank" title="提供">提供</a></li>
<li><a href="https://newsblur.com/site/5241507/ctrl-blog" rel="external noopener" target="_blank" title="新娘">新娘</a></li>
</ul>
</div>
<div aria-label="copyright notes" class="small-print" role="contentinfo">
<div about="//www.tianyase1.com/media/hero/html-meta-elements.svg" id="WebStatement=/media/hero/html-meta-elements.svg" typeof="cc:Work schema:ImageObject">
<span property="dc:rights">图片 ”<a href="../media/hero/html-meta-elements.svg" property="schema:contentUrl" type="image/svg+xml"><span property="schema:name">HTML元元素</span></a>“（<a href="//www.tianyase1.com/entry/html-meta-order-compression.html" rel="cc:attributionURL nofollow">归因链接</a>）©<time datetime="2019-10-14"><span property="schema:copyrightYear">2019年</span></time><span property="schema:copyrightHolder" resource="https://www.daniel.priv.no/" typeof="schema:Person"><a href="https://www.daniel.priv.no/" rel="external nofollow"><span property="cc:attributionName schema:name">yabo88软件下载</span></a></span>在a下获得许可 <a href="https://creativecommons.org/licenses/by/4.0/" rel="cc:license dc:license external license schema:license" title="CC乘4.0许可证">CC乘4.0许可证</a>。</span>
</div>
<div about="//www.tianyase1.com/entry/html-meta-order-compression.html" typeof="cc:Work">
<span about="#article-source-code-examples" property="dc:rigths">除非另有说明，否则本文中印刷的源代码是在a下获得的<a href="https://creativecommons.org/publicdomain/zero/1.0/" rel="cc:license external license nofollow schema:license">CC0 1.0许可证。</a></span>
<span property="dc:rigths">Ctrl博客©<time datetime="2020" property="schema:copyrightYear">2020.</time><span property="schema:copyrightHolder" resource="https://www.daniel.priv.no/" typeof="schema:Person"><a href="https://www.daniel.priv.no/" property="dc:creator" rel="external schema:sameAs schema:url"><span property="schema:name">yabo88软件下载</span></a>。</span></span>
</div>
</div>
<nav>
<ul>
<li><a href="../about/">关于</a></li>
<li><a href="../about/privacy-policy.html">隐私政策</a></li>
<li><a href="../about/colophon.html">联邦罗</a></li>
<li><a href="../about/license.html">许可</a></li>
</ul>
</nav>
</footer>
</body>
</html>
