Question

有没有人测试过，或者有人知道这两种呈现相同html内容的不同方式的性能差异（除了导入jquery库而另一个没有导入jquery库的事实，并且有Ajax版本中的两个请求与一个请求？

通过Ajax添加HTML

<html>
<head>
    <script src="javascripts/jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
    jQuery.ajax({
        type: "GET",
        url: "http://www.mysite.com/events",
        success: function(result) {
            $("#container").append(result);
        }
    });
    </script>

    <body>
        <div id="container">
        </div>
    </body>
</html>

内嵌HTML

<html>
<head>
    <body>
        <div id="container">
            <!-- events -->
            <ol>
                <li>
                    <p>
                        Event A...
                    </p>
                </li>
            </ol>
        </div>
    </body>
</html>

有什么统计数据，你什么时候会使用这样的东西？ Ajax版本要慢得多（比方说，如果我要呈现像亚马逊主页那样复杂的东西，假设我不必担心路径，因为这将是我自己的应用程序）？这个问题与可读性的最佳实践无关，只是想知道性能。

Answer 1

示例中的整体性能不受$("#container").append(result);与内联HTML的呈现性能的支配。它受HTTP请求数量的支配。

在仅HTML示例中，只发出一个HTTP请求，并且一旦下载了前几个块，内容就可以开始呈现。

在JS示例中，浏览器开始加载HTML，然后它到达第一个脚本标记，它必须下载，解析并执行jquery.js。然后它必须下载/事件。只有在这两个HTTP请求都完全完成后才能开始呈现HTML。因此在实践中，您的页面显示速度会慢得多。有关详情，请参阅有关scripts at the bottom和minimizing http requests的效果规则。

Answer 2

在你的例子中，差异不会是显而易见的。然而，在亚马逊风格的主页中，使用纯HTML版本作为基线，Ajax版本在任何地方都会变慢，从几乎不明显到慢一个数量级。有许多变量会影响Ajax版本的速度（连接速度，浏览器的JavaScript引擎，被操纵的HTML的复杂性，Ajax调用的数量，JavaScript的编写方式以及其他版本）。

有一个名为dynaTrace的好工具可以帮助您诊断Ajax瓶颈。 Firebug也有助于分析性能问题。

Answer 3

jQuery在渲染时比纯HTML慢。正如任何javascript DOM操作都慢于纯HTML文件

但除了渲染性能之外，还有更多内容。花哨的HTML格式的大表可能比紧凑的JSON数据查询和一些小的jQuery格式化下载需要更长的时间

通过AJAX获取一个简单的HTML片段永远不会在总下载时间中获得任何东西。但是从用户的角度来看，它往往更快，因为主页面结构加载更快，然后细节充实

缓存jQuery库，因此每个会话只需要一次或更少的开销

Answer 4

fwiw，这看起来似乎无关，但我读过客户端XSLT将XML文件转换为DOM 3x的速度要快，或者比让js插入它更多，但没有提供测试或统计信息。

Answer 5

ajax正好比加载http://www.mysite.com/events所花费的时间慢，+ 3ms左右才能执行追加+ 1 - ??? ms来执行浏览器重排（取决于浏览器和页面复杂性）。

我处于类似情况，并使用类似的方式加载html。它主要取决于页面加载本身的速度，但如果你通过ajax加载的html很复杂，那么浏览器重排时间可能会很长。

通过Javascript与普通HTML标记添加HTML的性能比较

5 个答案: