Tag: 优化

延迟JS加载 – 插入头部或身体: 我想知道在优化，缓存和页面加载速度方面最推荐的方式是什么。使用延迟加载时，我应该在我的网站文档的BODY或HEAD中动态插入JS文件吗？

jquery .each（）替代方法没有正确循环: 希望我只是遗漏了一些东西，这很简单…… 我有一个循环遍历URL列表的页面，对它们进行Ajax调用（使用jquery），从返回的HTML中获取数据，并将其显示在表中。这些调用工作正常。由于实时获取这些数据需要一段时间（可能需要长达5分钟才能遍历列表，返回数据，显示它等等。）Chrome和IE等浏览器在这个繁重的处理过程中“锁定” – 实际上是Chrome定期显示“页面无响应”消息，而IE似乎只是挂起，然后突然，结果显示在屏幕上。为了解决这个问题，我研究了如何优化jQuery .each（）函数并找到一个名为slowEach （ LINK ）的自定义插件，它基本上在每次循环迭代后插入一个小超时 – 以便浏览器获得响应，而不是认为客户没有反应。我已经更新了我的代码来调用slowEach插件而不是.each，一切正常，几乎可以！似乎在第一次迭代之后 – 插件实际上执行了额外的代码 – 一直到我的回调函数的末尾，然后突然想要跳回到循环并继续正确地继续其余的迭代。我很难跟踪为什么会发生这种情况。这是我的代码（parseXml只是一个处理一些XML数据的回调函数）： function parseXml(x) { var $rowArray = $(x).find(“[nodeName=z:row]”); $rowArray.slowEach(250, function(index) { // … processing each returned row }); // … extra processing after the loop is completed. Show data on the screen. }; 这是slowEach插件： $.slowEach […]

jQuery简化: 我正在为一个网站编写一些代码，该网站使用4个列表项来显示/隐藏页面上不同位置的4个不同的div。这是我正在做的一个粗略的例子： One Two Three Four This is the first div This is the second div This is the third div This is the four div 而且我有一些丑陋的JS代码正在进行中，对于我的生活，我不记得/弄清楚如何简化它。 $(“#first”).click(function() { $(“#one”).fadeIn(); $(“#two, #three, #four”).fadeOut(); }); $(“#second”).click(function() { $(“#two”).fadeIn(); $(“#one, #three, #four”).fadeOut(); }); $(“#third”).click(function() { $(“#three”).fadeIn(); $(“#two, #one, #four”).fadeOut(); }); $(“#fourth”).click(function() { $(“#four”).fadeIn(); $(“#two, #three, #one”).fadeOut(); }); […]

for循环之后的多个元素的jQuery append（），而不是展平为HTML: 我有一个循环： for (index = 0; index < total_groups; index += 1) { groups[index].list_item = $(list_item_snippet); // Closure to bind the index for event handling (function (new_index) { groups[index].list_item.find('.listing-group-title') .html(groups[index].Group.Name) .click(function(e){ fns.manageActiveGroup(new_index, groups); return false; }); })(index); // Append to DOM mkp.$group_listing.append(groups[index].list_item); }; 每次循环触发时我宁愿不调用append() 。我知道我可以使用String并将标记与每个循环迭代连接mkp.$group_listing并在最后将字符串附加到mkp.$group_listing ，但是这会使对象变平并且绑定会丢失（我不依赖于ID）。有没有办法可以将我的对象添加到数组中并将它们全部一次性地附加到底部而不会转换为HTML？假设： $(list_item_snippet)包含一些定义列表项的HTML（并包含一个类为.listing-group-title的元素）。 groups是我的脚本中定义“组”的JSON块封闭效果很好编辑：发现我可以使用以下语法追加多个元素： mkp.$group_listing.append(groups[0].list_item, groups[1].list_item […]

建立一个旋转木马。 Chrome和Firefox的性能不佳: 我以前问过这个问题，但我得到的唯一答案是这个链接：shouldiuseacarousel.com。我知道旋转木马对用户体验几乎没有什么作用，并且基本上没有价值，但这不是这里的情况。我正在使用的旋转木马是一个在线杂志的隐喻，可以提供在真实杂志中浏览页面的体验。因此非常相关。在创建这个旋转木马时，我的最终目标是实现平滑的滚动体验，同时仍然保持旋转木马的某些核心function。请记住，我是一个只有几个月的javascript经验的javascript学习者，并且欢迎任何关于优化或想法的建议，并且非常感谢。所以，我创建了一个带有一个名为“Carousel_Container”的简单div容器的旋转木马，其中css属性为“overflow：scroll;”。嵌套在里面是另一个名为“Carousel”的容器，它容纳我所有的“杂志标题”或“项目”。用户可以通过加载单击项目和杂志文章。到目前为止，我已经创建了两个核心function：1）当用户滚动时，我希望中间的项目脱颖而出。所以所有项目都有css“不透明度：0.3;” 除了中间的项目。这是我解决这个问题的逻辑：我创建了一个名为“Focus_Point”的变量，它由以下内容定义： var Focus_Point = Window_Width * 0.5; 这用于称为“ItemToFocus”的核心函数： var ItemToFocus = function(){ if( MousewheelActive == 1 ){ First_Item_Offset = $Active_Carousel_Item.first().offset().left; First_Item_Offset = -First_Item_Offset; Focus_Point = 0.45 * Window_Width; Carousel_Position = First_Item_Offset + Focus_Point; Width = $Item.first().width(); Length = $Active_Carousel_Item.length; for( i=0; i […]

优化正则表达式以过滤数千个HTML选择选项: 背景我为HTML select元素开发了一个基于jQuery的穿梭小部件，因为我找不到一个最低限度编码的小部件，并提供了一个补偿变音符号的正则表达式filter。问题当几个条目添加到select ，正则表达式filter会慢慢爬行。您可以看到问题如下：浏览到： http ： //jsfiddle.net/U8Xre/2/ 单击结果面板中的输入字段。键入任何正则表达式（例如， ^a.*ai ）。码我相信罪魁祸首潜伏在这里： var options = $src.empty().scrollTop( 0 ).data( “options” ); var search = $.trim( $input.val() ); var regex = new RegExp( search, ‘gi’ ); var len = options.length; var $html = $(document.createElement( ‘option’ )); for( var i = […]

优化代码只定义变量一次，代码仅在变量处于变更函数时才起作用，而变更外部的代码重新定义？: 很确定我知道解决方案…会写.on（’更改’，’加载’，函数（）{}正确吗？ < – 测试不起作用？所以我能够解决你的问题:) Sushanth – && adeneo都提出了很好的解决方案，这是优化代码的一个很好的教训…选择哪个答案很难，但我知道这会帮助我重新思考我的写作方式。如果没有这个论坛，我不知道我做了什么，我必须在大学里学习这些东西。这纯粹是出于好奇心和提高我的技能的问题，也是让你们有机会展示你对jQuery的知识。还要防止任何草率的写作。我有一个基于无线电的开关盒，标记看起来像这样，id和开/关值是由我的数组中的值与PHP生成的… //This color is the background of the toggle, I need jQuery to change this color based on the state on/off //this is my on value generated by the array // I create this input because I have multiple checkboxes that have the ID _moon_ARRAYVALUE_area1 […]

从缓存的选择器遍历DOM比在DOM中查找ID’d元素更快吗？: 关于通过类或id或其他选择器查找元素是否更快，存在很多问题。我对此不感兴趣。我想知道你是否有： var link = $(this); //let’s say you’re in a click handler 通过这样做找到容器是否更快 var container = link.closest(‘.container’); //assume container is .container 要么 var container = $(‘#mycontainer’); //assume same element as above 我问这个问题不仅仅是针对上面的特定场景（好吧，是的，对于这种场景也是如此），而是针对缓存遍历与创建具有ID的新jQuery对象。我注意到在我的很多代码中我倾向于使用前一种方法（因为它可以使它更具动态性），但我总是很好奇，如果以后一种方式做得更快。谢谢

衡量Javascript性能: 我正在尝试对我们的前端进行全面分析，我想知道是否有任何工具可以自动测量Javascript。例如：执行函数（无需我在记录之前/之后手动输入日期对象）我页面上的哪个脚本最慢，为什么找出我需要优化的function 我可以做任何jQuery改进（除了通过John Resig的jquery-profile.js ）我可以使用更好的选择器对某些对象进行记忆使用更好的function（例如：使用find因为它更快）我正在为我的JS寻找一个分析器（以及一些同样适用于jQuery的东西），除了像Firebug，Chrome开发工具，Yslow / Page速度插件等等。我正在寻找比JSlint更好的东西或者jsPerf。我在我的应用程序上运行New Relic，但它没有告诉我我的脚本缺少的位置。我希望有一种更简单的方式来分析我的JS而不是手动操作。我需要一个完整分析的解决方案，并给我一个包含指标的报告。

我该如何优化此代码？: 我有以下代码 (function($){ $.fn.kb = function(evt, map, fn, options) { var _this = this; var modifiers = [17, 18, 19]; function precise(a, b) { return b.Size – a.Size; } if (!this.data(“Combos”)) this.data(“Combos”, []); var combos = this.data(“Combos”); var combo = { Size: map.Keys.length, Function: fn, Keys: map.Keys.join(“”).toLowerCase() }; combos.push(combo) combos.sort(precise); map = $.extend({ Modifiers: [], Keys: […]