Question

在我的网络应用程序中，我想完全避免使用html并仅使用javascript来创建网页的dom树。

使用javascript <div>Some text</div>或使用javascript dom渲染以传统方式更快地编写网页内容的速度更快，如下所示：div.appendChild(document.createTextNode("Some text"));？

Answer 1

坚持传统的HTML。它不仅比使用javascript完成所有操作更快，而且更易于维护。

除非有令人信服的理由，否则请坚持使用直接的HTML并使用javascript来获取应用中更具互动性的部分。

Answer 2

速度是正确性的次要问题 - 也就是说，首先满足功能要求，然后在必要时快速（有些地方，它可能已经足够快）。

在这种情况下，使用静态标记与JavaScript的决定是谁在使用您的文档的问题 - 是否只有启用了JavaScript的用户？如果是这样，那就没关系了。你需要考虑搜索引擎吗？残疾用户？没有完整JS支持的瘦客户端，或者禁用JS的偏执用户？在所有这些后一种情况下，使用语义标记，而不是用多余的元素混乱，用JavaScript增强，是唯一正确的方法。

Answer 3

传统方法会更快，因为浏览器只需要下载，解释和显示。您建议的方法会导致浏览器必须下载，解释，更改* n次然后再显示。

这就像渲染一样。

就可维护性而言，你正在制造一场噩梦。这是发展的关键。可维护性的噩梦数量与代码的“质量”成正比，恕我直言。性能和优化应该是可维护性的第二位。（当然也有例外。没有什么是黑白的。）

HTML被创建为一种富有表现力的语言。 Javascript不是。在我看来，故事的结尾。

Answer 4

HTML由浏览器解析并生成，然后输入到DOM中。使用javascript逐个操作dom是更多的开销。

想象一下，如果你不得不从杂志上重新输入一篇文章。现在想象一下如果每个句子都在新页面上的话。尽管最终结果是复制的文章，但您必须花费所有时间来翻页。

Answer 5

到目前为止，传统方式更快，用户下载文件，它就在那里，解析并完成。

如果你采用JS方式，页面必须在客户端构建，每次加载页面时都会。

这只是建立页面恕我直言的可怕方式，也是管理/更新/创建的噩梦

Answer 6

如果您要通过javascript对html进行大量更改，我建议您使用trimpath之类的模板库。

Answer 7

我觉得有趣的是你会考虑纯粹通过Javascript创建一个文档。使用DOM和document.createElement而不是.innerHTML属性创建元素实际上更快。此方法直接创建文档对象，而使用innerHTML则需要解析器迭代HTML并创建元素。

另一方面，使用Javascript而不是直接编写HTML将需要解析和执行Javascript，从而为HTML解析器带来额外的开销。

Answer 8

HTML（模板）通常被认为是一种更直观，模块化和可维护的DOM操作方法。

有几个地方可以帮助您入门：

jQuery模板引擎： jQuery templating engines

Google Closure模板 http://code.google.com/closure/templates/

Answer 9

我过去曾尝试为ajax聊天做一个100％javascript构建的组件。事实证明，它的可维护性较差，花费了更多的时间来编写代码，并且在非常简单甚至难以实现的优势下，这可能是一个可以从javascript DOM方法中获益的项目。

即使你认为可能有优势，也没有。坚持纯HTML。

Answer 10

恕我直言，我认为编译javascript是一个很好的解决方案，可以快速创建Web应用程序。

Answer 11

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>

下面是JS生成的HTML：

<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
--------------------------------------------------------------------------
Pure HTML by server   | 680,000 bytes  | 00:01:48 
HTML generated by JS  |     570 bytes  | 00:00:28

在Ubuntu 18的Chrome v70上进行了测试。

结论

出于许多原因（通常出于可读/可维护的代码），始终坚持使用普通HTML，除非您要处理巨大的HTML，否则您可以考虑使用JS生成它。

Answer 12

正如您所想的那样，我想与@evilReiko进行相同的测试：

为了呈现包含具有1000000000条记录的表的页面，我发现了以下结果：

静态html文件：文件大小32MB，页面加载时间2.8分钟
静态具有最小内容的html文件：文件大小12MB，页面加载时间 1.3分钟
由JS生成的动态html文件：文件大小612字节（JS的+ 713字节），页面加载时间10.09秒...

简单的html vs Javascript生成的html？

12 个答案:

2019

结果：

结论