Question

我正在开发一个网站，我曾经使用无序列表进行导航，但前段时间我发现了一些来自雅虎开发者博客的文章。在本文中，他们将解释如何改善您的加载时间，并且有很多性能改进方法和技巧。现在我试图谷歌关于html的语义和wheter使用ul链接列表或只是'div'中的一堆'a'标签或任何其他语义上适合目的元素。实际上每个人都鼓励使用它们，对我来说它已经感觉很自然，但我已经计算了我的链接，而且我已经有大约120个（可能更多）链接（每个内部列表元素）。你有什么建议？或者有人可以推荐一篇关于它的好文章吗？

<ul>
     <li>
         <a href="#">Link</a>
     </li>
</ul>

or

<div>
     <a href="#">Link</a>
</div>

P.S。哦，不要对我的链接感到惊讶他们在那里是有原因的：）

Answer 1

从CSS渲染的角度来看，我会选择无序列表，因为我认为它会导致更清晰的CSS;此外，您的网站可能会有更多div，所以当浏览器搜索匹配时，它不必尝试匹配每个div样式。但是，这真的是一个微优化，你不应该担心它，除非你对页面进行概述并看到它的问题。

至于改善页面性能，还有许多其他途径可以降低（缓存，缩小，减少往返）。我建议你阅读this。这是Google对网络效果最佳做法的看法。另外，请查看您喜欢的网络浏览器（应该是Chrome）中的一些分析工具。

Answer 2

在这种情况下，li ul的最佳实践，为了更多的解释，我认为这篇文章对你有用Why should I use 'li' instead of 'div'?

Answer 3

我不认为您在div或列表中的120个链接会减慢您的页面速度，您可以使用css控制div或列表，您不需要js来形成它们。需要考虑的事项是......每页有多少内容，托管您网站的人数，每页有多少图像及其大小，html文件的总大小，最重要的是数据库调用。

Answer 4

通常导航不会对页面加载时间增加太多。

出于其他原因，你应该坚持无序列表。一些屏幕阅读器软件和搜索引擎已经知道无序列表用作导航。

没有激活CSS的人也会将列表识别为导航。

如果您使用HTML5，则另外将导航包装在<nav>标记

中

我的Js的HTML大小有多重要（对于我的页面加载时间更重要）

4 个答案: