Question

我刚刚阅读了这篇文章 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％的？我不太明白。谁能解释一下？

谢谢。

Answer 1

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

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

但是这里有两个标签（ a 和 li 标签）：

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

但是，我不知道这是否会对性能产生影响！当然，如果java脚本被禁用，那将会令人失望，因为@Ramanlfc说。但Javascript也是现代编程的一部分。如果它被禁用，很多SPA都不会工作！

Answer 2

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

如上所述，必须是缺少锚标签。问题是，你在评论中描述了其他类型（更严重）的问题，这是一个不好的建议。

Answer 3

这是我的2美分。

如果目标是在没有任何gzipping的情况下减轻/缩小HTML并依赖JavaScript进行导航，那么我会发疯并做类似的事情：

<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-个。

使用click事件监听器将HTML减轻50％？

3 个答案: