如何解决JavaScript延迟导致随机用户评论模块加载过慢的问题

问题根本原因 #

你当前使用的window.onload事件需要等待页面所有资源（包括图片、字体、第三方嵌入资源、样式文件等）全部加载完成后才会执行内部代码，这就是评论区延迟10秒才渲染的核心原因。

优化方案 #

1. 替换代码触发时机 #

将window.onload替换为DOMContentLoaded事件，该事件仅需要等待HTML DOM结构解析完成就会触发，无需等待图片等体积较大的静态资源加载，调整后评论区基本可以在DOM解析完成后立刻渲染，耗时可以降到1秒以内。

2. 简化冗余代码结构 #

原有代码中大量重复的HTML硬编码会增加JS文件体积，也会拖慢执行效率，可以将评论内容提前存入数组，根据随机数直接调取对应内容，大幅降低代码冗余度。

3. 调整脚本引入位置 #

将该JS脚本放到页面</body>闭合标签之前引入，不要放在<head>标签内，这样脚本执行时评论区的DOM元素已经解析完成，可以直接操作，进一步降低渲染延迟。

进阶优化（完全消除延迟） #

如果想要实现零等待，建议将随机评论的逻辑放到服务端实现，页面返回时就直接把对应评论的HTML嵌入到页面中，不需要前端JS执行渲染，用户打开页面就能直接看到评论内容。

优化后代码示例 #

JavaScript代码 #

/* 随机展示评论逻辑 */
// 预先存储所有评论组，按顺序填入原有4组评论内容即可
const reviewGroups = [
  [
    `<div class='feature-testimonial'><span class='badge badge-success'>Feature Review</span><br/><i>I LOVE And Bible. It is the best Bible app out there. I have Logos and Olive Tree as well for a few copyright resources, but And Bible is my daily Bible.</i> <br/> <b>Jared Hood, OT Lecturer, Academic Dean: Presbyterian Theological College <br/> Executive Editor: Reformed Theological Review</b> <br/> </div><hr/>`,
    `<i>This app has come a long way. It is now my favorite study tool on Android platforms. Excellent work! The September 2021 update is great; this project continues to impress me!</i> <br/> <b>-J.B., AndBible user</b> <br/> <span class='fa fa-star checked'></span><span class='fa fa-star checked'></span><span class='fa fa-star checked'></span><span class='fa fa-star checked'></span><span class='fa fa-star checked'></span> <hr/>`,
    `<i>This is an excellent, powerful, and free resource for studying the word of God. I love how the interface design is clean and simple, yet the wealth of information accessible to you is so extensive. I use it as an invaluable reference tool for commentaries, Greek translation, and Spanish and German translation when on gospel trips to South America and Germany. Though this app isn't perfect, it accomplishes its various functions very well. Thank you!</i> <br/> <b>-G.A., AndBible user</b> <br/> <span class='fa fa-star checked'></span><span class='fa fa-star checked'></span><span class='fa fa-star checked'></span><span class='fa fa-star checked'></span><span class='fa fa-star checked'></span> <hr/>`,
    `<i>The And Bible app is a treasure trove of resources for Bible study.  This is the one app I use daily, whether it be for daily reading, family devotion, personal or group Bible study, or sermon prep.  This app has surely been a blessing and has helped me in my walk with God.</i> <br/> <b>-C.R., Pastor</b> <br/> <span class='fa fa-star checked'></span><span class='fa fa-star checked'></span><span class='fa fa-star checked'></span><span class='fa fa-star checked'></span><span class='fa fa-star checked'></span>`
  ],
  [/* 填入原有第二组评论内容 */],
  [/* 填入原有第三组评论内容 */],
  [/* 填入原有第四组评论内容 */]
]

// 生成随机索引
const randomIndex = Math.floor(Math.random() * 4)
// DOM解析完成立即执行渲染
document.addEventListener('DOMContentLoaded', function() {
  const currentReviews = reviewGroups[randomIndex]
  document.getElementById("reviewOne").innerHTML = currentReviews[0]
  document.getElementById("reviewTwo").innerHTML = currentReviews[1]
  document.getElementById("reviewThree").innerHTML = currentReviews[2]
  document.getElementById("reviewFour").innerHTML = currentReviews[3]
})

HTML调整说明 #

保持原有的评论区DOM结构不变，将JS脚本放在</body>之前引入即可：

<h4>User Reviews</h4>
<div id="reviewOne"></div>
<div id="reviewTwo"></div>
<div id="reviewThree"></div>
<div id="reviewFour"></div>
<div id="reviewFive"></div>

<!-- 你的外部JS脚本放在此处引入 -->
<script src="你的JS文件路径"></script>
</body>

内容的提问来源于stack exchange，提问作者Bryce Steuer