Question

我有一个带有时间列的HTML表，我希望更改其值。但是，当我在document.ready（）中执行此操作时，DOM操作会严重影响我的加载时间。

是否可以在DOM加载之前更改表列单元格值？我需要用于操作的代码是 -

var time_col = rows[i].cells[TimeColumnIndex];    

//Calculate new values
var time_Str = getUpdatedValue(time_col.innerText);

//Set values
time_col.innerText = time_Str;
time_col.innerHTML = time_Str;

我很感激人们提出的任何建议，我仍然在尝试理解与DOM相关的事情，所以请随时告诉我这是否无法完成。

编辑1：

与UTC相比，getUpdatedValue（）函数只获取用户时区的差异，并添加所需的分钟数。

我已经尝试评论每一行以查看哪些行实际上增加了加载时间，并且我发现只需要花费时间的DOM操作，即以下行

time_col.innerText = time_Str;
time_col.innerHTML = time_Str;

我的HTML表格大约有1500行，因此我会遍历每一行并更改时间列的值。

Answer 1

如果出于某种原因，您需要在加载表格后立即运行代码，您可以在结束<script>代码后立即放置</table>代码

<table>
   <tbody>
     <tr><td>A</td><td>B</td></tr>
   </tbody>
</table>
<script type="text/javascript"> 
    var tables = document.getElementsByTagName("table");
    var tableAbove = tables[tables.length - 1];
</script>

Answer 2

在加载DOM之前，您无法运行在DOM上运行的代码。希望很明显，为什么会出现这种情况，因为javascript尚无法访问未加载的DOM元素。

您可以使用的选项如下：

在您要修改的DOM部分之后立即在页面中找到您的脚本。由于事物是以纯序列加载的，因此您可以在HTML文件中操作实际位于脚本之前的DOM的任何部分。
使用document.ready()代码，只需在加载完整个DOM后对表进行操作。
最初使用CSS隐藏表格，因此它不是最初可见的。使用上述两种方法之一修改它，然后在完成修改后，显示表格。这可以防止在您修改表之前显示该表。

如果在获取表的数据时涉及ajax调用，则可以通过在加载DOM之前启动ajax调用来进一步优化事物，并在完成时存储它的结果（如果DOM尚未准备好）。这将两个操作并行化，以便在加载DOM的同时获取ajax调用。然后，当ajax调用完成并且DOM已加载时，您可以将ajax结果插入DOM。

运行代码BEFORE DOM加载

编辑1：

2 个答案: