Якщо я розробляю веб-сайт на одній сторінці, чи краще створити зовнішній файл для мого JS-коду чи просто помістити його в html-код? Чи швидше завантажувати його на сторінку? Чи можу я змінити дозволи для відхилення запитів користувачів щодо коду, але html-сторінка все ще може викликати код?
Відповіді:
Ви повинні помістити свій JS-код в окремий файл, оскільки це полегшує тестування та розробку. Питання про те, як ви подаєте код - це інша справа.
Обслуговування HTML та JS окремо має ту перевагу, що клієнт може кешувати JS. Це вимагає, щоб ви надсилали відповідні заголовки, щоб клієнт не надсилав новий запит кожен раз. Кешування проблематично, якщо ви хочете виконати оновлення і, таким чином, хочете скасувати кеш-пам'ять клієнта. Один із способів - включити номер версії до імені файлу, наприклад /static/mylibrary-1.12.2.js.
Якщо JS знаходиться в окремому файлі, ви не можете обмежити доступ до нього: важко (технічно: неможливо) сказати, чи був запит на файл JS, тому що ви посилаєтесь на його HTML-сторінку, або тому, що хтось хоче його завантажити безпосередньо. Однак ви можете використовувати файли cookie та відмовлятися обслуговувати клієнтів, які не передають певні файли cookie (але це було б нерозумно).
Обслуговування JS всередині HTML збільшує розмір кожної сторінки - але це нормально, якщо клієнт навряд чи зможе переглянути кілька сторінок. Оскільки клієнт не видає окремого запиту на JS, ця стратегія завантажує сторінку швидше - принаймні вперше, але є точка беззбитковості, коли кешування краще. Ви можете включити JS, наприклад, через PHP.
Тут клієнту не потрібен окремий доступ до файлу JS, який можна заховати, якщо хочете. Але кожен все ще може переглянути код JS всередині HTML.
Інші стратегії мінімізації часу завантаження включають
Мінімізація JS, яка зменшує розмір файлу JS, який ви обслуговуєте. Оскільки мінімізація відбувається лише один раз при розгортанні коду, це дуже ефективний метод збереження байтів. ОТОХ це робить ваш код важче зрозуміти зацікавленим відвідувачам.
З мінімізацією пов’язана практика поєднання всіх ваших файлів JS в одному файлі. Це зменшує кількість необхідних запитів.
Стиснення, що додає обчислювальні накладні витрати для кожного запиту як клієнта, так і сервера. Однак час, витрачений на (стиснене) стискання, зазвичай менший за час, витрачений на передачу нестиснених даних. Стиснення зазвичай обробляється прозоро серверним програмним забезпеченням.
Ці методи застосовуються і до інших ресурсів, таких як зображення.
Я розробляю веб-сайт на одній сторінці
Якщо у вас буквально є лише одна сторінка, то так, краще (з точки зору продуктивності) обслуговувати все в одному файлі ... таблиці стилів, JavaScript і навіть зображення (невеликі зображення, позначені в URI даних). Це виключає додаткові запити HTTP, необхідні для отримання зовнішніх ресурсів, які відносно повільні.
Отриманий файл слід отримати gzipped перед подачею, що значно зменшить розмір повнотекстової відповіді.
Ви все ще повинні врахувати наявність великих зображень зовнішньої сторінки, оскільки існують обмеження щодо розміру URI даних та сумісності браузера. (напр., IE8 має обмеження в 32 КБ, що дорівнює фактичному розміру файлу близько 23 КБ через характер кодування base64.)
Чи можу я змінити дозволи для відхилення запитів користувачів щодо коду, але html-сторінка все ще може викликати код?
Ні. У кращому випадку код можна приховати, щоб "сховати" його від випадкового спостерігача, але він не забезпечує реального захисту.
Клієнтський JS-код повинен бачити браузер (тобто, якщо для сторінки потрібно використовувати JS безпосередньо) - це означає, що він повинен завантажуватися браузером.
Ви не можете мати браузер, який використовує JS на сторінці, якщо він не може його завантажити.
У цьому відношенні це не має жодної різниці, якщо ви вбудували JS або помістили його у файл, хоча загальною практикою є використання файлу JS (розділення проблем для одного).
Якщо у вас є код, який ви не хочете виставляти через браузер, вам потрібно буде використовувати код сторони сервера (скажімо, node.js, php, perl, asp.net, jsp - варіантів так багато) і взаємодіяти з ним з браузера - або при початкових завантаженнях сторінки, або за допомогою AJAX .
Ну, це залежить від кількості коду, і наскільки ви серйозно ставитесь до того, щоб бути програмістом / інженером програмного забезпечення порівняно з просто кодером. Я працював з купою дизайнерів, які вкладали короткі фрагменти коду безпосередньо в HTML, і поки я стискався - він фактично працював.
Хоча це не те, що я б робив сам, і якщо ви хочете знати найкращі практики розробки програмного забезпечення, я настійно раджу вам передати все у зовнішній *.jsфайл і завантажити його за допомогою <script>тегів.
Щодо другого моменту, ні ви не можете заборонити користувачеві чи браузеру в перегляді коду, є щось, що називається, obfuscationщо ускладнить читання вашого коду, проте продуктивність знизиться.
чи краще створити зовнішній файл для мого коду JS або просто помістити його в html-код?
Краще створити зовнішній файл для свого JS-коду. Також краще мати один-два файли, які ви обслуговуєте клієнту. Але також краще, щоб ваш JS-код розділився на кілька файлів для вирішення проблем з ремонтом. Щоб зробити це, ви можете використовувати препроцесори, такі як Gulp, які поєднають ваші різні JS-файли в один файл.
Обслуговування менше файлів краще, оскільки клієнт матиме менше запитів HTTP.
Чи швидше завантажувати його на сторінку?
Так, очевидно, це швидше, оскільки ви робите лише один запит для HTML, тоді як ви зробите багато запитів (принаймні 2) зі своїм JS-кодом як зовнішнім. Це лише в тому випадку, якщо ваш JS-код не зміщений в обидві сторони, і це не враховує, наскільки складніше буде підтримувати свій код, якщо він знаходиться в одній єдиній HTML-сторінці.
Чи можу я змінити дозволи для відхилення запитів користувачів щодо коду, але html-сторінка все ще може викликати код?
Ні, ти не можеш. JS-код, як CSS-код і HTML-код, є статичним вмістом. Це означає, що коли він перебуває у браузері, клієнт може повністю завантажити його та його вміст. Кожен окремий файл, зображення, сценарій відкритий для завантаження. Але , ви можете мінімізувати / зменшити код, щоб людині було важче використовувати його. Це лише наслідок уніфікації, яка була зроблена першою для виконання.
Багато переваг розділення вмісту html та javascript на окремі файли: