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

语义化标签

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

table布局有如下特点：

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

　　当下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 标签，浏览器会自动将该节点变为图层。

posted @ 2019-09-04 10:54 Olina_Chenry 阅读(879) 评论(0) 收藏举报

刷新页面返回顶部

程羚