Добрий чи поганий вбудований JavaScript?

На даний момент я перейшов з WordPress на Yii Framework, і зовнішній розробник відновлює мій сайт.

Я зауважую, що кожен раз, коли він викликає AJAX / jQuery способом Yii, він вставляє вбудований JavaScript на веб-сторінці. Хоча здається, що код JavaScript розміщений нижче нижнього колонтитулу, він все ще знаходиться в рядку.

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

Вбудований JavaScript збільшує час завантаження сторінки, що не добре. При виклику до .jsфайлу, принаймні, це можуть бути паралельні виклики та час завантаження вмісту зменшився. Так, бувають випадки, коли можна правильно вводити JavaScript безпосередньо в HTML-код, але вам краще краще максимально завантажувати це.

Майте на увазі, що час завантаження сторінки (тобто HTML) і не всі виклики ресурсів впливають на показники, які впливають на ранжирування (хоч як PageRank або в SERPs це не має значення). Справа в тому, що це впливає на продуктивність сайтів для SEO, однак це проявляється.

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

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

Мій сайт не типовий. Більшість сайтів мають кілька сторінок на сеанс та великі зображення, які б зробили мою техніку менш застосовною. Немає жодного правильного рішення цього питання; це залежить від сайту. Вам потрібно виміряти його самостійно на основі типової поведінки користувачів.

Не обов'язково погано мати JavaScript у вашому HTML-файлі, але ви повинні зателефонувати за ним.

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

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

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

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

Я розробник Yii і можу вам сказати, що Yii не має нічого спільного з цим . Це повністю на стороні розробника , чи він або вона помістить Javascript-код в окремий файл і зареєструє його на сторінці HTML (перегляду) за допомогою CClientScript::registerScriptFileметоду, або поставить його безпосередньо для перегляду (HTML) коду та зареєструє його за допомогою CClientScript::registerScriptметоду.

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

EDIT : Насправді я забув про найважливіший аргумент. Yii (як і більшість інших професійних фреймворків PHP) будується на шаблоні дизайну MVC (власне: архітектурний зразок). І той самий візерунок можна використовувати в лицьовій частині: HTML-код - це модель (дані), CSS - це перегляд (декоратор), а Javascript - контролер. Усі вони розміщені в окремі файли , .jsа .cssфайли - мінімізовані, затемнені та gzipped за найкращим сценарієм.

Коли ви збираєте свою програму Yii, ви можете порушити шаблон MVC і зберегти все в одному файлі. Питання - чи варто це робити, які переваги (немає?) І куди це вас призведе? Ви можете використовувати ту ж аргументацію, коли запитуєте, чи слід зберігати JS-код вбудованим чи ні?

Це насправді залежить від мети веб-сторінки, яку ви розробляєте:

Я використовую невелику кількість вбудованого JavaScript, тоді як я віддаю перевагу зовнішнім файлам JavaScript, якщо він великий.

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

Відповідь насправді залежить від того, що робиться.

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

Насправді я б перемістив якомога більше JavaScript до загального файлу JavaScript, навіть якщо він використовувався на одній сторінці. Я б налаштував сервер для надсилання сильних заголовків кешування та стиснення для файлів JavaScript; що зменшує розмір сторінок, але не збільшує розмір файлу JavaScript значно.

З іншого боку, якщо JavaScript - це просто купа параметрів конфігурації / ініціалізації, наприклад:

$(function () {
    myplugin({
        images: ["img1", "img2", "img3"]
    });
});

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

Ці відповіді пропускають оцінку. Погляньте на кешування Inline .

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

Замість того, щоб надіслати клієнту цілу купу загальних функцій Javascript у .js-файлі, у яких немає контексту, поки не надаються дані (дані, які можуть сидіти на сервері та вимагати зворотної поїздки), ми можемо "запустити" контекст / дані як частина функції Javascript. Це ощадливо, оскільки це означає, що ви надсилаєте функціональні можливості / дані разом, а також надсилаєте лише ті функціональні можливості / дані, які клієнту можуть знадобитися в той час, а не надсилати весь додаток під час завантаження на першу сторінку. Це також означає, що не потрібно виставляти весь додаток до простого завантаження та реверсивного проектування під час завантаження на першій сторінці, оскільки ви вводите лише невеликі частини функціональності, які можуть знадобитися кожному окремому клієнту в той час. Не впевнений, наскільки це добре для SEO, але я впевнений, що це можна оптимізувати відповідно.

Розглянемо випадок, коли кінцевий користувач пише сторінку в деякому програмному забезпеченні CMS за допомогою редактора WYSIWYG. Як цей користувач буде додавати нові функції на сторінку, коли вони не мають доступу до ваших вихідних .js-файлів на сервері? Вони переходять на вкладку HTML і використовують вбудований Javascript.

Не всі вбудовані Javascript погані; іноді і onclick теж добре. Як загальна рекомендація, уникайте писати вбудований Javascript і ви будете на шляху до побудови хороших звичок.

Список літератури:

• Вбудоване кешування
• Оптимізація динамічного JavaScript з вбудованими кешами
• Пояснення JavaScript VM в JavaScript - вбудовані кеші
• Чому я повинен уникати вбудованого сценарію? (див. відповідь MainMa та користувача1389596)

Зазвичай вбудований JS-код поганий, як говорили інші перед мною.

Але я думаю про випадок використання, коли вбудований JS кращий .

Подумайте про CMS, який вставляє галерею, керовану JS. Галерея, можливо, зроблена в jQuery. Він ідентифікується за атрибутом id, який не тільки унікальний на сторінці, але й унікальний на всьому сайті. У цьому випадку - я думаю - вбудований JS був би кращим, тому що код JS використовується лише на одній сторінці і у вас немає HTTP-накладних витрат