Posted by Pavel Podlipensky on December 23 11:15 PM
<p> Недавно John Resig <a rel="nofollow" href="http://blog.jquery.com/2008/12/22/help-test-jquery-13-beta-1/" target="_blank">писал в блоге</a> о релизе бета-версии JQuery 1.3. Большинство новых фич опубликованы в официальном roadmap, но я вам расскажу то, о чем никто не знает.. Тсссс... </p> <p> <strong>Sizzle Selector Engine</strong> </p> <p> <a rel="nofollow" href="http://github.com/jeresig/sizzle/tree/master" target="_blank">Новый движок</a> для навигации по ДОМу, который Джон аннонсировал еще в августе, должен работать в четыре раза быстрее под Firefox. (А как же Internet Explorer?) </p> <p> <strong>Забиваем на определение версии браузера</strong> </p> <p> Теперь вместо </p> <div style="border: 1px solid gray; margin: 10px 0px; padding: 4px; overflow: auto; font-size: 8pt; width: 97.5%; cursor: text; max-height: 200px; line-height: 12pt; font-family: consolas,'Courier New',courier,monospace; background-color: #f4f4f4"> <pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; font-size: 8pt; width: 100%; color: black; line-height: 12pt; font-family: consolas,'Courier New',courier,monospace; background-color: #f4f4f4"> <span style="color: #0000ff">if</span> ( jQuery.browser.msie && !jQuery.isXMLDoc(<span style="color: #0000ff">this</span>) ) { </pre> </div> <p> будем писать </p> <div style="border: 1px solid gray; margin: 10px 0px; padding: 4px; overflow: auto; font-size: 8pt; width: 97.5%; cursor: text; max-height: 200px; line-height: 12pt; font-family: consolas,'Courier New',courier,monospace; background-color: #f4f4f4"> <pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; font-size: 8pt; width: 100%; color: black; line-height: 12pt; font-family: consolas,'Courier New',courier,monospace; background-color: #f4f4f4"> <span style="color: #0000ff">if</span> ( !jQuery.support.noCloneEvent && !jQuery.isXMLDoc(<span style="color: #0000ff">this</span>) ) { </pre> </div> <p> Чтож, от подобных проверок все равно не уйдешь, а об удобстве данного изменения судить вам. </p> <p> <strong>Live event delegration</strong> </p> <p> Всем известно как добавлять обработчики событий к элементам с помощью JQuery: </p> <div style="border: 1px solid gray; margin: 10px 0px; padding: 4px; overflow: auto; font-size: 8pt; width: 97.5%; cursor: text; max-height: 200px; line-height: 12pt; font-family: consolas,'Courier New',courier,monospace; background-color: #f4f4f4"> <pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; font-size: 8pt; width: 100%; color: black; line-height: 12pt; font-family: consolas,'Courier New',courier,monospace; background-color: #f4f4f4"> $(<span style="color: #006080">"#foo > div"</span>).bind(<span style="color: #006080">"click"</span>, someFn); </pre> </div> <p> Также все помнят, что после добавления нового элемента div в контейнер с id=”foo” необходимо заново забайндить это событие. С новым релизом JQuery мы сможем воспользоваться методом live, который добавит обработчик событий всем элементам, даже тем, которые будут добавлены позднее. </p> <div style="border: 1px solid gray; margin: 10px 0px; padding: 4px; overflow: auto; font-size: 8pt; width: 97.5%; cursor: text; max-height: 200px; line-height: 12pt; font-family: consolas,'Courier New',courier,monospace; background-color: #f4f4f4"> <pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; font-size: 8pt; width: 100%; color: black; line-height: 12pt; font-family: consolas,'Courier New',courier,monospace; background-color: #f4f4f4"> $(<span style="color: #006080">"#foo > div"</span>).live(<span style="color: #006080">"click"</span>, someFn); </pre> </div> <p> <strong>Event triggering</strong> </p> <p> После того, как вы подписались на событие, используя например .click() – вызов этого события произойдет и у родительских элементов. </p> <p> <strong>Улучшение производительности эффектов</strong> </p> <p> Не буду вдаваться в подробности, но методы append(), prepend(), before(), after(), hide() и show() теперь могут работать быстрее (раз эдак в 15!). </p> <p> <strong>Клозет-метод</strong> </p> <p> Метод оправдывает свое название и находит ближайший <strike>туалет</strike> элемент соответствующий условию. </p> <div style="border: 1px solid gray; margin: 10px 0px; padding: 4px; overflow: auto; font-size: 8pt; width: 97.5%; cursor: text; max-height: 200px; line-height: 12pt; font-family: consolas,'Courier New',courier,monospace; background-color: #f4f4f4"> <pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; font-size: 8pt; width: 100%; color: black; line-height: 12pt; font-family: consolas,'Courier New',courier,monospace; background-color: #f4f4f4"> <span style="color: #008000">//Найти ближайший div. Если this и есть div-элемент, то вернет this.</span> $(<span style="color: #0000ff">this</span>).closest(<span style="color: #006080">"div"</span>); </pre> </div> <p> И в заключение предоставлю скриншоты результатов теста на производительность различных фреймворков (MooTools, Prototype, YUI, JQuery) под разные браузеры (IE, Opera, FireFox, Chrome): </p> <table border="0" cellspacing="0" cellpadding="2" width="400"> <tbody> <tr> <td width="100" valign="top">Chrome</td> <td width="100" valign="top">IE 7</td> <td width="100" valign="top">Opera</td> <td width="100" valign="top">FireFox</td> </tr> <tr> <td width="100" valign="top"><a href="/image.axd?picture=WindowsLiveWriter/JQuery1.3_B8B7/chrome_2.png"><img style="border: 0px none " src="/image.axd?picture=WindowsLiveWriter/JQuery1.3_B8B7/chrome_thumb.png" border="0" alt="chrome" title="chrome" width="109" height="244" /></a></td> <td width="100" valign="top"><a href="/image.axd?picture=WindowsLiveWriter/JQuery1.3_B8B7/ie7_2.png"><img style="border: 0px none " src="/image.axd?picture=WindowsLiveWriter/JQuery1.3_B8B7/ie7_thumb.png" border="0" alt="ie7" title="ie7" width="151" height="244" /></a> </td> <td width="100" valign="top"><a href="/image.axd?picture=WindowsLiveWriter/JQuery1.3_B8B7/opera_2.png"><img style="border: 0px none " src="/image.axd?picture=WindowsLiveWriter/JQuery1.3_B8B7/opera_thumb.png" border="0" alt="opera" title="opera" width="137" height="244" /></a> </td> <td width="100" valign="top"><a href="/image.axd?picture=WindowsLiveWriter/JQuery1.3_B8B7/firefox_2.png"><img style="border: 0px none " src="/image.axd?picture=WindowsLiveWriter/JQuery1.3_B8B7/firefox_thumb.png" border="0" alt="firefox" title="firefox" width="105" height="244" /></a> </td> </tr> </tbody> </table> <p> Верить им или нет – решайте сами. </p> <p> <strong>Полезные ссылки</strong> </p> <p> <a rel="nofollow" href="http://mootools.net/slickspeed/" target="_blank">Speed/validity selectors test for frameworks</a> </p> <p> <a rel="nofollow" href="http://blog.jquery.com/2008/12/22/help-test-jquery-13-beta-1/" target="_blank">Help Test jQuery 1.3 Beta 1</a> </p>

Недавно John Resig писал в блоге о релизе бета-версии JQuery 1.3. Большинство новых фич опубликованы в официальном roadmap, но я вам расскажу то, о чем никто не знает.. Тсссс...

Sizzle Selector Engine

Новый движок для навигации по ДОМу, который Джон аннонсировал еще в августе, должен работать в четыре раза быстрее под Firefox. (А как же Internet Explorer?)

Забиваем на определение версии браузера

Теперь вместо

if ( jQuery.browser.msie && !jQuery.isXMLDoc(this) ) { 

будем писать

if ( !jQuery.support.noCloneEvent && !jQuery.isXMLDoc(this) ) { 

Чтож, от подобных проверок все равно не уйдешь, а об удобстве данного изменения судить вам.

Live event delegration

Всем известно как добавлять обработчики событий к элементам с помощью JQuery:

$("#foo > div").bind("click", someFn);

Также все помнят, что после добавления нового элемента div в контейнер с id=”foo” необходимо заново забайндить это событие. С новым релизом JQuery мы сможем воспользоваться методом live, который добавит обработчик событий всем элементам, даже тем, которые будут добавлены позднее.

$("#foo > div").live("click", someFn);

Event triggering

После того, как вы подписались на событие, используя например .click() – вызов этого события произойдет и у родительских элементов.

Улучшение производительности эффектов

Не буду вдаваться в подробности, но методы append(), prepend(), before(), after(), hide() и show() теперь могут работать быстрее (раз эдак в 15!).

Клозет-метод

Метод оправдывает свое название и находит ближайший туалет элемент соответствующий условию.

//Найти ближайший div. Если this и есть div-элемент, то вернет this.
$(this).closest("div"); 

И в заключение предоставлю скриншоты результатов теста на производительность различных фреймворков (MooTools, Prototype, YUI, JQuery) под разные браузеры (IE, Opera, FireFox, Chrome):

Chrome IE 7 Opera FireFox
chrome ie7 opera firefox

Верить им или нет – решайте сами.

Полезные ссылки

Speed/validity selectors test for frameworks

Help Test jQuery 1.3 Beta 1