jQuery html（）表现得很慢 [英] jQuery html() acting really slow
问题描述
我正在测试一些我之前读过的关于随机 Math.random（）的内容，并希望显示10000个数字，它们应该是0之间的随机数并且10000000。
I was testing something I read earlier about how random Math.random() really is, and wanted to display 10000 numbers that was supposed to be a random number between 0 and 10000000.
为了看测试，我选择将随机数组加入到一个字符串中，其中包含< br> 。然后我只是做了 $（＃+ elm）.html（randomNumberString）; 这真的很慢。我只想到它是将随机数生成和排序到数组中。但是当我开始在我的代码中放置计时器时，它变得很有吸引力，输出正在减慢一切。
To see the test, I chose to just join the array of random numbers to a string with <br> between each integer. And then I just did $("#"+elm).html(randomNumberString); which was really slow. I just figured it was the generation and sorting of random numbers into an array. But as I started placing timers in my code, it got appearant that it was the output that was slowing everything down.
正如我做的测试一样 document.getElementById（elm）.innerHTML = randomNumberString;
jQuery.html（）：2500ms
getElementById.innerHTML：170ms
jQuery.html(): 2500ms getElementById.innerHTML: 170ms
我在所有5个浏览器中尝试了这个，并且所有浏览器中的数字非常接近......我在这个实例中使用jQuery错了吗？我也尝试在计时器启动之前追加并获取元素，所以我可以简单地执行 $（elm）.html（），但这没有帮助。这似乎是实际的 html（）函数减慢了一切...？
I tried this across all 5 browsers, and the numbers were very close in all browsers... Am I using jQuery wrong in this instance? I also tried append and fetching the element before the timer started, so I could simply do $(elm).html(), but that didn't help. It seems to be the actual html() function that's slowing everything down..?
EDIT 我最终这样做了：
randomStringNumber = "<div>" + randomStringNumber + "</div>";
现在整个事情运行得更快：
jQuery.html（）：120ms
getElementById.innerHTML：80ms
and now the whole thing runs a lot faster: jQuery.html(): 120ms getElementById.innerHTML: 80ms
尽管使用oldschool html仍然更快。如果有人能够回答为什么将它包装在一个元素中更快，我会很感激......
Still faster using oldschool html, though. And if anyone has an answer to why wrapping it in one element is faster, I'd appreciate that...
推荐答案
25提示改善你的jquery使用
25 tip to improve your jquery use
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代码加载框架
- 使用备忘单
- 合并所有脚本并缩小它们
- 使用Firebug优秀的控制台记录功能
- 通过缓存将选择操作降至最低
- 将DOM操作保持在最低限度
- 将所有内容包装在一个元素中进行任何类型的DOM插入
- 尽可能使用ID而不是类
- 为选择器提供上下文
- 正确使用链接
- 学会正确使用动画
- 了解事件委派
- 使用类来存储状态
- 更好的是，使用jQuery的内部数据（）方法来存储状态
- 编写自己的选择器
- 简化HTML并在页面加载后进行修改
- 延迟加载内容以获得速度和SEO优势
- 使用jQuery的实用程序功能
- 使用noconflict在使用其他框架时重命名jquery对象
- 如何判断图像何时加载
- 始终使用最新版本
- 如何检查元素是否存在
- 将JS类添加到HTML属性
- 返回'false'以防止违约行为
- 准备好事件的简写
- Load the framework from Google Code
- Use a cheat sheet
- Combine all your scripts and minify them
- Use Firebug’s excellent console logging facilities
- Keep selection operations to a minimum by caching
- Keep DOM manipulation to a minimum
- Wrap everything in a single element when doing any kind of DOM insertion
- Use IDs instead of classes wherever possible
- Give your selectors a context
- Use chaining properly
- Learn to use animate properly
- Learn about event delegation
- Use classes to store state
- Even better, use jQuery’s internal data() method to store state
- Write your own selectors
- Streamline your HTML and modify it once the page has loaded
- Lazy load content for speed and SEO benefits
- Use jQuery’s utility functions
- Use noconflict to rename the jquery object when using other frameworks
- How to tell when images have loaded
- Always use the latest version
- How to check if an element exists
- Add a JS class to your HTML attribute
- Return ‘false’ to prevent default behaviour
- Shorthand for the ready event
这篇关于jQuery html（）表现得很慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
