Tag: 优化

捆绑脚本中的$（document）.ready（）

我最近在网络优化方面做了很多工作，我遇到了一个有趣的问题。 我想知道是否有人可能知道现有的解决方案。 假设您有多个特定于页面的外部.js文件，每个文件都有自己的页面特定的$(document).ready()函数。 假设第1页的文档就绪function将样式应用于正文中的每个 ，而第2页中准备好的文档仅为 s样式。 只是一个简单的例子。 现在假设您将这两个脚本以及所有库脚本捆绑在一起，以减少页面加载时的http请求数。 现在，两个文档就绪了，第2页的li将使用仅适用于第1页的代码进行格式化。 我的问题是 – 有没有办法通过jQuery或第三方库分配特定文档准备到特定页面但仍然将它们全部捆绑到一个.js文件中？

保存页面加载时间的提示

我的问题 ：什么是最好的方法来削减那些不必要的kbs并使页面加载更快。所有优化实践+编码实践 （在js，php中）如果执行可以使您的页面更轻。 为什么我这样问 ：我在jquery.js和jquery.min.js上阅读了这篇文章。我以为很多人在不知道它的含义的情况下使用它。我基本上是在android和ios手机上制作广告单元。所以在我的领域节省每一个kb变得非常关键 。 我最近开始使用jquery.min而不是简单的javascript.But再次增加了整体kbs大小。大爸爸谷歌在他们的页面排名哲学中跟踪这个方面。所以这个问题变得更加重要，在最顶层的搜索我确实在谷歌搜索，但没有一个链接提出了一些可靠的答案。 我想知道除了使用任何js库的缩小版本之外，人们应该怎么做才能使他们的网页在移动设备以及平板电脑和PC浏览器上更轻松 。 在某些时候，每个javascript编码器都必须考虑这个问题。

如何压缩ajax请求的响应？

我将整个HTML作为ajax请求的响应（不仅仅是作为JSON的数组）返回 。 如您所知，响应将稍微大一些（比JSON） 。 因为它包含更多的东西，比如html标签，html属性等……所以 提高可扩展性（减少服务器负载）。 减少网络带宽（降低成本）。 更好的用户体验（更快）。 我想压缩响应。 类似.gzip格式的东西。 基于这样的测试，这是ajax响应的大小： 这是压缩的ajax响应的大小： 看到？ 他们的尺寸差别很大。 我想知道的是，是否有可能在途中压缩ajax请求的响应并将其转换为客户端的常规文本？ 为此，我需要在Web服务（如nginx）配置中进行一些更改吗？ 或者它自动完成？

大型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 […]

隐藏成千上万个元素的最快方法？

我有一个自动填充表单，用户可以在其中键入一个术语，并隐藏所有不包含该术语的 元素。 我最初使用jQuery循环遍历所有 并将.hide()应用于不包含该术语的那些。 这太慢了。 我发现更快的方法是循环遍历所有 并将类.hidden应用于所有需要隐藏的东西，然后在循环结束时执行$(‘.hidden’).hide() 。 这虽然感觉有些苛刻。 一种可能更快的方法可能是使用document.styleSheets重写.hidden类的CSS规则。 有谁能想到更好的方法？ 编辑：让我澄清一些我不确定太多人知道​​的事情。 如果在循环的每次迭代中更改DOM，并且该更改导致重新绘制页面，那么这将比“准备”所有更改慢得多，并在循环结束时立即应用它们。

当我把jquery库放在body之前时$（document）.ready不工作

这是工作 $(document).ready(function(){ $(“button”).click(function(){ $(“p”).slideToggle(); }); }); This is a paragraph. Toggle between slide up and slide down for ap element 但是当我搬家的时候 在标签之前它不起作用，因为我想把JavaScript放在底部，但我不能把文件.ready部分放在jquery库之后，什么是解决方案。

使用Chrome中的jQuery实时过滤1500多个项目

我被Chrome / Webkit 71305错误所困扰 ，其中隐藏了大量节点会导致Chrome挂起。 （也发生在Safari中）。 我正在使用以下内容过滤下拉菜单中的列表项： jQuery.expr[‘:’].Contains = function(a, i, m) { return $.trim((a.textContent || a.innerText || “”)).toUpperCase().indexOf(m[3].toUpperCase()) == 0; }; var input = $(‘input’); var container = $(‘ul’); input.keyup(function(e) { var filter = $.trim(input.val()); if (filter.length > 0) { // Show matches. container.find(“li:Contains(” + filter + “)”).css(“display”, “block”); container.find(“li:not(:Contains(” + filter + “))”).css(“display”, […]

jQuery优化选择器

我想知道有一天当你在jQuery中输入你的选择器时，如果你指定你的选择器非常具体或非常松散，它会对性能产生影响。 例如 $(‘$myId .someElement’) 要么 $(‘table#myId > tbody > tr > td > div.someElement’); 第二个选项是否会更快或者差异是否可以忽略，比如在做.each()如果你需要.each()找到相同的元素。

基于每行输入动态推送数组

基于我的代码，我想将每行的输入推送到每个数组。 如果是row1，则应将第1行的所有输入值推送到数组a1 。 第二行的输入应该被推送到数组a2 ，依此类推。 这主要是为了我的代码的性能优化，因为我的真实代码行是20+，我试图像下面这样做，但没有成功。 我希望能够知道每一行的数据（用于validation目的） $(‘#check’).click(function(event){ event.preventdefault; var a1=[];var a2=[]; $(“[id^=row]”).find(“td input”).each(function(i) { a[i].push(this.value); }); $(‘#output’).html(‘Pushed arrays:a1: [‘+a1 +’] a2: [‘+a2+’]’); }); 1 1 Check Values