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

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

我最初认为，无论出于何种原因，在PHP中缓慢地浏览代码是原因，但如果我在页面顶部和底部吐出一些时间戳，它们都是相同的，尽管我可以看到表正在填充/不断增大，并且最终的时间戳只在5秒后出现

所以，据我所知，是浏览器本身呈现了所有这些元素，才是导致速度放缓的原因？如果我执行ob_启动，输出表的内容，然后回显缓冲区的内容，我看到的行为与我认为加强这一点的行为相同

---

我在这里是不是有点不对劲，或者这听起来对吗？如果是这样的话，我能做些什么呢？

事件委派的用法是这样的=>

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 ..
  }
}

---

一些可以给你带来积极影响的提示：

1）一些浏览器首先将表加载到内存中，只有在找到结束标记

时才会呈现它。加载表时，用户看不到任何内容。一个可能的解决方法是，不要只有一个大表，许多小表，每个表都是快速打开和关闭的，并且有小块数据

正如paradoxal所看到的，这可能需要一点代码，因此在实际应用中，您的页面会以KB为单位变大，但它会快速呈现和显示自己（因为每个“小”表都会轻松打开、加载和关闭），大大改善了用户体验——即使与现在的情况相比，完全加载整个页面需要几秒钟的时间

因此，不要在开始时只打开一个

，而是在分隔行中按

循环，只在末尾放一个最后的

，最后关闭表并打开另一个。我的意思是：

更改此项：

<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属性

表布局

设置为

固定

。然后浏览器将表格的第一行作为其所有列的固定和定义宽度，而不需要每次重新计算和渲染。因此，在第一行中指定列的宽度。

在PHP完成构建页面和在浏览器中完全呈现页面之间，会发生很多事情。您可以使用浏览器检查器的“网络”选项卡查看花费的时间。Apache必须发送它。互联网必须通过多个路由器将数据包传输给用户，PC必须缓冲数据包并可能对其进行正确的重新排序，然后浏览器必须呈现收到的HTML。举个例子，如果有这么多东西需要点击这个表，那么应该更好地使用事件的委托。您做了什么来缓存这个表的结果？没有什么规定数据必须是动态获取的。所有这些都可以预先渲染，单击事件只显示或隐藏已经存在的数据。当然，如果看不到代码，很难判断您在这里做什么。很抱歉，延迟了对此的响应，我只是尝试了一下，但不幸的是，没有看到区别。不过，如果这是我今后要做的事情，我会记住这一点。最终的罪魁祸首是有人在它自己的脚本元素中回显console.log，比如每行20次。一旦我删除它，它会立即渲染。谢谢你的帮助。恐怕不行，我两个都试过了，直到所有玩家在各自的表格中呈现出来，我仍然无法点击链接。我也执行了MrJ的建议，但没有效果。谢谢你的回复。仅出于测试目的，请尝试关闭链接或文本css样式。也许所有这些允许你点击链接的延迟都因为你的文本布局风格而变得复杂。如果你确实发现了一些积极的影响，那么你必须找到一种在不降低用户体验的情况下应用样式的方法。在我的一次测试中，我删掉了所有的table/tbody/etc.元素，只是以未设置样式的跨距和div呼应了所有内容，并立即呈现出来。我认为这让我走错了路，因为最终真正的罪魁祸首是有人在它自己的脚本元素中重复了console.log，比如每行20次。一旦我删除它，它会立即渲染。谢谢你的帮助，很好！很高兴它终于成功了。恭喜你解决了这个问题。继续编码。