Оптимізація JavaScript частина 2: Застосування стилів до елементів (ісходникі), Різне, Програмування, статті

Частина 1


Це друга частина циклу статей, присвячених оптимізації JavaScript. У цій замітці я розгляну динамічну зміну стилів елементів і трохи розкрою процес рендеринга HTML. Крім того, в цій замітці ви знайдете деякі трюки, що дозволяють зробити Ваші програм швидше.


Сценарій: Ваш документ містить елементи, у яких потрібно поміняти колір, фон або що-небудь ще, що відноситься до стилів. Наприклад, підсвітити рядки таблиці при наведенні миші або помітити їх, якщо обрано відповідний чекбокс.

І знову, я знаю два способи: використовуючи стилі або встановивши колір (або фон) безпосередньо з JavaScript. Для початку трохи тестів:


var items = el.getElementsByTagName(“li”);
for (var i = 0; i < 1000; i++) {
        items[i].className = “selected”;
}

Середній результат 187 – 291 мс, для InternetExplorer 6 час склало 512 мс, і в Opera 9 воно дорівнює 47 мс.


var items = el.getElementsByTagName(“li”);
for (var i = 0; i < 1000; i++) {
        items[i].style.backgroundColor = “#007f00”;
        items[i].style.color = “#ff0000”;
}

Я отримав результати, що починаються з 282 мс в Opera 9 і закінчуються 1709 мс в Internet Explorer 6.


Результати прості і зрозумілі:





























No


Method


IE 6


IE 7


FF 1.5


FF 2.0


Opera 9

1 element.className  512 187 291 203 47
2 element.style.color  1709 422 725 547 282


Ви можете подивитися тест і отримати власні результати продуктивності тут.


Схоже на те, що це сама малозначима стаття циклу, але … є одна штука з Internet Explorer – оновлення сторінки. Пам’ятайте сценарій, описаний на початку статті, про onmouseover? Коли Ви змінюєте ім’я класу елемента, Ваш код значно швидше відпрацьовує, але ось сторінка оновлюється повільно. Погляньте на приклад. Спробуйте клікнути “Generate elements”, коли обрана опція “element.className”. Спробуйте посувати мишкою над елементами, проскролліть список до кінця і посувати знову (для повільних машин кількість елементів буде менше встановленого за замовчуванням, для більш швидких – більше). Ви помітили, що фон сильно відстає від курсора миші? Тепер переведіть на “element.style.color” (не забудьте знову натиснути “Generate elements”). Фон змінюється більш плавно, правда?


Внизу сторінки ви бачите кількість спійманих подій onmouseover і середній час, витрачений на їх обробку. Як Ви могли помітити, в першому випадку код відпрацьовує більш ніж в два рази швидше! Чому ж виглядає повільніше? Я думаю, все через те, що зміна властивості className в Internet Explorer не перемальовував сторінку миттєво, замість цього він просто поміщає подію оновлення в чергу. Звідси і величезна швидкість, здавалося б, більш складної процедури. Якщо у Вас є інші ідеї, будь ласка, відпишіть в коментарях.


Ті, хто дочитав до цього місця, напевно скажуть: “Ееее, товаришу, ти хитруєш. А де ж :hover? “. Поспішаю виправити положення і дописую цей варіант. По-перше, ця штука не працює в Internet Explorer 6 (і не треба питати” кому він потрібний? “). Але це не найбільша проблема, набагато гірше справи йдуть з продуктивністю. Навіть коментувати не хочу, просто виберіть третій радіобаттон на наведеної вище сторінці і посувайте мишею в Internet Explorer 7 і Opera 9.


Висновки


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*