javascript - html动态填充的最佳优化方式

Question

用 ajax 渲染 html 的最佳方法是什么？

way1:最初有较少的 html 并通过 ajax 放置更多的动态 html。

way2:最初有更多的 html 并通过 ajax 放置更少的动态 html。

例如我的 html

<div id="div1">
   <div>
      <p id="p1">hello</p>
   </div>
<div>

方式1：

初始 html

<div id="div1">
</div>

动态html

<div>
   <p id="p1">hello</p>
</div>

方式2：

初始 html

<div id="div1">
   <div>
       <p id="p1"></p>
   </div>
</div>

动态html

hello

这个例子很小，但我希望你能了解上下文。所以问题是哪个最适合前端性能。另外，当我们通过javascript动态添加html时，浏览器是否会重新绘制整个页面？

score 1 · Accepted Answer

这取决于您在页面中处理的 HTML 数量。如果您正在构建一个包含大量模块的页面，那么最好的方法是遵循按需加载样式。即：最初只获取调出页面所需的最低限度的 HTML，并且只有当用户想要对任何模块进行操作或获取报告等时，您才进行 ajax 调用并仅获取所需的内容。

这也意味着您不会在初始页面中加载作用于未来 HTML 元素的脚本和 CSS，将所有对外部文件的引用保存在单独的 HTML（部分页面）中，并且仅通过 ajax 获取此页面。因此，您将按需加载 HTML、它的脚本、它的 CSS。

对于你的问题

当我们通过javascript动态添加html时，浏览器是否会重新绘制整个页面？

不，不会重绘整个 HTML。如果是这样的话，那么 JavaScript 中对 DOM 的每个操作都会对性能造成巨大影响。我相信这门语言写得很好，把性能放在首位。

score 0 · Accepted Answer

这取决于大小写（像往常一样；）），但使用 AJAX，您应该只获取/接收必要的值，在 HTML 中，您应该拥有您需要的所有标签（某种模板），然后将从请求或其他接收到的值放在那里通过javascript修改数据。

2 回答 2