0

我必须使用 jquery 插件 Datatables 和 twitter bootstrap css 渲染多达 1500 行。在每一行中，有一个表，最多可包含 50 行。

使用chrome开发者工具分析器和测试，渲染是一个真正的问题。例如，我有 250 个项目显示 219861 选择器匹配 .table th、.table td。

我该如何优化呢？

我从bootstrapcdn检索 twitter 引导程序

4

3 回答 3

0

我是一名框架开发人员，我可以分享一些我在这一刻遇到并记得的事情

  1. 在表格布局中写入表格时，不要使用 

     'box-sizing:border-box'

    而是使用“内容框”，否则如果您指定或未指定边框，它将在行之间而不是列之间产生间隙。没有样式可以帮助您删除它。这在实现嵌套表格布局时非常重要

  2. 即使您使用带有表格布局的 DIV，请注意“最大宽度”在某些 mozilla 版本中无法正常工作，因为您可能必须维护一个占据 100% 宽度和 100% 高度的“包装器”DIV细胞。

  3. 维护单元格内的块杠杆包装器，如果它是表格，则对其应用皮肤，因为悬停和焦点将无法正确应用。示例：在某些现代浏览器中也观察到半填充悬停皮肤。

  4. 虽然动态嵌入这些元素而不是动态创建元素并附加、准备 HTML 字符串并附加它，但它确实表现得非常好......我已经观察到这一点。但是修改 html 渲染器可能看起来很脏，但我们需要的只是性能

这些是我在这个时候记得的一些事情。如果我在某个地方错了，请纠正我..

建议如果您也针对移动浏览器，那么请使用表格布局，直到您在处理 div 布局方面具有良好的专业知识。Floats在某些移动设备中无法正常工作。并且表格也可以通过移动设备中的媒体查询正确缩放。

于 2013-02-14T16:51:08.367 回答
0

我最近遇到了类似的情况，表格数据太多，不得不通过分页来解决。HTML 必须在开始渲染之前提取所有这些信息并构建那个巨大的表格，因此速度非常慢。

于 2013-02-15T11:42:59.743 回答
0

最后，我将显示的最大行数限制为 200。不允许“显示所有内容”。

我也会尝试优化css。似乎有很多我不使用的引导 css 的定义。

于 2013-02-15T16:13:34.550 回答