Tag: 性能

jQuery mousemove性能 – 节流事件？: 我们正面临着与mousemove连接的jQuery事件传播性能的问题：我们有一个屏幕填充canvas，需要跟踪用户是否在其上拖动鼠标，因此我们在该对象上添加了一个鼠标移动侦听器，如下所示： ourCanvas.on(‘mousemove’, function(event) { event.preventDefault(); //our drag code here } }); 此代码工作正常，但我们在一个测试系统上的当前Firefox（24）中遇到了严重的性能问题。分析器告诉我们，大部分时间花在jQuery.event.dispatch() （我们尝试了当前最新的jQuery 1.8,1.9,1.10和2.0）。我们通过在这里使用“jQuery.event.fix（）”性能优化成功地减少了在dispatch（）函数中花费的时间： http ： //bitovi.com/blog/2012/04/faster-jquery-event-fix。 html但该测试系统的性能仍远低于我们的预期。经过一些进一步的测试，我设法将其固定在系统上使用的鼠标上：它使用1000Hz 。我们将用过的鼠标切换到125Hz并且瞧瞧，性能非常好。我们的假设是，鼠标上的高Hz率引起了很多mousemove事件，因此我们更改了上面的代码以应用事件限制并且每隔X毫秒只调用事件处理： var lastMove = 0; var eventThrottle = 1; ourCanvas.on(‘mousemove’, function(event) { event.preventDefault(); var now = Date.now(); if (now > lastMove + eventThrottle) { lastMove = now; //our drag code here […]

jQuery类选择器性能（困惑）: 那么$(‘table.selectable td.capable input:text’)优于$(‘table.selectable td input:text’) ？换句话说，指定一个类加速或减慢选择（假设在这种情况下不是绝对必需的）？

浏览器是根据更改还是仅重新呈现整个页面？: 假设我有一个id为#msg的元素，并且在某个条件下我想添加一个类以便应用样式，例如使文本显示为红色。我可以做$(‘#msg’).addClass(theclass) 我的问题是浏览器是如何反应的？它是重新渲染所有页面还是重新渲染该特定元素？

避免内存泄漏将内容加载到iframe中: 我正在开发一个在iframe中呈现内容的嵌入式系统。它使用signalR（基于ajax）和jquery。随着时间的推移，浏览器变得越来越慢，内存使用量也越来越高。所以我希望消除所有潜在的内存问题。当新页面加载到iframe时，我附加了单击和焦点事件处理程序。就在iframe页面被替换之前，我取消了它们。但是，如果我检查$ .cache（在使用firefox的PC上进行测试时，所以与我的真实系统完全不同），每次重新加载iframe时，仍会显示$ .cache获得越来越多的元素。这是正确的做事方式吗？还有什么我可以尝试的吗？为什么$ .cache会增长？（如果你有兴趣我使用带有Midori浏览器的raspberry pi（运行linux），尽管我可以选择其他（主要是web-kit）浏览器）。我用来更改iframe内容的Javascript … hubProxy.client.loadPage = function (pageFilename, pageType) { frameNode = $(“#myIframe”).contents(); $(“a”, frameNode).off(); $(“#myIframe”)[0].src = pageFilename; };

Javascript – 显示和隐藏大量列表项的最快方式: 当用户平移Google地图时，会更新当前可见标记的列表。此列表最多包含1000个项目，当一次显示或隐藏数百个li时，它会减慢速度。它不到半秒钟，但它变得烦人。数组（newLiList）包含现在应该可见的项目。另一个数组（currentLiList）具有以前可见的项目。两个数组都包含li的id作为索引。 for (var i in newLiList) { if (currentLiList[i] != true) { $(“ul#theList li#”+i).show(); } } for (var i in currentLiList) { if (newLiList[i] != true) { $(“ul#theList li#”+i).hide(); } } 有更快的方法吗？

大型DOM树减少了jQuery点击事件: 问题解决了！ Dhoelzgen和Matthew Blancarte根据公认的答案解决了这个问题（特定于我的配置）。问题的关键在于，当我应该使用jQuery的on方法来委托事件处理时，我将’click’事件绑定到所有 .inventory_item元素，如下所示： $(document).ready(function(){ $(‘#inventory_index’).on(‘click’, ‘.inventory_item’, function(){ alert(‘Click event fired!’); }); }); 使用这种技术我大大提高了我的应用程序的响应能力。继续阅读所有细节…… 概观我正在开发一个在“单页”（例如www.myapp.com/app.php）中运行的库存应用程序，并使用jQuery执行XHR来加载和转出DIV的各种内容。我正在使用jQuery 1.9.1和jQuery UI 1.8（因为我必须出于遗留原因）。问题：慢点击事件我遇到的问题是随着DOM树变大，点击事件变得越来越慢。当从搜索返回约1000个项目时，延迟当前约为2秒。这是jQuery的示例： $(document).ready(function(){ var inventory_item = $(‘#inventory_index.inventory_item’); inventory_item.on(‘click’, function(){ alert(‘Click event fired!’); }); }); 和HTML： Inventory Item 0 Inventory Item 1000 起初我认为是因为图像存在于每个.inventory_item ，但是在实现延迟加载后，我发现问题与DOM中的元素数量有关，而不是与图像有关。他们自己。试图解决方案正如您在上面的示例代码中所看到的，我已经尝试实现过去几天我能找到的最佳解决方案。也就是说，将.inventory_item的集合包装在一个可识别ID的#inventory_index元素中，以便为jQuery提供一个关于它应该在哪里查看的提示。而且，另外，创建一个javascript对象来尝试从DOM搜索中获得更多时间（尽管，老实说，我不确定它是如何工作的，或者它是否有帮助）。有没有其他人遇到这个问题，并有任何他们可以分享的解决方案或建议？当前最好的想法截至目前，我想象的唯一方法就是通过在#inventory_index加载较少的结果来简单地减少DOM树中元素的数量。这是一个选项，但我真的希望能够将数百个（如果不是数千个） […]

使用jQuery快速搜索大列表: 我正在使用此代码搜索大约500个li标签。 $(function() { $.expr[“:”].containsInCaseSensitive = function(el, i, m){ var search = m[3]; if (!search) return false; return eval(“/” + search + “/i”).test($(el).text()); }; $(‘#query’).focus().keyup(function(e){ if(this.value.length > 0){ $(‘ul#abbreviations li’).hide(); $(‘ul#abbreviations li:containsInCaseSensitive(‘ + this.value + ‘)’).show(); } else { $(‘ul#abbreviations li’).show(); } if(e.keyCode == 13) { $(this).val(”); $(‘ul#abbreviations li’).show(); } }); }); 这是HTML： ABCdescription BCAdescription ADCdescription […]

将click事件绑定到td vs table: 我想在HTML中构建像Excel一样的excel。假设我的表[id“myTbl”]有20行和20列。每当用户点击td文本作为其值时，我想在td中添加文本框。假设我的桌子是我有2个选项来实现这个目标[两者都很好] 选项一 $(“#myTbl”).bind(“click”,function(e){ var obj = e.target; if(obj.nodeName == “TD”){ $(obj).html(“”); } }); 备选方案二 $(“#myTbl tr td”).bind(“click”,function(e){ if($(“input”,$(this)).length==0){ $(this).html(“”); } }); 我的问题是哪个选项在性能方面更好。

如何使用JQuery有效地附加内容: 我正在使用JQuery在标记中附加大量文本。我发现标签中当前的文本越多，附加速度越慢，而对于大量文本，它太慢。是否有更有效的方法来追加文字？例如创建虚拟子标签并设置它们的内容而不是附加到父级？

如何在用户滚动图像时仅加载图像: 当用户向下滚动到页面足够远以实际看到它们时，许多站点似乎仅下载图像或生成文档的一部分（例如用于评论）。这显然可以为您提供更快的加载页面，并为任何不打算向下滚动的人节省带宽。如何完成，理想情况下使用jquery？或者换一种方式，如何检测到丢失的图像刚刚滚动到视图中并需要获取？