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

这个例子很小，但我希望你能得到上下文。所以问题是哪一个最有利于前端性能。此外，当我们通过动态添加 html 时，浏览器是否会重新绘制整个页面JavaScript？.

Answer 1

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

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

关于你的问题

does the browser repaints the whole page when we dynamically add html via javascript?.

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