Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

阴魂不散的空文本节点

  文档中总是存在大量的空文本节点,我们越是严格遵循缩进就越容易出现无用的空文本节点。这些空文本节点还不是装饰,因为 CSS 中可以通过 white-space 属性来将它们正常显示,所以还能轻易将它们压缩掉。它们仿佛一群挥之不去的阴魂,遍布在文档的每个角落。

就算看不见,它也就在那里

  当我们给元素添加 after 和 before 时就可以观察到空文本节点的存在,下面是一组测试 <!DOCTYPE html>
<style>
div { font-size: 32px; font-family: monospace; }
div:before { content: "b"; }
div:after { content: "a"; }
</style>

<div>x</div>

<div>
  x
</div>

<div><!--
  -->x<!--
--></div>
  这一组测试代码中有三个 DIV,第一个是内部没有空文本节点的,所以 before/after 直接连在内部的文字上。而第二个 DIV 则遵循标准缩进,缩进带来了空文本节点将 before/after 与 DIV 本身的内容隔开了一个空格。第三个 DIV 中我们使用 HTML 注释将这些空文本节点注释掉,这是有效的,也是目前唯一安全有效的文本节点清理方案。

考虑干掉它们么?

  空文本节点实在太多,手动根本清理不完,那么就要考虑是不是应该在 HTML 压缩的时候把它们干掉,因为绝大部分空文本节点都是无用的,它们确实存在于 DOM 树中,腆着那我们看不见的脸占着内存。如果想干掉它们也确实可以,但在此之前还统一一下代码风格,比如禁止所有对空文本节点依赖的用法,所有文本节点都必须显式定义。只有这样才能避免 HTML 压缩出问题,也只有这样才能完全干掉那些无用的空文本节点。

现状

  其实目前很少有项目和空文本节点过不去的,大家都对它的态度普遍是视而不见(它们本来就看不见嘛)。这些空文本节点到底占了多少内存我目前也没有做过性能测试,手上没有数据。如果不是洁癖特别严重,建议暂时对它们手下留情,反正不处理也不会出问题,反而处理可能带来问题。

网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^