javascript - 有什么办法可以提高网页的渲染速度？

Question

我遇到了一个问题，我需要显示一个大约 200 行的表格，并且每一行都有一个可点击的链接，该链接会触发一些代码，并且当页面呈现表格时，这些链接在大约 5 秒内无法点击，并且他们需要基本上可以立即点击。

我最初认为无论出于何种原因，缓慢地浏览 PHP 中的代码是原因，但是如果我在页面顶部吐出一些时间戳，然后在底部吐出它们是相同的，尽管我可以看到表格被填充/ 越来越大，最终时间戳仅在大约 5 秒后出现。

所以据我所知，是浏览器本身渲染了所有这些元素，这是导致速度变慢的原因吗？如果我执行 ob_start，输出我的表的内容，然后回显缓冲区的内容，我会看到相同的行为，我认为这强化了这一点。

我在这里偏离了标记还是听起来正确？如果是这样，我该怎么办？

标签： javascriptphphtml

Answer 1

一些可以对您产生积极影响的提示：

1）一些浏览器首先将表格加载到内存中，并且仅在找到结束标记时才呈现它</table>。加载表格时，用户看不到任何内容。一种可能的解决方法可能是，而不是只有一个大表，许多小表，每个小表都可以快速打开和关闭，并带有小块数据。

可能看起来很矛盾，这可能需要一点代码，所以实际上你的页面会以千字节为单位变大，但它会非常快速地呈现和显示自己（因为每个“小”表都会轻松打开、加载和关闭)，极大地改善了用户体验——即使与您现在的情况相比，完全加载整个页面需要更多的时间。

因此，不要只<table>在开始时打开一个，而是在分隔线内循环，<tr></tr>并且仅在最后放置一个 final </table>，毕竟关闭表格</tr>并打开另一个。我是说：

改变这个：

<table>
   <tr><td> ... your contents here ... </td></tr>
   <tr><td> ... your contents here ... </td></tr>
   <tr><td> ... your contents here ... </td></tr>
   <tr><td> ... your contents here ... </td></tr>
   ... etc
</table>

对此：

<table><tr><td> ... your contents here ... </td></tr></table>
<table><tr><td> ... your contents here ... </td></tr></table>
<table><tr><td> ... your contents here ... </td></tr></table>
<table><tr><td> ... your contents here ... </td></tr></table>
... etc

2）如果你不能实现上面的第一个建议，但是可以定义表格每列的宽度，那么一个小技巧可以导致你的表格快速渲染：当浏览器正在渲染表格并且它发现如果单元格需要更多空间，它将重新渲染整个表格，并增加特定列的宽度。如果表格包含大量数据，浏览器可能会花费大量时间来重新渲染（每次需要修复）表格。

为避免这种情况，请将表格的 CSS 属性设置table-layout为fixed. 然后浏览器会将表格的第一行作为其所有列的固定和定义宽度，不需要每次都重新计算和重新渲染。所以指定第一行的列宽。