通过使用单击事件侦听器将HTML减少50％？

Question

我在这里阅读这篇文章，作者说：

还请尝试使您的HTML结构尽可能简单。 请记住以下几点：

<ul>
   <li><a href="somewhere">Some text</a></li>
</ul>

可以始终替换为：

<ul>
   <li onclick="window.location.href='somewhere'">Some text</li>
</ul>

我们只是将HTML结构简化了50％。 如果您有100行，那么您将有100个标签而不是200个标签。（当然，在内联onclick上我甚至会使用侦听器。

我们如何真正减轻了50％的HTML负担？ 我不太明白。 有人可以解释吗？

谢谢。

Answer 1

我认为作者想声明每个列表项中只有一个 html标签（仅li标签）：

  <li onclick="window.location.href='somewhere'">Some text</li>

但是其中有两个标签（ a和li标签）：

<li><a href="somewhere">Some text</a></li>

但是我不知道这在性能上是否有所不同！ 如果@Ramanlfc说禁用Java脚本，那当然会令人失望。 但是Javascript又是现代编程的一部分。 如果禁用了许多SPA，它们将无法工作！

Answer 2

如果您有100行，那么您将有100个标签而不是200个标签

如前所述，这必须与锚标签的缺失有关。 问题是，您在注释中描述了其他类型的（更严重的）问题，这是一个错误的建议。

Answer 3

这是我的2美分。

如果目标是在不进行任何gzip压缩和依靠JavaScript进行导航的情况下减轻/缩小HTML，那么我会发疯并执行以下操作：

<ul>
   <li data-go="somewhere">Some text</li>
</ul>

正如作者所说：

（当然，我会在嵌入式onclick上使用事件侦听器。）

在JavaScript中执行以下操作：

var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
    lis[i].addEventListener('click', function() {
     window.location.href = this.getAttribute('data-go');
    });
};

但是，正如您可能已经猜到的那样，这就是我绝望的高度。 当我处于节省字节数的趋势时，我将继续使用class属性存储定位位置而不是data-位置。