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

way1:最初有较少的HTML和通过AJAX把更多的动态HTML。

way2:最初有更多的HTML和通过AJAX少放动态HTML。

为e.g 我的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

这个例子虽小，但我希望你能获得context.So的问题是，这是最好的前端性能。另外，当我们通过JavaScript动态添加html时，浏览器重绘整个页面？

不完全明白你的想法，但如果AJAX请求期间布局没有发生显着变化，它将是最好的选择。阅读FOUC规则。 – Raptor

你应该尝试Vue，Angular或React他们可以动态地呈现HTML – Peachyz

我想问的是他们通过ajax添加更少内容的一些好处。因为浏览器已经绘制了所需的容器并且只是添加了一些动态数据那个混蛋？ –

这要看情况（像往常一样;）），但AJAX，而你应该得到/只接受必要的值，在HTML中你应该有你需要（某种模板的所有标签），然后就放在那里值收到从请求或其他修改后的数据通过JavaScript。

2016-12-14 07:26:41

这取决于您在页面中处理的HTML数量。如果你正在建立一个有很多模块的页面，那么最好的方法是按照加载需求风格。即：最初只是获得所需的最小HTML来调出页面和仅当用户想要在任何模块上操作或获取报告等时，您执行ajax调用并且只获取所需的内容。

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

而且你的问题

做浏览器重新绘制整个页面，当我们动态地通过JavaScript添加HTML？

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

2016-12-14 07:40:30

回答