Question

我正在测试我之前读过的有关随机Math.random()实际上是多少的内容，并希望显示10000个数字，这些数字应该是0到10000000之间的随机数。

要查看测试，我选择将随机数组加入到每个整数之间<br>的字符串中。然后我做了$("#"+elm).html(randomNumberString);这真的很慢。我只想到它是将随机数生成和排序到数组中。但是当我开始在我的代码中放置计时器时，它变得很有吸引力，它的输出正在减慢一切。

正如我做的测试document.getElementById(elm).innerHTML = randomNumberString;

jQuery.html（）：2500ms getElementById.innerHTML：170ms

我在所有5个浏览器中尝试了这个，并且所有浏览器中的数字非常接近...我在这个实例中使用jQuery错了吗？我也尝试在计时器启动之前追加并获取元素，所以我可以简单地执行$(elm).html()，但这没有帮助。似乎是实际的html()函数减慢了一切......？

编辑我最终这样做了：

randomStringNumber = "<div>" + randomStringNumber + "</div>";

现在整个事情运行得更快： jQuery.html（）：120ms getElementById.innerHTML：80ms

尽管使用oldschool html仍然更快。如果有人能够回答为什么将它包装在一个元素中的速度更快，我会很感激......

Answer 1

25提示改善你的jquery使用

http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

http://acsenthil.wordpress.com/2011/07/04/improve-your-jquery-25-excellent-tips/

从Google Code
使用备忘单
合并所有脚本并缩小它们
使用Firebug优秀的控制台记录功能
通过缓存将选择操作降至最低
将DOM操作保持在最低限度
在执行任何类型的DOM插入时将所有内容包装在单个元素中
尽可能使用ID而不是类
为您的选择器提供上下文
正确使用链接
学会正确使用动画
了解活动委派
使用类来存储状态
更好的是，使用jQuery的内部数据（）方法来存储状态
编写自己的选择器
简化您的HTML并在页面加载后进行修改
延迟加载内容以提高速度和搜索引擎优化的利益
使用jQuery的实用程序功能
使用noconflict在使用其他框架时重命名jquery对象
如何判断图片何时加载
始终使用最新版本
如何检查元素是否存在
将JS类添加到HTML属性
返回'false'以防止默认行为
准备好活动的简写

Answer 2

最快的方法是：

 $.getJSON("/Admin/GetFolderList/", function(result) {
        var optionsValues = '<select>';
        $.each(result, function(item) {
            optionsValues += '<option value="' + item.ImageFolderID + '">' + item.Name + '</option>';
        });
        optionsValues += '</select>';
        var options = $('#options');
        options.replaceWith(optionsValues);
    });

根据this link是最快的方法，因为在进行任何类型的DOM插入时，您将所有内容都包装在一个元素中。

Answer 3

这似乎是html函数的limitation。在本次讨论中，建议将以下功能作为替代：

$.fn.replaceHtml = function( val ) {
    var stack = [];
    return this.each( function(i, el) {
        var oldEl = el;
        /*@cc_on // Pure innerHTML is slightly faster in IE
        oldEl.innerHTML = html;
        return oldEl;
        @*/
        var newEl = oldEl.cloneNode(false);
        newEl.innerHTML = html;
        oldEl.parentNode.replaceChild(newEl, oldEl);
        /* Since we just removed the old element from the DOM, return a reference
        to the new element, which can be used to restore variable references. */
        stack.push( newEl );
    }).pushStack( stack );
};

jQuery html（）表现得很慢

3 个答案: