HTML：优化显示好友的方式

我想为以下HTML输出创建一个优化的结构

rite现在我使用的是这种结构：

<div> 
    <div style="float:left; padding:5px;"> 
        <img src="avatar_url">
    </div> 
    <div style="float:left; padding:5px;">
        Name <br /> 
        Current Mood
    </div>
    <div class="clr"></div>
    <div align="right">
        Online Status
    </div>
</div>

名称

当前情绪
在线状态

---

但在某些情况下，我必须在一个页面上显示数千个朋友，这就是为什么我试图优化结构并从代码中删除不必要的标记。

除了删除头像img周围的

div

（你能在

img

元素本身上设置浮动/填充吗？）之外，你能做的不多

---

但是，您可以通过为

float:left；填充：5px

并使用该类而不是完整样式数千次。

这相当简单。根据你需要的想象力，几乎所有的东西都可以被剥去：

<div class="friend">
    <img ... />
    <hx>FULL NAME</hx>
    <p>Current Mood</p>
    <p class="status">Online Status</p>
</div>

---

您不能在那里删除很多内容，但您肯定可以用一个类替换style属性

class="left"

与

你也可以替换

<div class="clr"></div>

与

---

无论如何，加载时间不会有太大的变化。

您不能对结果进行分页吗

<div class="user">
  <img src="avatar.gif" class="user-avatar" />
  <h1 class="user-name">Name</h1>
  <h2 class="user-mood">Current mood.</h2>
  <div class="user-status">Online Status</div>
</div>

名称
当前情绪。
在线状态

---

这在技术上是少了几个标记，但是……

更少的标记不一定会产生更快的渲染。您必须在几个不同的浏览器中多次分析多个布局，以了解现实情况。我怀疑无论你做什么，几千件东西的展示都会很慢。

<div class="clr"></div>

<div class="clr" />

<div class="user">
  <img src="avatar.gif" class="user-avatar" />
  <h1 class="user-name">Name</h1>
  <h2 class="user-mood">Current mood.</h2>
  <div class="user-status">Online Status</div>
</div>