Чи повинен посилання на JavaScript у розділі заголовка подаватися з того ж імені хоста, що і основний документ?


12

У мене склалося враження, що для найкращої продуктивності Javascript слід розглядати як статичний вміст і подавати з домену без файлів cookie разом із CSS-файлами, зображеннями тощо.

Але Google говорить тут: не обслуговуйте раніше завантажені зовнішні файли JS з домену cookie

Для JavaScript, на який посилається в заголовку документа і необхідний для запуску сторінки, він повинен подаватися з того ж імені хоста, що і основний документ. Оскільки більшість браузерів блокують інші завантаження та візуалізацію до тих пір, поки всі файли JavaScript не будуть завантажені, проаналізовані та виконані, краще уникнути ризику додаткового пошуку DNS на цьому етапі обробки.

Тож зараз я конфліктую. Мені не ясно, що означає "необхідний для запуску сторінки".

У мене зазвичай є дві посилання на JavaScript, JQuery подається з ajax.googleapis.com та файл master.js, який в основному містить обробники подій у функції $ (document) .ready (). Це потрібно для запуску сторінки?

З огляду на доступні варіанти, (ajax.googleapis.com, статичний домен, який не містить файли cookie, оригінальне ім'я хоста), де повинен розміщуватися мій JavaScript?

Відповіді:


5

Тож зараз я конфліктую. Мені не ясно, що означає "необхідний для запуску сторінки".

Це дуже залежить від того, як функціонує ваш сайт. В основному, це JavaScript, який потрібно запустити, перш ніж хтось може скористатися веб-сторінкою.

Наприклад, якщо ви перейдете на веб-сайт http://www.weather.com/ , ви можете побачити, що прекрасні люди вирішили використати якусь магію JavaScript, щоб надати підказку для форми пошуку погоди. Тобто слова Enter Zip, City or Place (e.g. Disney World)з’являються у полі введення тексту. На жаль, невелика затримка під час завантаження сторінки, принаймні з мого кінця. Отже, якщо сторінка завантажується досить повільно, і ви досить швидкі, щоб почати вводити текст, перш ніж виконати JavaScript - що не є розтяжкою - ваш вклад може бути розкручений JavaScript, який сліпо розміщує натяк текст у полі введення.

Зрозуміло, цього можна уникнути, перевіривши спочатку введення користувача у текстове поле або просто відмовившись від цієї анахронічної методики. Однак тоді це було б не дуже хорошим прикладом.

З огляду на доступні варіанти, (ajax.googleapis.com, статичний домен, який не містить файли cookie, оригінальне ім'я хоста), де повинен розміщуватися мій JavaScript?

На це не можна відповісти, не знаючи, що робить ваш JavaScript. Також, як натякає bpeterson76, це залежить від конкретної ситуації на вашому сайті. Тобто наскільки велика сторінка? наскільки добре вимагає ваш приймаюча зустріч? скільки файлів, зображень CSS тощо завантажується? скільки зовнішніх ресурсів завантажується?

Залежно від конкретної ситуації, це може бути передчасна оптимізація.


4

Правило "все, що потрібно, перш ніж сторінка почне рендерінг, має бути з того самого сервера", як правило, стосується вашогосервери чи інші менші ресурси - ситуації, коли пошук DNS може зайняти помітну частку секунди (яка може швидко скластись, якщо ваші об’єкти розсіяні навколо багатьох доменів). За допомогою загальнодоступних публічних ресурсів, таких як кеш-пам'ять jQuery та інших бібліотек Google, є хороший шанс, що веб-переглядач вашого відвідувача вже здійснив пошук DNS сьогодні (тому що інші сайти посилаються на вміст цієї служби) і, ймовірно, має файл у кеші, так що ні передачу потрібно зробити (або якщо запит буде зроблено, він може отримати лише коротку відповідь "304 - не змінено"). Навіть якщо для об’єкта потрібне повне завантаження, мережа доставки вмісту Google для більшості користувачів буде швидшою, ніж ваша менша операція.

Одне пов’язане правило: об’єкти, які не потрібні для правильної функції сторінки (як бачить користувач), слід посилатися якомога пізніше у головному відповіді HTTP. Наприклад, такі речі, як сценарії, необхідні для рекламних / статистичних послуг (наприклад, Google Analytics та її інк) - надайте користувачеві ваш вміст якомога швидше, а потім завантажте фонові матеріали, які вас справді цікавлять. Я заблокував пару служб оголошень / статистики (зіставивши їх у 127.0.0.1 у моєму файлі хостів), оскільки вони часто занадто повільні, а сайти, які посилаються на них рано, просто дають мені порожню сторінку, а сценарії чекають замість цього з посиланням на них із запізненням, щоб я міг прочитати вміст, який я там перебуваю, тоді як інші речі мандрують на задньому плані.

Корисність домену без файлів cookie для статичного вмісту - це питання масштабу. Якщо у вас є один 10-байтовий ідентифікатор сеансу в файлах cookie та десять тисяч відвідувачів на день, що вимагають ~ 20 статичних об'єктів за відвідування, ви економите лише ~ 118 Мбіт пропускної здатності на місяць (20 * 20 * 10000 * 31/1024/1024). Якщо, з іншого боку, ваш веб-сайт зберігає один-два Кбайт у файлах cookie, різниця може бути набагато вагомішою, особливо якщо хтось із ваших користувачів отримує доступ до сайту через повільне з'єднання (наприклад, GPRS через прив’язку до мобільного телефону або понад - переповнене посилання Wi-Fi у зоні з високими перешкодами) або якщо ви отримуєте мільйони відвідувань на день.

Підводячи підсумок, для моїх налаштувань сценарії, які повинні бути завантажені, перш ніж сторінка зможе відобразити:

  1. ajax.googleapis.com чи подібні
  2. оригінальне ім'я хоста сторінки, що дзвонить
  3. статичний домен без файлів cookie

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


With common public resources ... there is a good chance that your visitor's browser has already done that DNS lookup today Особисто мені не було б комфортно покладатися на це для свого сайту. Я хотів би, щоб це було якомога швидше в якомога більшій кількості ситуацій. Незважаючи на те, ви заробляєте хороші бали. +1
Джордж Маріан

1

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

Це питання обмінювалося в "Stackoverflow", і ця відповідь, здається, завжди є єдиною думкою. Але з реалістичної точки зору, виграші від хостингу на одному проти іншого в довгостроковій перспективі будуть досить мінімальними. Ви отримаєте набагато кращі вигоди від мінімізації, оптимізації та зменшення загальних http-запитів, ніж ви будете ретельно перевіряти, де речі розташовані фізично. У ситуаціях, коли це починає мати значення (я робив роботу, коли сторінка завантажувалась 1,5+ мільйонів разів на день, тож покращення на 5 кр. Означало 5 гігів економії пропускної здатності), як правило, є команда осіб, які приймають рішення, які мають завдання вивчити ці рішення.

Особисто я зазвичай проживаю в Google з єдиної причини, що вони збираються дати мені найновішу копію того, що я шукаю.


Де ви розміщуєте власний JavaScript? Статичний домен без файлів cookie або оригінальне ім'я хоста?
Джеймс Лоурук

Чесно кажучи, поза (в основному) Jquery in-line, насправді не так багато, що не може бути динамічно пов'язане. Я прагну звести вуду до мінімуму, використовуючи (в першу чергу) основні інтерфейси Jquery та Jquery, за можливим винятком плагіну Datatables. Я дуже вірую в концепцію "Тримати її простою" (дурною) і не викладатимуть код, якщо він не сумісний із зворотною стороною, що виключає безліч варіантів. Як я вже говорив вище, розміщення одного файлу на домені, що не містить файлу cookie, не є великою справою.
bpeterson76

1

Важливо пам’ятати, що браузери мають обмеження щодо кількості ресурсів, які завантажуватимуться одночасно з одного домену, як правило, від 2 до 6 залежно від браузера. Використання іншого домену дозволяє браузеру одночасно завантажувати більше речей із вашого домену.

Тож найкращим рішенням є використання такої популярної CDN, як ajax.googleapis.com, оскільки файлів cookie немає. Користувач, ймовірно, вже здійснив пошук DNS і, можливо, навіть кешував ресурс. CDN оптимізовані для швидкості і, ймовірно, мають сервер, близький до вашого користувача.

Якщо CDN не є варіантом, тоді, якщо у вас багато файлів cookie або у вас є багато ресурсів для завантаження (зображення тощо), тоді використовуйте домен, який не містить файлів cookie (потрібно робити пошук DNS лише один раз).

Якщо у вас є декілька ресурсів (лише один користувальницький файл JavaScript) та кілька файлів cookie (лише крихітний ідентифікатор сеансу) з одного домену.

Хороші ресурси:

http://www.phpied.com/free-falling-waterfalls/

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

http://developer.yahoo.com/performance/rules.html


1

Хоча відповіді вище розсікали більшість ваших запитань, я буду брати участь у "необхідному для запуску сторінки". Я перекладаю це: чи важливий цей сценарій для використання веб-сайту? З досвіду зазвичай відповідь - ні. Однак випадки, коли я:

  • Перевірка форми
  • Навігація на основі JavaScript (не ідеальна в будь-якому випадку)
  • Якщо макет залежить від JavaScript
  • Якщо JavaScript або бібліотека (наприклад, jQuery) використовується для критичних модифікацій DOM

І рекомендації YSlow щодо ефективності Yahoo для довідок.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.