I was just reading this: http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx
我刚刚读到:http://www.tvidesign.co.uk/blog/impro-jquery- 25-excellent-tips.aspx
And had some questions about some of the advocated tricks:
并对一些提倡的伎俩提出了一些问题:
9 - Give your selectors a context:
9 -给你的选择者一个背景:
What's the difference between using a context and using a more specific selector?
使用上下文和使用更特定的选择器之间的区别是什么?
Rather than doing
而不是做
var selectedItem = $('#listItem' + i, $('.myList'));
What about
是什么
var selectedItem = $('.myList>#listItem' + i);
Which one is faster/better, or is there no difference?
哪个更快/更好，还是没有区别?
12 - Learn about event delegation:
12 -了解活动委托:
I would imagine that at low handler counts event delegation is slower than normal binding.
我可以想象，在低处理程序计数的情况下，事件委托比正常绑定要慢。
How many handlers is the time when you should start using event delegation?
有多少处理程序是您应该开始使用事件委托的时间?
Also, what is the difference (in terms of how fast or how 'good' it is) between using delegation and creating a click target in dom, having the user click that click target, and then have the click target find the elements to manipulate. Is this method faster or is delegation faster?
另外，在使用委托和在dom中创建单击目标之间的区别(在如何快速或如何“好”方面)，让用户单击单击目标，然后单击目标找到要操作的元素。这个方法更快还是授权更快?
Edit: In addition, how many levels should you be delegating? Is it better to delegate something 10 levels away, or to simply bind 2 handlers.
编辑:另外，你应该委派多少个级别?是将某些东西委托到10层之外，还是简单地绑定2个处理程序。
13 - Use classes to store state
13 -使用类来存储状态
14 - Even better, use jQuery's internal data() method to store state:
14 -更好的是，使用jQuery的internal data()方法存储状态:
Why use data vs classes? Is data faster? I think I generally find classes to be easier to read, contradicting what it says in the blog entry, because I can see it in the DOM.
为什么使用数据vs类?是数据更快?我认为我通常会发现类更容易阅读，与博客条目中的内容相矛盾，因为我可以在DOM中看到它。
Thanks!
谢谢!
4 个解决方案
#1
4
9 - Give your selectors a context:
9 -给你的选择者一个背景:
var selectedItem = $('#listItem' + i, $('.myList'));v/s
v / s
var selectedItem = $('#listItem' + i);
According to the article the first one should be faster. But I can't see how this can be...
根据这篇文章，第一个应该更快。但我不明白这是怎么回事……
First of all accessing by ID is one of the fastest ways to get to an element. It's just a lookup from global ID-s hash table. Adding a context to it should add no speed. Looking up the context should take some extra time and therefore the first example should be slower.
首先，通过ID访问是获取元素的最快方法之一。它只是全局ID-s哈希表的查找。向它添加上下文不会增加速度。查找上下文需要花费一些额外的时间，因此第一个示例应该更慢。
I also did some measurements and found that indeed the first one is many times slower.
我还做了一些测量，发现第一个确实比第一个慢很多倍。
As for this:
至于这个:
var selectedItem = $('.myList>#listItem' + i);
That should be about the same speed as the first one. And according to my measurements it is indeed about the same, just a little faster.
这个速度应该和第一个差不多。根据我的测量，它确实差不多，只是快了一点。
But the specifying context can be beneficial when dealing with other types of selectors and especially you reuse it, like that:
但是，在处理其他类型的选择器时，指定上下文可能是有益的，特别是您重用它时，例如:
var ctx = selectedItem = $('.myList')
for (var i=0; i<1000; i++) {
var selectedItem = $('.listItem' + i, ctx);
}
In this example it gives you a considerable speed boost.
在这个示例中，它提供了相当大的速度提升。
Like with everything else related to performance - you have to measure before you know if something applies in your specific situation.
就像其他所有与性能相关的东西一样——你必须在你知道某些东西是否适用于你的特定情况之前进行测量。
How many handlers is the time when you should start using event delegation?
有多少处理程序是您应该开始使用事件委托的时间?
When I feel that the page is slow. 99% of the time normal event handlers are good enough.
当我感觉页面变慢的时候。99%的正常事件处理程序是足够好的。
#2
2
I cannot answer you all questions, but probably could provide some relevant information, which can be useful.
我不能回答你们所有的问题，但可能可以提供一些相关的信息，这是有用的。
9 - Give your selectors a context:
9 -给你的选择者一个背景:
First one is more sophisticated, since that way you can pass an iframe element and lookup there. I don't think there is a difference in the performance.
第一个更复杂，因为这样可以传递iframe元素并在那里进行查找。我不认为表演有什么不同。
From documentation:
从文档:
JQuery( expression, context)
The core functionality of jQuery centers around this function. Everything in jQuery is based upon this, or uses this in some way. The most basic use of this function is to pass in an expression (usually consisting of CSS), which then finds all matching elements.JQuery的核心功能(表达式、上下文)围绕这个函数。jQuery中的一切都基于此，或者以某种方式使用它。这个函数最基本的用途是传入一个表达式(通常由CSS组成)，然后该表达式将找到所有匹配的元素。
By default, if no context is specified, $() looks for DOM elements within the context of the current HTML document. If you do specify a context, such as a DOM element or jQuery object, the expression will be matched against the contents of that context.
默认情况下，如果没有指定上下文，$()将在当前HTML文档的上下文中查找DOM元素。如果您确实指定了上下文(如DOM元素或jQuery对象)，则表达式将与该上下文的内容进行匹配。
14 - Even better, use jQuery's internal data() method to store state:
14 -更好的是，使用jQuery的internal data()方法存储状态:
This function can be useful for attaching data to elements without having to create a new expando. It also isn't limited to a string. The value can be any format. Class is more general, here you able to bind your data with element or set of elements. It can be used as metadata in some perspective.
这个函数对于将数据附加到元素而不需要创建新的expando非常有用。它也不局限于字符串。值可以是任何格式。类更一般，这里可以将数据绑定到元素或元素集。在某些方面，它可以用作元数据。
PS. You can find more information here
你可以在这里找到更多的信息。
#3
1
For (9)
(9)
Since there should only ever be one element with a given id the extra stuff doesn't seem necsesary... unless you are testing to see if it is actually there (in that exact nesting)
因为只有一个元素具有给定的id，所以额外的东西似乎不需要……除非您正在测试它是否确实存在(在那个嵌套中)
If the reverse is the case (e.g. the context is very specific, and the selected element(s) you want are fairly generic) I can see how this would help...
如果情况正好相反(例如，上下文是非常特定的，而所选择的元素是相当通用的)，我可以看到这将如何帮助……
//LI elems with CSS class "foo"
//but only inside the element with the ID "onlyInHere"
$('li.foo', '#onlyInHere')
#4
1
Regarding #9:
关于# 9:
When you provide a context to your selector queries you limit the size of the tree being traversed to find the elements matching your selector, especially if you're using selectors that use tag names like: $('div > span').
当您为选择器查询提供上下文时，您将限制遍历的树的大小，以查找与选择器匹配的元素，特别是如果您使用的选择器使用标签名，如:$('div > span')。
Performance depends on the type of selector and the number of elements in the context you're providing.
性能取决于选择器的类型和提供的上下文中的元素数量。
Take a look at getElementsByTagName to better understand these issues.
查看getElementsByTagName以更好地理解这些问题。
As for "which one is better" - this depends heavily on the size of the DOM being traversed and on a number of other elements, but in general, the first selector (the one with the context) should be faster.
至于“哪个更好”——这在很大程度上取决于要遍历的DOM的大小和其他一些元素，但一般来说，第一个选择器(具有上下文的选择器)应该更快。
Regarding #12:
关于# 12:
In general, it is good practice to use event delegation when the number of child elements inside a parent element (cells inside a table, for example) is unknown and is expected to be quite large. This usually applies to cases where data is pulled from a server. The common scenarios are tree and grid structures.
一般来说，当父元素(例如表中的单元)中的子元素数量未知并且期望相当大时，使用事件委托是很好的做法。这通常适用于从服务器提取数据的情况。常见的场景是树和网格结构。
Regarding #13:
关于# 13:
I think the example provided in the document you're referring to does the job, but I'll try to elaborate a bit further. Classes are a common and standard way to attach additional information to HTML nodes. Lets take a Tab bar as an example: assuming you have a standard class "tab" which applies to every tab in your tab bar, you could add an additional class to one of the tabs to indicate that it is currently selected. Adding an additional class called "selected" would allow you to apply a different style to the selected tab and query the tab bar using jQuery for some additional logic (for example: check which tab is currently selected to perform an HTTP request and retrieve the content for this tab).
我认为您所指的文档中提供的示例完成了这项工作，但我将尝试进一步阐述。类是将附加信息附加到HTML节点的一种常见和标准的方式。让我们以一个选项卡栏为例:假设您有一个标准类“选项卡”，它适用于选项卡栏中的每个选项卡，您可以向其中一个选项卡添加一个额外的类，以表明它是当前选中的。添加一个名为“selected”的附加类将允许您将不同的样式应用到所选的选项卡中，并使用jQuery对一些附加的逻辑进行查询(例如:检查当前选择哪个选项卡执行HTTP请求并检索该选项卡的内容)。
Regarding #14:
关于# 14:
Classes are limited in the type and amount of data you can (or should) store in them. Data is a more flexible way to store large amounts of state data for HTML elements.
类在可以(或应该)存储在类中的数据类型和数量上受到限制。数据是为HTML元素存储大量状态数据的一种更灵活的方法。
#1
4
9 - Give your selectors a context:
9 -给你的选择者一个背景:
var selectedItem = $('#listItem' + i, $('.myList'));v/s
v / s
var selectedItem = $('#listItem' + i);
According to the article the first one should be faster. But I can't see how this can be...
根据这篇文章，第一个应该更快。但我不明白这是怎么回事……
First of all accessing by ID is one of the fastest ways to get to an element. It's just a lookup from global ID-s hash table. Adding a context to it should add no speed. Looking up the context should take some extra time and therefore the first example should be slower.
首先，通过ID访问是获取元素的最快方法之一。它只是全局ID-s哈希表的查找。向它添加上下文不会增加速度。查找上下文需要花费一些额外的时间，因此第一个示例应该更慢。
I also did some measurements and found that indeed the first one is many times slower.
我还做了一些测量，发现第一个确实比第一个慢很多倍。
As for this:
至于这个:
var selectedItem = $('.myList>#listItem' + i);
That should be about the same speed as the first one. And according to my measurements it is indeed about the same, just a little faster.
这个速度应该和第一个差不多。根据我的测量，它确实差不多，只是快了一点。
But the specifying context can be beneficial when dealing with other types of selectors and especially you reuse it, like that:
但是，在处理其他类型的选择器时，指定上下文可能是有益的，特别是您重用它时，例如:
var ctx = selectedItem = $('.myList')
for (var i=0; i<1000; i++) {
var selectedItem = $('.listItem' + i, ctx);
}
In this example it gives you a considerable speed boost.
在这个示例中，它提供了相当大的速度提升。
Like with everything else related to performance - you have to measure before you know if something applies in your specific situation.
就像其他所有与性能相关的东西一样——你必须在你知道某些东西是否适用于你的特定情况之前进行测量。
How many handlers is the time when you should start using event delegation?
有多少处理程序是您应该开始使用事件委托的时间?
When I feel that the page is slow. 99% of the time normal event handlers are good enough.
当我感觉页面变慢的时候。99%的正常事件处理程序是足够好的。
#2
2
I cannot answer you all questions, but probably could provide some relevant information, which can be useful.
我不能回答你们所有的问题，但可能可以提供一些相关的信息，这是有用的。
9 - Give your selectors a context:
9 -给你的选择者一个背景:
First one is more sophisticated, since that way you can pass an iframe element and lookup there. I don't think there is a difference in the performance.
第一个更复杂，因为这样可以传递iframe元素并在那里进行查找。我不认为表演有什么不同。
From documentation:
从文档:
JQuery( expression, context)
The core functionality of jQuery centers around this function. Everything in jQuery is based upon this, or uses this in some way. The most basic use of this function is to pass in an expression (usually consisting of CSS), which then finds all matching elements.JQuery的核心功能(表达式、上下文)围绕这个函数。jQuery中的一切都基于此，或者以某种方式使用它。这个函数最基本的用途是传入一个表达式(通常由CSS组成)，然后该表达式将找到所有匹配的元素。
By default, if no context is specified, $() looks for DOM elements within the context of the current HTML document. If you do specify a context, such as a DOM element or jQuery object, the expression will be matched against the contents of that context.
默认情况下，如果没有指定上下文，$()将在当前HTML文档的上下文中查找DOM元素。如果您确实指定了上下文(如DOM元素或jQuery对象)，则表达式将与该上下文的内容进行匹配。
14 - Even better, use jQuery's internal data() method to store state:
14 -更好的是，使用jQuery的internal data()方法存储状态:
This function can be useful for attaching data to elements without having to create a new expando. It also isn't limited to a string. The value can be any format. Class is more general, here you able to bind your data with element or set of elements. It can be used as metadata in some perspective.
这个函数对于将数据附加到元素而不需要创建新的expando非常有用。它也不局限于字符串。值可以是任何格式。类更一般，这里可以将数据绑定到元素或元素集。在某些方面，它可以用作元数据。
PS. You can find more information here
你可以在这里找到更多的信息。
#3
1
For (9)
(9)
Since there should only ever be one element with a given id the extra stuff doesn't seem necsesary... unless you are testing to see if it is actually there (in that exact nesting)
因为只有一个元素具有给定的id，所以额外的东西似乎不需要……除非您正在测试它是否确实存在(在那个嵌套中)
If the reverse is the case (e.g. the context is very specific, and the selected element(s) you want are fairly generic) I can see how this would help...
如果情况正好相反(例如，上下文是非常特定的，而所选择的元素是相当通用的)，我可以看到这将如何帮助……
//LI elems with CSS class "foo"
//but only inside the element with the ID "onlyInHere"
$('li.foo', '#onlyInHere')
#4
1
Regarding #9:
关于# 9:
When you provide a context to your selector queries you limit the size of the tree being traversed to find the elements matching your selector, especially if you're using selectors that use tag names like: $('div > span').
当您为选择器查询提供上下文时，您将限制遍历的树的大小，以查找与选择器匹配的元素，特别是如果您使用的选择器使用标签名，如:$('div > span')。
Performance depends on the type of selector and the number of elements in the context you're providing.
性能取决于选择器的类型和提供的上下文中的元素数量。
Take a look at getElementsByTagName to better understand these issues.
查看getElementsByTagName以更好地理解这些问题。
As for "which one is better" - this depends heavily on the size of the DOM being traversed and on a number of other elements, but in general, the first selector (the one with the context) should be faster.
至于“哪个更好”——这在很大程度上取决于要遍历的DOM的大小和其他一些元素，但一般来说，第一个选择器(具有上下文的选择器)应该更快。
Regarding #12:
关于# 12:
In general, it is good practice to use event delegation when the number of child elements inside a parent element (cells inside a table, for example) is unknown and is expected to be quite large. This usually applies to cases where data is pulled from a server. The common scenarios are tree and grid structures.
一般来说，当父元素(例如表中的单元)中的子元素数量未知并且期望相当大时，使用事件委托是很好的做法。这通常适用于从服务器提取数据的情况。常见的场景是树和网格结构。
Regarding #13:
关于# 13:
I think the example provided in the document you're referring to does the job, but I'll try to elaborate a bit further. Classes are a common and standard way to attach additional information to HTML nodes. Lets take a Tab bar as an example: assuming you have a standard class "tab" which applies to every tab in your tab bar, you could add an additional class to one of the tabs to indicate that it is currently selected. Adding an additional class called "selected" would allow you to apply a different style to the selected tab and query the tab bar using jQuery for some additional logic (for example: check which tab is currently selected to perform an HTTP request and retrieve the content for this tab).
我认为您所指的文档中提供的示例完成了这项工作，但我将尝试进一步阐述。类是将附加信息附加到HTML节点的一种常见和标准的方式。让我们以一个选项卡栏为例:假设您有一个标准类“选项卡”，它适用于选项卡栏中的每个选项卡，您可以向其中一个选项卡添加一个额外的类，以表明它是当前选中的。添加一个名为“selected”的附加类将允许您将不同的样式应用到所选的选项卡中，并使用jQuery对一些附加的逻辑进行查询(例如:检查当前选择哪个选项卡执行HTTP请求并检索该选项卡的内容)。
Regarding #14:
关于# 14:
Classes are limited in the type and amount of data you can (or should) store in them. Data is a more flexible way to store large amounts of state data for HTML elements.
类在可以(或应该)存储在类中的数据类型和数量上受到限制。数据是为HTML元素存储大量状态数据的一种更灵活的方法。