1. Блогери - жертви своєї наївності
2. Не всі віджети однаково корисні
3. Що браузери роблять з JavaScript?
4. Отже, як зробити JavaScript-віджети краще і швидше?
5. Куди котиться світ?
6. Читати далі

Примітка: нижче переклад статті "How JavaScript is Slowing Down the Web (And What To Do About It)" , Присвяченій, в основному, роботі з віджетами: характерні проблеми і методи їх вирішення.

Один рядок JavаScript є основою більшості поточних технологій, які використовують автори блогів. Віджети, засоби (фото- / відео-) обміну, відстеження відвідувачів, рекламні оголошення. У багатьох випадках єдиний рядок JavaScript - це все, що потрібно автору, щоб додати в своїй блог щось новеньке. Проблеми починаються тоді, коли багато-багато цих самих рядків збирається разом ...

У фізиці це явище добре відомо під терміном нелінійність (non-linearity, насправді, це цілий розділ фізики, сюди відносять масу різнорідних явищ, об'єднаних однією загальною властивістю): коли безліч різнорідних речей приходить в взаємодію один з одним, результат вкрай важко передбачити . Програмне забезпечення, насправді, нічим не відрізняється: якщо звести воєдино безліч компонентів, ви не зможете з упевненістю сказати, що ж вийде насправді. Це відбувається через те, що компоненти, спроектовані для одиночної, незалежної роботи, починають, буквально кажучи, боротися за наявні ресурси: реальний простір (real estate space) і увагу людей. В результаті цієї війни страждають усі: читачі, автори і самі сервіси. Все виявляються в програші.

У цій статті ми спробуємо розглянути, чому сторінки розвалюються через велику кількість «окремих рядків коду», і як же з цим боротися.

Блогери - жертви своєї наївності

Віджети - це нові і незвідані шматочки коду, за якими майбутнє. Блогери люблять підкреслювати власну індивідуальність і робити утримання своїх блогів більш унікальним. Саме тому автори так прагнуть поставити собі все нові і нові віджети: del.icio.us, Flickr, Twitter, AddThis, Sphere - вони все досить функціональні, і на них існує великий попит.

Віджети граничні прості в установці, якщо ви добре знайомі з HTML і вашої платформою для блогу. Все, що потрібно, - це вставити HTML код для віджета туди, де ви хочете, щоб він відобразився. Іноді його потрібно вставити в тег head, але це абсолютно не складно. Отже, маючи навіть мінімальні технічні пізнання, ви зможете це зробити або для цієї мети можна використовувати платформу, на зразок Widgetbox , Щоб автоматизувати процес.

Установка віджетів не представляє ніяких складнощів, і користувачі встановлюють їх один за іншим в своїх блогах - і ось тоді починаються проблеми: як результат, блоги вантажаться довше.

Не всі віджети однаково корисні

Зараз існує дві основні технології для підключення віджетів: Flash і JavaScript. У віджетів на Flash'е одні труднощі: великий розмір файлів, неможливість змінити розмір картинки, неможливість взаємодії з DOM. Однак, це ще півбіди у порівнянні з віджетами на JavaScript.

Найсмішніше в тому, що JavaScript замислювався і проектувався як легкий мову програмування для підтримки мінімального взаємодії і швидких маніпуляцій з HTML на стороні клієнта (призначеного для користувача агента). Однак, багато в чому завдяки хитромудрості шляху розвитку цієї технології, JavaScript виявився (основним) мовою програмування для веба. Сьогодні JavaScript використовується в багатьох передових проектах: починаючи з технології AJAX і закінчуючи віджетами. Однак, не без підводних каменів. Давайте їх розглянемо ...

Що браузери роблять з JavaScript?

Напевно, одним з найбільш шокуючих фактів для будь-якої спокуси фахівця є те, що JavaScript виконується в один потік (далі все ж робиться невеликий відступ про timeout'и, адже вони дозволяють запускати кілька процесів якщо не паралельно, то хоча б «псевдо-паралельно» ). Це означає, що робота JavaScript-інтерпретатора в браузері йде строго послідовно, ніяк не паралельно (за винятком викликів AJAX). У той момент, коли шматочок JavaScript завантажується або виконується, все інше чекає в черзі.

Це означає, що окремий JavaScript-скрипт здатний трохи сповільнити завантаження цілого блогу. І це повсякденна реальність всієї блогосфери (мільярди годин машинного часу, витраченого на виконання JavaScript; мільйони засмучених блогерів; сотні тисяч доларів втраченого прибутку). І де ж вихід?

Отже, як зробити JavaScript-віджети краще і швидше?

На жаль, ніякого універсального рішення для цієї проблеми немає: немає такого унікального прийому, який би міг разом розв'язати цю проблему. Однак, є ряд дій, які здатні якщо не вирішити проблему остаточно, то помітно знизити її гостроту, і дозволити частково позбутися від «нелінійних» ефектів. Нижче наводиться їх перелік, з яким рекомендується ознайомитися всім виробникам віджетів:

1. Робіть завантаження JavaScript «відкладеної»

   Однією з найбільш частих проблем з розглянутого комлексу є пряме виконання JavaScript по ходу завантаження сторінки, хоча цього можна і уникнути. Якщо код скрипта не змінює вміст сторінки (DOM) при завантаженні, то виконання цього коду може бути відкладено до повного завантаження сторінки. Таки чином, спочатку з'явиться зміст сторінки, а потім вже будуть виконуватися всі відкладені скрипти. На жаль, це підтримується не всіма браузерами. Детальніше про атрибут defer у тега <script>.

2. Зменшуйте обсяг коду, який повинен виконатися при повному завантаженні сторінки (при подію window.onload)

   Все, що виповнюється після завантаження сторінки, збільшує час цієї завантаження. Чим менше коду буде виконано, тим краще. Іншим важливим моментом є відсікання залежностей для завантаження конкретної сторінки (коли завантаження залежить від ряду зовнішніх завантажень або викликів). Це велика проблема, тому що може спричинити «підвішеному» виклик скрипта. У будь-якому випадку, JavaScript код, який виконується кілька секунд, є вузьким місцем (bottleneck) при завантаженні сторінки. Використовуючи розбиття виконання коду на окремі незалежні частини за допомогою затримок (timeouts) можна частково вирішити цю проблему, хоча це і досить дорогий ( «хворобливий») шлях. Також в цьому випадку може допомогти використання «Ненав'язливого» (unobtrustive) JavaScript

3. Використовуйте балансувальник навантаження за допомогою різних URL для довантажувати файлу JavaScript

   Зараз більшість скриптів використовує єдиний URL в якості джерела основного файлу, наприклад: www.mycoolwidget.com. Це немасштабіруемое рішення. Чим далі поширюється віджет, тим більше навантаження на сервер з вихідним кодом, і число паралельних запитів на один і той же сервер може бути досить великим. Найкраще видавати користувачам різні URL'и, наприклад: server1.mycoolwidget.com, server2.mycoolwidget.com і т.д. Нехай навіть спочатку вони будуть вказувати на один і той же IP адреса (фізичну машину), проте, в майбутньому це дозволить розділити трафік і навантаження.

4. Використовуйте стандартні бібліотеки

   Мабуть, найгірше те, що автори JavaScript коду кожного разу винаходять велосипед, хоча це і загрожує великою кількістю помилок. У порівнянні з Java (в якій присутній набір стандартних бібліотек), в JavaScript немає нічого, схожого на стандарт, але, мабуть, досить ефективно буде використовувати такі розробляються бібліотеки, як prototype . Вони написані досить досвідченими людьми, які вже наступили не один раз на всі можливі граблі, тому їм можна довіряти. У будь-якому випадку, використовувати їх напрацювання може виявитися дуже корисним. Передбачається, то для зменшення коду віджетів він завантажує стандартну бібліотеку, ту ж prototype, або перевіряє, завантажена вона. Чим більше буде віджетів, які використовують якийсь стандарт, тим менше зовнішнього коду доведеться завантажувати відвідувачам сторінок.

5. "Сім разів відмір один раз відріж"

   Припускайте наявність інших JavaScript файлів, які можуть завантажуватися на сайті автора блогу, це дуже ймовірно. Розглядаючи себе частиною великої системи, розробники можуть уникнути ряду проблем, які можуть виникнути при конфлікті їх розробок з чужими (віджетами), і гарантувати доступність своїх додатків у кожного окремого користувача.

Куди котиться світ?

Хоча і (просунуте) знання JavaScript в інтернеті і є плюсом для авторів, але розробникам віджетів теж є над чим поміркувати. Ви просто не зможете припустити, де і як ваш віджет будуть використовуватися, що ще буде встановлено (на конкретній веб-сторінці). Без цієї інформації, налагодження і відшліфовування скриптів може бути дуже скрутній. Але в результаті від цього страждають як самі автори блогів, так і їхні читачі. Що ж робити в такому випадку?

Якщо ми звернемося до товариства Java програмістів, то можна виявити, що ця проблема вже давно у них вирішена. Аплети, сервлети і навіть така страшна річ, як Enterprise Java Beans, насправді, мають не так багато ідейних відмінностей від віджетів. Основна відмінна риса полягає в використанні наявного framework'а (container).

Під framework'ом мається на увазі, в першу чергу, оточення сервера, яке забезпечує доставку даних до користувача і клієнт-серверне взаємодія. На ньому лежить завантаження, вивантаження, зворотні виклики (callbacks), кліки, повідомлення і все те, з чим технарі так люблять возитися, але що змушує всіх не-технічних користувачів здригнутися від жаху. Іншими словами, потрібен загальнодоступний framework для JavaScript - адже саме він вносить порядок в цей хаос компонентів і розробок.

Невеликий коментар: зараз W3C розробляє стандарт розробки віджетів. 5 липня опублікована чорнова версія. Детальніше можна подивитися тут.

Читати далі

Всі коментарі (habrahabr.ru)