最佳优化HTML动态填充方法

Question

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

way1:最初的HTML较少，并通过AJAX放置更动态的HTML。

way2:最初具有更多的HTML，并通过AJAX添加较少的动态HTML。

例如我的html

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

Way1 ：

初始HTML

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

动态HTML

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

Way2 ：

初始HTML

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

动态HTML

hello

此示例很小，但我希望您能得到上下文。因此，问题是哪个最适合前端性能。，当我们通过动态添加html时，浏览器重新粉刷整个页面JavaScript？。

Answer 1

这取决于您在页面中处理的HTML的量。如果您要构建一个带有大量模块的页面，那么最好的方法是按需按需加载样式。即：最初，只有在用户想要在任何模块上操作或获取报告等时，才能获取出现页面 > > >的最低最小值AJAX调用和仅获取所需的内容。

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

和您的问题

当我们通过JavaScript动态添加HTML时，浏览器是否会重新粉刷整个页面？

不，整个HTML都没有重新绘制。如果真是这样，那么DOM上的JavaScript中的每项操作都会对性能产生巨大打击。我相信这种语言写得很好，将表现作为优先级。

Answer 2

它取决于情况（如始终;）），但是使用ajax而替代您应该获得/仅接收必要的值，在html中，您应该拥有所需的所有标签（某种模板）然后只是将其从请求或JavaScript的其他修改数据中收到的值放置。