html动态填充的最佳优化方式[关闭]答案

【问题标题】：Best optimized way of dynamic filling of html [closed]html动态填充的最佳优化方式[关闭]
【发布时间】：2016-12-14 07:16:22
【问题描述】：

用 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？。

【问题讨论】：

【解决方案1】：

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

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

关于你的问题

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

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

【讨论】：

【解决方案2】：

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

【讨论】：