Question

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

最初，我认为出于某种原因，PHP缓慢地执行了代码，但是如果我在页面顶部吐出一些时间戳，然后在底部吐出一些时间戳，尽管我可以观察到它们，但它们是相同的表格正在填充/尺寸不断增加，并且最终时间戳记仅在约5秒钟过去之后出现。

据我所知，是浏览器本身渲染了所有这些元素才是导致速度下降的原因？如果我执行ob_start，则输出表的内容，然后回显缓冲区的内容，我将看到相同的行为，我认为这可以加强这种行为。

我在这里不合常理还是听起来正确？如果可以，我该怎么办？

Answer 1

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

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

正如所看到的那样，这可能需要一些代码，因此，实际上，您的页面以KB为单位变大，但它会快速呈现和显示自身（因为每个“小”表都会打开，加载并轻松关闭），从而极大地改善了用户体验-与目前的情况相比，即使完全加载整个页面需要花费几秒钟的时间。

因此，与其在开头只打开<table>，不如在循环中以<tr></tr>分隔行，最后只放最后一个</table>，最后关闭表{{ 1}}，然后打开另一个。我的意思是：

更改此：

</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>

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

为避免这种情况，请将表格的CSS属性<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设置为table-layout。然后，浏览器将表的第一行作为其所有列的固定宽度和定义宽度，而无需每次都重新计算和重新呈现。因此，请在第一行中指定列的宽度。

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

有什么方法可以提高网页的呈现速度？

2 个答案: