Вы должны поместить свой код JS в отдельный файл, потому что это облегчает тестирование и разработку. Вопрос о том, как вы обслуживаете код, это другой вопрос.
Обслуживание HTML и JS по отдельности имеет то преимущество, что клиент может кэшировать JS. Для этого необходимо отправить соответствующие заголовки, чтобы клиент не выдавал новый запрос каждый раз. Кэширование проблематично, если вы хотите выполнить обновление и, таким образом, хотите аннулировать клиентские кэши. Одним из способов является включение номера версии в имя файла, например /static/mylibrary-1.12.2.js.
Если JS находится в отдельном файле, вы не можете ограничить доступ к нему: трудно (технически: невозможно) определить, был ли сделан запрос к файлу JS, потому что вы ссылались на него на своей HTML-странице или потому, что кто-то хочет его скачать непосредственно. Однако вы можете использовать куки и отказываться обслуживать клиентов, которые не передают определенные куки (но это было бы глупо).
Обслуживание JS внутри HTML увеличивает размер каждой страницы - но это нормально, если клиент вряд ли будет просматривать несколько страниц. Поскольку клиент не выдает отдельный запрос для JS, эта стратегия загружает страницу быстрее - по крайней мере, впервые, но есть точка безубыточности, где кэширование лучше. Вы можете включить JS, например, через PHP.
Здесь клиенту не требуется отдельный доступ к файлу JS, который может быть скрыт, если хотите. Но любой по-прежнему может просматривать код JS внутри HTML.
Другие стратегии минимизации времени загрузки включают
Минификация JS, которая уменьшает размер обслуживаемого вами файла JS. Поскольку минимизация происходит только один раз при развертывании кода, это очень эффективный способ сохранения байтов. Это делает ваш код сложнее для понимания заинтересованными посетителями.
С минификацией связана практика объединения всех ваших файлов JS в один файл. Это уменьшает количество необходимых запросов.
Сжатие, которое добавляет вычислительные затраты для каждого запроса как на клиенте, так и на сервере. Однако время, потраченное (распаковывание), обычно меньше, чем время, потраченное на передачу несжатых данных. Сжатие обычно прозрачно обрабатывается серверным программным обеспечением.
Эти методы также применяются к другим ресурсам, таким как изображения.
- Изображения могут быть встроены в HTML или CSS с URL-адресами данных. Это практично только для небольших простых изображений, так как кодировка base64 увеличивает размер. Это все еще может быть быстрее, чем другой запрос.
- Несколько небольших изображений (значки, кнопки) могут быть объединены в одно изображение, а затем извлечены в виде спрайтов.
- Изображения могут быть уменьшены сервером до размера, в котором они фактически используются на веб-сайте, что экономит трафик. Сравните миниатюры изображений.
- Для некоторых графических изображений текстовые изображения, такие как SVG, могут быть намного меньше.
Если у вас буквально просто одна страница, то да, лучше (с точки зрения производительности) обслуживать все в одном файле ... таблицы стилей, JavaScript и даже изображения (небольшие изображения, встроенные в data-URI). Это исключает дополнительные HTTP-запросы, необходимые для извлечения внешних ресурсов, которые являются относительно медленными.
Полученный файл следует сжать перед отправкой, что значительно уменьшит размер полнотекстового ответа.
Вам все равно следует подумать о том, чтобы иметь большие изображения, внешние по отношению к странице, поскольку существуют ограничения по размеру URI данных и совместимости с браузером. (Например, IE8 имеет ограничение 32 КБ, что соответствует фактическому размеру файла около 23 КБ из-за характера кодирования base64.)
Нет. В лучшем случае код можно запутать, чтобы «спрятать» его от случайного наблюдателя, но он не обеспечивает реальной защиты.
источник
Код JS на стороне клиента должен просматриваться браузером (то есть, если страница должна использовать JS напрямую) - это означает, что он должен быть загружен браузером.
Вы не можете использовать браузер JS на странице, если он не может загрузить его.
В этом отношении не имеет значения, если вы вставляете JS или помещаете его в файл, хотя обычной практикой является использование файла JS (разделение проблем для одного).
Если у вас есть код, который вы не хотите показывать в браузере, вам нужно будет использовать код на стороне сервера (скажем, node.js, php, perl, asp.net, jsp - вариантов так много) и взаимодействовать с ним из браузера - либо при начальной загрузке страницы, либо с помощью AJAX .
источник
Ну, это зависит от количества кода и от того, насколько серьезно вы относитесь к программированию / программисту, а не просто к программисту. Я работал с кучей дизайнеров, которые вставляли короткие фрагменты кода прямо в HTML, и, хотя я ограничился, это действительно сработало.
Хотя это не то, чем я бы занимался сам, и если вы хотите узнать лучшие практики разработки программного обеспечения, я настоятельно советую вам записать все во внешний
*.jsфайл и загрузить его с помощью<script>тегов.Что касается вашего второго пункта, нет, вы не можете запретить пользователю или браузеру просматривать ваш код, есть что-то вызываемое,
obfuscationчто сделает ваш код труднее для чтения, однако производительность будет ухудшаться.источник
Лучше создать внешний файл для вашего кода JS. Также лучше иметь один или два файла, которые вы обслуживаете клиенту. Но лучше также разбить ваш код JS на несколько файлов для обеспечения удобства обслуживания. Чтобы сделать это, вы можете использовать препроцессоры, такие как Gulp, которые будут объединять ваши различные файлы JS в один файл.
Лучше обслуживать меньше файлов, так как клиент будет обрабатывать меньше HTTP-запросов.
Да, очевидно, что это быстрее, так как вы делаете только один запрос на HTML, в то время как вы делаете много запросов (по крайней мере 2) с вашим JS-кодом как внешним. Это только в том случае, если ваш JS-код не минимизирован ни с одной стороны, и это не учитывает, насколько сложнее будет поддерживать ваш код, если он все находится на одной HTML-странице.
Нет, ты не можешь. JS-код, как CSS-код и HTML-код, является статическим содержимым. Это означает, что, как только он появится в браузере, клиент может полностью загрузить его и его содержимое. Каждый файл, изображение, скрипт открыт для скачивания. Но вы можете уменьшить / уменьшить ваш код, чтобы человеку было труднее его использовать. Это только следствие углификации, которая была сделана для производительности в первую очередь.
источник
Многие преимущества разделения содержимого html и javascript на отдельные файлы:
источник