通过使用点击事件侦听器将HTML减轻50%

Lighten HTML by 50% by using click event listeners ?

本文关键字：侦听器 HTML 减轻 事件      更新时间：2023-09-26

我刚刚读了这篇文章HERE，作者说：

还要尽量保持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。

我们是如何将HTML减轻50%的？？我不太明白。有人能解释一下吗？

谢谢。

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

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

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

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

然而，我不知道这是否会对性能产生影响！当然，如果像@Ramanlfc所说的那样禁用java脚本，那将是令人失望的。但Javascript也是现代编程的一部分。如果被禁用，许多SPAs将无法工作！

如果你有100行，你会有100个标签，而不是200个

如前所述，这一定是因为没有锚定标记。问题是，你在评论中描述了其他类型（更严重）的问题，这是一个糟糕的建议。

这是我的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-属性。

相关文章：