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数量。如果您要构建包含大量模块的页面，那么最好的方法是遵循按需加载样式。即：最初只是获取启动页面所需的最低HTML ，仅当用户希望操作任何模块，或获取报告等时，您执行此操作ajax调用和仅获取所需内容。

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

关于你的问题

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

不，整个HTML不会重绘。如果是这种情况，则DOM上的JavaScript中的每个操作都会对性能产生巨大影响。我相信语言写得很好，保持性能优先。

Answer 2

这取决于案例（总是如此;））但是使用AJAX而不是你应该获得/接收必要的值，在HTML中你应该拥有你需要的所有标签（某种模板），然后只是放在那里收到的值通过javascript请求或其他修改过的数据。