Tag: 性能

Javascript jQuery将一大段代码插入DOM的最佳方法: 我有一大段代码需要在某些时候插入到DOM中。该代码还包含一些变量： // just a piece of the code with variable “value” 现在我在做： var codeToInsert = “” codeToInsert.insertAfter(‘#someID’); 从性能的角度来看，有更好的方法吗？

JQuery grep（…）VS本机JavaScriptfilter（…）函数性能: 我测量了这两个函数的执行时间： jQuery grep函数原生JavaScript 过滤function 使用Chrome配置文件工具测量了以下方法的执行情况： // jQuery GREP function function alternative1(words, wordToTest) { return $.grep(words, function(word) { return wordToTest.indexOf(word) != -1; }); } // Native javascript FILTER function function alternative2(words, wordToTest) { return words.filter(function(word) { return wordToTest.indexOf(word) != -1; }); } words数组由100万个随机生成的字符串构成。每种方法运行20次。令我惊讶的是， jQuery grep函数更快。执行时间（20次执行）： jQuery grep函数26,31s 原生JavaScript 过滤function34,66s 你可以在这个jsFidle上重复测量 – 执行需要一些时间，所以请耐心等待。 […]

我是否应该在jQuery中缓存$（this），如果它被多次使用？: 我知道如果您多次使用它，您应该缓存选择器的结果。一个例子是： var $selected = $(‘.some-selected-element’); process($selected); doStuff($selected); 但如果多次使用缓存$(this)是否有任何性能优势？ $(‘.some-selector’).hover(function () { if (!$(this).hasClass(‘some-other-class’)) { $(this).addClass(‘another-class’); } process($(this)); }

jQuery选择器，效率: 我最近一直在阅读关于不同选择器引擎的效率。我知道jQuery使用Sizzle引擎和这个博客文章关于一些jQuery的东西提到Sizzle引擎将你的选择器拆分成一个数组然后从左到右解析。然后，从右到左，开始用正则表达式解密每个项目。这也意味着选择器的最右边部分应尽可能具体 – 例如，id或标签名称。我的问题是，运行仅指定了ID的选择器或标签名称是否更有效： var div = $(‘#someId’); //OR var div = $(‘div#someId’); 由于我在div#someId表单中编写我的CSS，我倾向于以同样的方式做我的选择器，我是否导致Sizzle执行额外的工作（假设QuerySelectorAll不可用）？

Javascript从JSON有效地构建表并将其添加到DOM: 我有一个JSON数组从服务器进来，有一个包含200个对象的数组，每个对象包含另外10个我希望以表格格式显示的对象。起初我为每次迭代创建了一个，并使用jQuery将从数组值构建的附加到。这在Chrome中大约需要30秒，在IE 8中大约需要19秒。这需要太长时间，所以我尝试切换到Array.join()方法，在那里我将存储构成整个表的每个字符串，最后做$(‘#myTable’).append(textToAppend) 。这实际上比我的第一个版本差了大约5秒钟。我想把这个大约10秒钟。我有机会吗？如果没有，我只是一次添加一行，但我宁愿不这样做。 for(allIndex = 0; allIndex < entries.alumnus.length; allIndex++){ var entry = '’; $(‘#content_table’).append(entry); $(‘#entry’ + allIndex).append(($.trim(entries.alumnus[allIndex].title) != ” ? ” + entries.alumnus[allIndex].title + ” : ” + filler + ”)); . . . .//REST OF ELEMENTS . . . } 更新：昨天我一定搞砸了，因为我回去尝试从DOM中添加元素然后在不使用jQuery的情况下附加它们，我在Chrome中将时间缩短到85毫秒，在IE7中缩短到450毫秒！！你们真棒！我给了user1一个答案，因为那个更全面，使用片段并没有真正改变我在Chrome中的时间，在IE7中增加了大约20ms。 […]

如何在更改元素可见性的同时冻结Web浏览器的重绘？: 我到目前为止还没有JS开发人员（事实上，根本不是开发人员:)但我想尝试编写一个小的Greasemonkey脚本来隐藏某个网页上的几个元素。一旦我开始轻拍它，我决定使用jQuery，只是为了让它更容易。一切顺利，脚本正在运行，但现在已经准备就绪，我开始怀疑细节。作为脚本的一部分，我需要找到特定元素并将其与其兄弟姐妹的前一个和下一个一起隐藏起来。我最终没有那么可读，但工作线： $(‘div#some-weird-box’).prev().toggle(w).next().toggle(w).next().toggle(w); 我在这里担心的是，我将在三个不同的步骤中删除三个独立的div。这会导致浏览器三次“重绘”页面，对吗？这不是三个div的问题，当有更多元素时，它可能会开始变得重要。所以，我的问题是 – 有没有办法告诉浏览器“停止刷新/重绘页面”？如果有，我可以使用它，隐藏任意数量的元素，然后要求浏览器更新屏幕。

找到DOM中稍后出现的下一个元素: 在javascript中可能更好，但这肯定包括jQuery或任何这样的库。我想在下面的例子中找到第一个.next 。类似的问题有很多答案，表明nextAll或siblings ……两者在这里都没用： $(function(){ $(‘.result’).text( $(‘.origin’).nextAll(‘.next’).text() || $(‘.origin’).siblings(‘.next’).text() || ‘both failed’ ) }) 1 2 3 此外，最兼容（浏览器和库明智）和最佳性能（速度和更少的代码行）的方式是这样做的吗？

如何让我的jquery draggable / droppable代码更快？: 我使用JQuery来使表中的元素可拖动。（在此之前我从未使用过JQuery）。它工作正常，但速度很慢。例如，从我点击并按住某个项目的那一刻起，到光标变化的那一刻约为2秒。这是在Firefox 3.0.6上。一旦项目被拖动，在我放开鼠标按钮和显着下降之间有一个更短但仍然明显的延迟（大约半秒，我估计）。我怀疑它是如此之慢的原因是因为桌子很大（6列和大约100行），但在我看来它并不是很大，我想知道是否有些愚蠢我正在做的那是让它变得如此缓慢。例如，我想知道每次拖动时JQuery代码是否被毫无意义地应用于表中的每个元素。不过，我不知道为什么会这样。如果它有帮助，这是我的代码（注意我已经取出了光标调用，因为我担心它可能会减慢速度）。 $(document).ready ( function() { $(‘.draggable_div’).draggable ( { start: function(event, ui) { $(this).css(‘background-color’,’#ddddff’); } } ); $(‘.draggable_td’).droppable ( { over: function(event, ui) { $(this).css(‘background-color’, ‘#ccffcc’); }, out: function(event, ui) { $(this).css(‘background-color’, null); }, drop: function(event, ui) { // snip: removed code here to save space. […]

jQuery选择器性能: 根据我表达选择器的方式，我的性能差异很大。例如，查看这两个选择器，它们选择完全相同的元素： A) someTableRow.find(“td.someColumnClass”).find(“span.editMode”).find(“input”) B) someTableRow.find(“td.someColumnClass span.editMode input”) 我希望B）能够更快，因为只有1次调用，但事实上我发现A）的执行速度提高了大约8倍。我不知道为什么，任何人都有任何见解？谢谢

在javascript性能中动态创建大型html表: 我有一个用于数据分析的应用程序，我在创建表时遇到了一些性能问题。数据是从文档中提取的，重要的是所有数据都显示在一个页面上（不幸的是，分页不是一个选项）。使用jQuery，我向服务器发出ajax请求以检索数据。完成请求后，我将数据传递给输出函数。输出函数使用for循环遍历数据数组并将行连接到变量。循环完成后，包含该表的变量将附加到页面上的现有div，然后我继续将事件绑定到表以处理数据。使用一小组数据（~1000-2000行），它的工作效果相对较好，但有些数据集包含超过10,000行，导致Firefox崩溃，关闭或无响应。我的问题是，有没有更好的方法来完成我正在做的事情？这是一些代码： //This function gets called by the interface with an id to retrieve a document function loadDocument(id){ $.ajax({ method: “get”, url: “ajax.php”, data: {action:’loadDocument’,id: id}, dataType: ‘json’, cache: true, beforeSend: function(){ if($(“#loading”).dialog(‘isOpen’) != true){ //Display the loading dialog $(“#loading”).dialog({ modal: true }); }//end if },//end beforesend success: […]