简单html与Javascript生成的html？
在我的web应用程序中，我希望完全避免使用html，而只使用javascript来创建网页的dom树简单html与Javascript生成的html？,javascript,html,dom,performance,Javascript,Html,Dom,Performance,在我的web应用程序中，我希望完全避免使用html，而只使用javascript来创建网页的dom树 以htmlSome text或使用javascript dom render（如下所示）的传统方式编写web内容更快的方法是：div.appendChild（document.createTextNode（“Some text”）？坚持使用传统的HTML。它不仅比使用javascript做任何事情都要快，而且更易于维护 除非另有令人信服的理由，否则请坚持使用直接的HTML，并使用javascri
以html
Some textdiv.appendChild（document.createTextNode（“Some text”）？坚持使用传统的HTML。它不仅比使用javascript做任何事情都要快，而且更易于维护
除非另有令人信服的理由，否则请坚持使用直接的HTML，并使用javascript实现应用程序中更具交互性的部分。HTML由浏览器解析和生成，然后输入DOM。使用javascript逐块操作dom的开销更大
想象一下，如果你不得不从杂志上重新键入一篇文章。现在想象一下，如果每一句话都在新的一页上，你会这样做。虽然最终的结果是复制了一篇文章，但你必须花所有的时间翻页。到目前为止，传统的方式更快，用户下载文件，文件就在那里，解析并完成
如果你用JS的方式在客户端构建页面，每次他们加载页面时
这只是构建页面的可怕方式，管理/更新/创建速度是正确性的第二个问题，也就是说，首先满足功能需求，然后在必要时加快速度（在某些地方，速度可能已经足够快了）
在这种情况下，决定使用静态标记还是使用JavaScript是一个谁在使用您的文档的问题——是否只有启用了JavaScript的用户？如果是这样，那也没什么大不了的。你需要考虑搜索引擎吗？残疾用户？没有完全JS支持的瘦客户端，或者禁用JS的偏执用户？在后一种情况下，使用JavaScript增强了语义标记，没有多余元素的干扰，如果你要通过JavaScript对HTML做很多修改，我建议使用模板库，比如 ，我觉得有趣的是，你会考虑纯粹通过JavaScript创建一个文档。实际上，使用DOM和document.createElement
创建元素比使用.innerHTML
属性更快。此方法直接创建文档对象，而使用innerHTML
需要解析器迭代HTML并创建元素
另一方面，使用Javascript而不是直接编写HTML需要对Javascript进行解析和执行，这会给HTML解析器带来额外的开销。HTML（模板化）通常被认为是一种更直观、模块化和可维护的DOM操作方法
有几个地方可以让您开始：
jQuery模板引擎：
谷歌闭包模板
我过去已经尝试过为ajax聊天做一个100%javascript构建的组件。事实证明，它的可维护性较差，需要花更多的时间来编写代码，而且它的优势在于，即使非常困难，它也可能是一个可以从javascript-DOM方法中受益匪浅的项目
即使你认为有优势，也没有。坚持使用纯HTML。传统方法会更快，因为浏览器只需下载、解释和显示。您建议的方法将导致浏览器必须下载、解释、更改*n次，然后显示
这就是渲染的范围
就可维护性而言，你正在制造一场噩梦。这是发展的关键。可维护性方面的噩梦数量与代码的“质量”成正比，IMHO。性能和优化应该排在可维护性之后。（当然也有例外，没有什么是黑白的）
HTML被创建为一种表达性语言。Javascript不是。在我看来，故事到此结束。我认为编译javascript是一个很好的解决方案，可以创建快速的web应用程序。2019
（可能正确答案在2010年是正确的）。以下是2019年基准测试的答案
生成带有嵌套的div
的表，共500行，250k个表单元，每个表单元10个嵌套的div
<!-- Pure HTML by server -->
<html>
<head></head>
<body>
<table>
<?php
for($i = 0; $i < 500; ++$i) {
echo '<tr>';
for($j = 0; $j < 500; ++$j) {
echo '<td><div><div><div><div><div><div><div><div><div><div>' . $i . '/' . $j . '</div></div></div></div></div></div></div></div></div></div></td>';
}
echo '</tr>';
}
?>
</table>
<script>
alert('finish');
</script>
</body>
</html>
在Ubuntu18上的ChromeV70上进行了测试。在这个测试用例中，JS生成的HTML大约快了400%（速度和下载大小将取决于HTML在实际用例中的大小）
结论
始终坚持正常的HTML有很多原因（通常是可读的/可维护的代码），除非你处理的是巨大的HTML，那么你可以考虑用js生成它。 ，因为你和我一样，也做了类似的测试：
为了呈现包含100000000条记录的表的页面，我发现以下结果：
- 静态html文件：文件大小32MB，页面加载时间2.8分钟
- 静止的
内容缩小的html文件：文件大小12MB，页面加载时间
1.3分钟
- JS生成的动态html文件：文件大小612字节（+713字节的JS），页面加载时间10.09秒
另请参见添加，强大的谷歌“不会索引”javascript生成的页面。因为它的网络爬虫忽略了javascript代码！因此，除非您的web门户将被私人/内部使用。不在谷歌上几乎等同于不在互联网上。（对于99%JS的网站来说）你应该解释一下为什么传统HTML比javascript快。“在我的web应用程序中，我想自满地避免使用HTML，只使用javascript来创建网页的dom树。”我很感兴趣；为什么要这样做？javascript方法还依赖于客户端启用javascript。他们存在，现在有一个坐在我旁边。此外，它需要大量的客户端操作，这通常比服务器慢。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var html = '<table>';
for(var i = 0; i < 500; ++i) {
html += '<tr>';
for(var j = 0; j < 500; ++j) {
html += '<td><div><div><div><div><div><div><div><div><div><div>' + i + '/' + j + '</div></div></div></div></div></div></div></div></div></div></td>';
}
html += '</tr>';
}
html += '</table>';
$('body').html(html);
alert('finish');
});
</script>
</body>
</html>
| Download Size | Time 'til browser stops loading
--------------------------------------------------------------------------
HTML generated by server | 680,000 bytes | 00:01:48
HTML generated by JS | 570 bytes | 00:00:28