有没有办法提高网页的呈现速度？

Question

我遇到了一个问题，我需要显示一个包含~200行的表，每行都有一个可点击的链接，触发了一些代码，当页面呈现表时，这些链接不能被点击约5秒钟，并且他们需要基本上立即点击。

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

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

我不在这里或听起来不对吗？如果是这样我该怎么办呢？

Answer 1

一些可以为您带来积极影响的提示：

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

尽管它可能看起来很矛盾，但这可能需要一些代码，所以实际上你的页面会以千字节变大，但它会呈现并显示自己非常快（因为每个“小”表都会打开，加载和关闭很容易），与现在的情况相比，改善了用户体验 - 即使完全加载整个页面需要花费更多的时间。

所以，而不是在开始时只打开一个<table>，在<tr></tr>内部循环分离线，并且只在最后放置最终的</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。然后浏览器将表的第一行作为其所有列的固定和定义宽度，不需要每次都重新计算和重新渲染。因此，请指定第一行中列的宽度。

Answer 2

事件委托使用类似于=>

document.querySelector('#TableID').onclick = function(e) {
  if (!e.target.matches('a')) return;
  e.stopPropagation();

  let val_ID_NUMBER = e.target.dataset.id_number;  // lower case only

  if (val_ID_NUMBER)  // if this one exist...
  {
    // do your stuff with ..
  }
}