简单html与Javascript生成的html?

坚持使用传统的HTML。它不仅比使用javascript做任何事情都快,而且更易于维护。

除非另有令人信服的理由,否则请坚持使用直接的HTML,并使用javascript实现应用程序中更具交互性的部分。

速度是正确性的第二个关注点——也就是说,首先满足功能需求,然后在必要的地方加快速度(有些地方,它可能已经足够快了)。

在这种情况下,决定使用静态标记还是使用JavaScript是一个谁在使用您的文档的问题—是否只有启用了JavaScript的用户?如果是这样,那也没什么大不了的。你需要考虑搜索引擎吗?禁用的用户?没有完全支持JS的瘦客户端,或者禁用JS的偏执用户?在所有这些后一种情况下,使用JavaScript增强语义标记(不被多余的元素弄乱)是唯一正确的方法。

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

就可维护性而言,你在制造一场噩梦。这是发展的关键。可维护性方面的噩梦数量与代码的“质量”成正比,IMHO。性能和优化应该排在可维护性之后(当然,也有例外。没有什么是黑白的)。

HTML是一种表达性语言。Javascript不是。在我看来,故事结束了。

HTML由浏览器解析和生成,然后输入DOM。使用javascript逐块操作dom的开销更大。

想象一下,如果你不得不重新打印杂志上的一篇文章。现在想象一下,如果每一句话都在新的一页上,你会这样做。虽然最终的结果是一篇复制的文章,但你不得不花所有的时间翻页。

到目前为止,传统的方式是更快的,用户下载文件,它在那里,解析和完成。

这只是一个可怕的方式来建立一个页面IMHO和噩梦管理/更新/创建

trimpath .

我觉得有趣的是,您可以考虑纯粹通过Javascript创建文档。实际上,使用DOM和 document.createElement .innerHTML 财产。此方法直接创建文档对象,而使用 innerHTML 需要解析器遍历HTML并创建元素。

HTML(templating)通常被认为是一种更直观、模块化和可维护的DOM操作方法。

jQuery模板引擎: jQuery templating engines

谷歌关闭模板 http://code.google.com/closure/templates/

过去我已经尝试过为ajax聊天做一个100%javascript构建的组件。事实证明,它的可维护性较差,需要更多的时间来编写代码,而且它的优势是非常小甚至非常困难,它可能是一个可以从javascript DOM方法中获益匪浅的项目。

即使你认为有优势,也没有。坚持纯HTML。

2019

(可能正确答案对2010年是正确的)。以下是2019年基准测试的答案。

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

在Ubuntu18上的ChromeV70上进行了测试。JS生成的HTML大约是 在本测试案例中(速度和;下载大小将取决于HTML的大小(当然在实际情况中)。

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

我认为编译javascript是一个很好的解决方案,可以创建快速的web应用程序。

和你一样,我也在想同样的问题,并且做了一个类似于@eviriko的测试:

• 静态html文件:文件大小32MB,页面加载时间2.8分钟
• html文件与缩小的内容:文件大小12MB,页面加载时间 1.3分钟
• JS生成的动态html文件:文件大小612字节(+713字节的JS),页面加载时间10.09秒。。。