我们的软件中有一个自定义查询部分,客户可以自己设计查询,然后我们将其导出到 html 表。问题是,如果它超过 1000 行,则速度非常慢,尤其是在 IE 中。查询执行很快,但渲染需要时间,即使之后我们向下滚动它也很慢。table
我的朋友建议我使用div
element ,而不是 html 。
在我进行大修改之前,任何人都可以建议我吗?
确实,一般来说,如果您使用 div 代替表格元素,您将获得性能。这是因为,默认情况下,大多数浏览器使用自动表格布局算法,因此表格及其单元格的宽度取决于其内容。
但是如果你有表格数据,语义上正确的表示方式是使用表格。然后,您可以使用table-layout
CSS 属性更改用于布局表格元素的算法,而不是使用 div:
table-layout: fixed
根据https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout,
表格布局:固定
表格和列的宽度由
table
和col
元素的宽度或第一行单元格的宽度设置。后续行中的单元格不影响列宽。在“固定”布局方法下,一旦下载并分析了第一行表格,就可以渲染整个表格。与“自动”布局方法相比,这可以加快渲染时间,但随后的单元格内容可能不适合提供的列宽。任何具有溢出内容的单元格都使用溢出属性来确定是否剪切溢出内容。