为什么table布局在逐渐被淘汰？

 

语义化标签

1. 因为搜索引擎看不见视觉效果，只能通过代码标签来判断内容的语义，如果能用更语义的标签，可以提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
2. 正如html诞生时的初衷那样，各个标签的本义就是希望能在特定的地方使用合适的标签，而不是去用样式来表现一个不语义的标签。html5也新增了更多的语义化的标签，通过html5的标签，我们可以更完美的表现原本需要实现的结构。
3. 此外，语义化的命名能够使我们在多人协作一个项目时更加有序和快捷，而不需要去纠结另一位伙伴的CSS命名是什么意思。如果是个人项目，也便于后期其他同事的修改，语义化的命名时一个项目的可读性更高。

table布局有如下特点：

1. 代码量大，结构混乱；
2. 标签语义不明确，对搜索引擎不友好。

　　当下div+css布局已成为主流，其核心思想就是通过css来控制网页中元素的样式。css布局可以摒弃table布局中为强制定位而添加的大量标签，从而让html可以从样式、结构混杂的局面中挣脱出来，专注于结构。css布局弱化了标签的“布局能力”，将“布局”完全放到了样式中进行控制，使标签恢复了原来的作用。css布局具有代码量少、页面精简、语义清晰等特点。代码量少，浏览器的加载就会更快，语义清晰就会对搜索引擎更友好。因此，css布局取代table布局是必然的趋势。

　　但css布局只是web标准的一部分，html才是最重要的，结构才是重点。因此正确的做法是，先确定html，确定语义的标签，再来选用合适的css。

在写HTML代码时应该注意：

• 尽可能少的使用无语义的标签div和span；
• 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
• 不要使用纯样式标签，如：b、font、u等，改用css设置。
• 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
• 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
• 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
• 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

重绘（Repaint）和回流（Reflow）

重绘和回流是渲染步骤中的一小节，但是这两个步骤对于性能影响很大。

• 重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
• 回流是布局或者几何属性需要改变就称为回流。

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。

减少重绘和回流

• 使用 translate 替代 top

  <div class="test"></div>
  <style>
      .test {
          position: absolute;
          top: 10px;
          width: 100px;
          height: 100px;
          background: red;
      }
  </style>
  <script>
      setTimeout(() => {
          // 引起回流
          document.querySelector('.test').style.top = '100px'
      }, 1000)
  </script>

• 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）

• 把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次，然后再把它显示出来

• 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量

  for(let i = 0; i < 1000; i++) {
      // 获取 offsetTop 会导致回流，因为需要去获取正确的值
      console.log(document.querySelector('.test').style.offsetTop)
  }

• 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局

• 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame

• CSS 选择符从右往左匹配查找，避免 DOM 深度过深

• 将频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。比如对于 video 标签，浏览器会自动将该节点变为图层。