如何使用Node(Mongoose)数据库数据操作HTML DOM渲染星级评分

方案选型核心原则 #

所有DOM操作优先减少浏览器重排重绘次数、降低运行时DOM查询开销，根据自身技术栈选对应方案即可： #

方案1：服务端渲染（Express + 模板引擎，性能最优） #

如果你用EJS/Handlebars/Pug这类模板引擎做首屏渲染，完全不需要额外写客户端DOM操作逻辑，直接在模板层计算好星级宽度，渲染时直接写入元素行内样式即可。
这种方案没有客户端运行时开销，首屏加载时直接展示最终星级效果，不会出现样式跳变、布局偏移问题，是首屏场景的首选。
EJS模板示例：

<% 
// 从Mongoose查询传入模板的评价列表为reviews数组
const STARS_TOTAL = 5
reviews.forEach(review => {
  const starPercent = `${Math.round((review.rating / STARS_TOTAL) * 100 / 10) * 10}%`
%>
<div class="rating-item" data-id="<%= review._id %>">
  <div class="stars-outer">
    <div class="stars-inner" style="width: <%= starPercent %>"></div>
  </div>
  <span class="number-rating"><%= review.rating %></span>
</div>
<% }) %>

方案2：客户端异步取数渲染 #

如果是前后端分离架构，通过接口从Express服务拉取Mongoose存储的评分数据，不要在循环里反复调用document.querySelector逐节点查询更新，根据场景选以下两种优化方式：

2.1 列表已存在，仅更新评分数据

提前缓存所有评分项的DOM节点，拉取到数据后批量更新，避免重复DOM查询：

const STARS_TOTAL = 5
// 页面加载时提前缓存固定的评分列表DOM，不要每次更新都重新查询
const ratingItems = document.querySelectorAll('.rating-item')

async function updateRatings() {
  // 拉取后端评分数据，返回结构示例：[{id: "xxx", rating: 4.5}, ...]
  const resp = await fetch('/api/ratings')
  const ratingList = await resp.json()
  // 转成Map方便快速匹配对应评价项
  const ratingMap = new Map(ratingList.map(item => [item.id, item.rating]))

  ratingItems.forEach(item => {
    const matchRating = ratingMap.get(item.dataset.id)
    if (matchRating === undefined) return
    // 基于已缓存的父节点查询子元素，范围更小速度更快
    const starInner = item.querySelector('.stars-inner')
    const numberRating = item.querySelector('.number-rating')
    const starWidth = `${Math.round((matchRating / STARS_TOTAL) * 100 / 10) * 10}%`
    
    starInner.style.width = starWidth
    // 纯文本内容用textContent，比innerHTML安全，性能更好
    numberRating.textContent = matchRating
  })
}

2.2 动态渲染全量评价列表

如果评价列表是动态从接口拉取后整体渲染，直接拼接所有列表项的HTML字符串，一次性插入DOM，只触发一次浏览器重排，性能远高于逐节点创建插入：

const STARS_TOTAL = 5
const ratingContainer = document.querySelector('.ratings-container')

async function renderFullRatingList() {
  const resp = await fetch('/api/ratings')
  const ratingList = await resp.json()

  // 批量拼接所有列表项HTML
  const listHtml = ratingList.map(item => {
    const starWidth = `${Math.round((item.rating / STARS_TOTAL) * 100 / 10) * 10}%`
    return `
      <div class="rating-item" data-id="${item.id}">
        <div class="stars-outer">
          <div class="stars-inner" style="width: ${starWidth}"></div>
        </div>
        <span class="number-rating">${item.rating}</span>
      </div>
    `
  }).join('')

  // 单次DOM插入完成全量渲染
  ratingContainer.innerHTML = listHtml
}

通用注意事项 #

• 星级百分比计算逻辑建议抽成独立公共函数，服务端、客户端复用同一套逻辑，避免两端计算规则不一致导致显示异常
• 纯文本内容（比如评分数字）优先用textContent赋值，不要用innerHTML，避免XSS安全隐患
• 普通业务场景下单页评价数量不超过100条时，上述方案性能够用，不需要额外引入复杂的虚拟滚动类方案
• 不要在循环内做DOM查询、DOM插入操作，这类操作的性能开销远大于JS运算，尽量合并操作减少浏览器重排次数

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