Html не видит файл js

Обновлено: 04.07.2024

Пришло время запачкать руки. Эта статья представляет собой базовое введение в кодирование с помощью JavaScript.

Введение

В этой статье учебного плана по веб-стандартам мы рассмотрим основы JavaScript — как и где его использовать, каких проблем следует избегать, а также общие основы, которые помогут вам начать путь к тому, чтобы стать первоклассным разработчиком JavaScript. .

Что такое JavaScript и как его выполнять?

JavaScript – это текстовый язык, который не требует преобразования перед выполнением. Другие языки, такие как Java и C++, должны быть скомпилированы, чтобы быть исполняемыми, но JavaScript выполняется мгновенно с помощью типа программы, которая интерпретирует код, который называется синтаксическим анализатором (практически все веб-браузеры содержат синтаксический анализатор JavaScript).

Чтобы выполнить JavaScript в браузере, у вас есть два варианта: либо поместить его внутри элемента скрипта в любом месте HTML-документа, либо поместить его во внешний файл JavaScript (с расширением .js), а затем сослаться на этот файл внутри HTML-кода. документ с использованием пустого элемента сценария с атрибутом src. Мы рассмотрим оба этих метода в этом разделе.

JavaScript не обязательно должен оставаться внутри браузеров. Чтобы запустить JavaScript в консольной среде, попробуйте Mozilla Rhino; для запуска JavaScript в серверной среде проверьте node.js.

Включение вашего JavaScript в HTML-документ

Самое простое включение JavaScript в вашу HTML-страницу будет выглядеть примерно так:

Вы можете разместить его в любом месте документа, и он будет выполняться, но некоторые места определенно лучше, чем другие — смотрите раздел «Где разместить JavaScript», чтобы получить рекомендации по этому поводу.

Поскольку в будущем для использования на веб-страницах может быть доступно несколько различных типов скриптов, имеет смысл добавить название скрипта, который вы используете, в качестве типа MIME:

Примечание. В Интернете можно найти примеры скриптов с атрибутом language="javascript". Это не является частью какого-либо стандарта и совершенно бесполезно; удалите это, где вы можете. Это возврат к старым недобрым временам, когда VBScript также широко использовался на веб-страницах. Однако использование VBScript прекратилось, так как оно работает только в IE.

В прошлом было необходимо закомментировать JavaScript комментарием HTML, чтобы браузеры не отображали код как HTML. Поскольку это относится только к очень старым браузерам, вам больше не нужно беспокоиться об этом. Однако, если вы используете строгий XHTML в качестве своего DOCTYPE, вам нужно заключить любой JavaScript в блок CDATA, чтобы он прошел проверку (не беспокойтесь о том, почему - на данном этапе обучения это не очень важно):

Однако для строгих документов XHTML гораздо разумнее не встраивать JavaScript, а оставить его во внешнем документе.

Ссылка на внешний файл JavaScript

Для ссылки на внешний JavaScript (либо на том же сервере, либо в любом месте в Интернете) все, что вам нужно сделать, это добавить атрибут src к вашему элементу скрипта:

Встретив этот элемент на странице, браузеры затем загрузят файл myscript.js и выполнят его. Любое содержимое внутри самого элемента script будет пропущено, если вы укажете атрибут src. В следующем примере загружается файл myscript.js и выполняется содержащийся в нем код, но оповещение внутри элемента скрипта вообще не выполняется.

Хранение кода во внешнем файле JavaScript имеет большой смысл:

Вы можете применить одну и ту же функциональность JavaScript к нескольким HTML-документам и при этом упростить обслуживание: если вы хотите изменить функциональность, все, что вам нужно сделать, это изменить один единственный файл.
Ваш JavaScript будет кэшироваться браузерами. Кэширование означает, что браузеры берут копию вашего JavaScript и сохраняют ее на компьютере посетителей, просматривающих ваш сайт. В следующий раз, когда этот пользователь загрузит тот же скрипт, он будет взят не с вашего сервера, а с его собственных компьютеров, что значительно ускорит загрузку.
Вы можете легко найти свой сценарий, если вам нужно его изменить, избегая необходимости просматривать длинные HTML-документы, чтобы найти место для устранения проблемы.
Исправлять ошибки становится проще, так как инструмент отладки или консоль ошибок сообщит вам, какой файл содержит ошибку, и достоверно сообщит номер строки.

Вы можете добавить в документ столько файлов JavaScript, сколько хотите, но перед тем, как пойти по этому пути, необходимо принять во внимание несколько соображений.

JavaScript и производительность браузера

Разделение большого количества кода JavaScript на отдельные файлы, каждый из которых выполняет одну задачу за раз, — отличная идея, позволяющая упростить поддержку вашей функциональности и обеспечить быстрое исправление ошибок. Например, у вас может быть несколько таких блоков сценария:

Однако преимущества этого для разработки уменьшаются из-за влияния, которое это оказывает на производительность вашего документа.Это немного отличается от браузера к браузеру, но в худшем случае (который, к сожалению, по-прежнему является вторым наиболее часто используемым браузером) происходит следующее:

Каждый раз, когда браузер встречает элемент скрипта, он приостанавливает рендеринг (отображение) документа.
Затем будет загружен файл JavaScript, указанный в атрибуте src (если вы используете скрипт на другом сервере, вам также придется подождать, пока браузер не найдет этот сервер).
Затем он выполнит скрипт перед тем, как перейти к следующему.

Все это означает, что отображение вашего веб-сайта замедляется до тех пор, пока все эти шаги не будут выполнены для всех включенных вами сценариев. Это может раздражать ваших посетителей.

Один из способов обойти это — использовать внутренний скрипт для создания одного файла из всех файлов, которые вы используете. Таким образом, вы получаете преимущество в простоте обслуживания и одновременном сокращении задержек при отображении веб-страницы. В Интернете есть несколько подобных скриптов — один из них написан на PHP и доступен у Эда Элиота.

Задержка отображения также определяет, где в документе вы хотите поместить код JavaScript.

Где разместить JavaScript

Технически JavaScript можно разместить в любом месте документа. Решение, которое вы должны принять, – это взвесить производительность и облегчить разработчикам поиск ваших скриптов, а также обеспечить немедленную работу ваших улучшений JavaScript для ваших посетителей.

Традиционно лучше всего размещать скрипты в заголовке документа:

Преимущество этого заключается в предсказуемости расположения скриптов — разработчики знают, где их найти. Преимущество также в том, что весь код JavaScript загружен и выполнен до отображения документа.

Недостаток заключается в том, что ваши скрипты задерживают отображение документа и что скрипт не имеет доступа к HTML в документе. Поэтому вам необходимо отложить выполнение любых скриптов, изменяющих HTML-код документа, до тех пор, пока документ не завершит загрузку. Это можно сделать с помощью обработчика загрузки или одного из различных решений DOMready или contentAvailable, доступных в Интернете. Ни одно из них не является пуленепробиваемым, и большинство из них основано на взломе, специфичном для браузера.

Специалисты по производительности начали выступать за размещение кода JavaScript в конце текста:

Это приносит пользу вашему JavaScript, поскольку не задерживает отображение HTML, а также означает, что любой HTML, который вы хотите изменить с помощью JavaScript, уже доступен.

Вы можете сбить с толку разработчиков, которые сопровождают ваш код, потому что такая практика еще не распространена. Другой — более проблематичный — недостаток заключается в том, что HTML становится доступным до загрузки вашего JavaScript. Хотя это именно то, чего вы хотите достичь, это также означает, что посетители начнут взаимодействовать с вашим интерфейсом до того, как вы получите возможность его изменить. Скажем, например, вы хотите проверить форму с помощью JavaScript перед ее отправкой на сервер — форма может быть отправлена до загрузки скрипта. Если вы пишете свой сценарий как простое улучшение (а не полагаетесь на него), это не проблема, а только раздражение.

Вы сами выбираете, что соответствует цели вашего веб-сайта; вы даже можете использовать и то, и другое одновременно — поместить скрипты с очень важными функциями в заголовок и вызвать их в сочетании с «полезными» скриптами в конце документа.

Что бы вы ни делали, следите за правильным порядком своих скриптов, так как браузеры будут загружать и анализировать их один за другим. Это также подводит нас к еще одному моменту, который следует учитывать при использовании JavaScript.

Безопасность JavaScript и ее отсутствие

Мы не можем не подчеркнуть это. JavaScript — замечательный язык, который может помочь вам создавать быстро реагирующие и красиво интерактивные веб-сайты и приложения, но где он ужасно падает, так это в безопасности. Короче говоря, в JavaScript нет модели безопасности, и вы не должны защищать, шифровать, защищать или хранить с его помощью что-либо жизненно важное или секретное.

Каждый скрипт на странице имеет одинаковые права — все они могут обращаться друг к другу, считывать переменные, получать доступ к функциям, а также переопределять друг друга. Если у вас есть функция с именем init() в вашем первом включенном сценарии и еще одна функция в вашем последнем включенном сценарии, исходная функция будет переопределена. Мы вернемся к этой проблеме в статье с рекомендациями этого курса.

Все это не было бы большой проблемой, если бы вы никогда не использовали скрипты других людей. Однако, учитывая, что большая часть онлайн-рекламы и отслеживания статистики выполняется с помощью JavaScript, это не так — вы все время будете использовать сторонние скрипты.

JavaScript всегда доступен для чтения и анализа другими разработчиками.Конечно, вы можете упаковать (удалить все ненужные пробелы) и запутать (использовать случайные имена переменных и функций) свои скрипты, но даже они могут быть перепроектированы; в этом случае единственный человек, которого вы легко остановите от использования вашего кода, — это вы сами. Доступность исходного кода и возможность его читать и анализировать — это главный фактор успеха JavaScript — мы годами учились, подглядывая за решениями других людей. Сейчас это, к счастью, закончилось, так как есть хорошие книги и учебные пособия.

Методы, которых следует избегать

Самая большая проблема с изучением JavaScript заключается в том, что существует огромное количество устаревшей и, возможно, опасной информации. Это особенно расстраивает, так как большая часть этой информации очень хорошо представлена и дает многим новичкам ощущение «быстрой победы» в знании JavaScript путем копирования и вставки готового кода.

Поскольку среда, в которой применяется JavaScript, во многом неизвестна (у пользователей могут быть любые настройки), и мы не знаем, какие решения привели к тому, что код, который мы находим в Интернете, создается определенным образом, мы не должны указывать пальцем на решения. Однако следующие идеи остались в прошлом, и вам следует использовать их только в крайнем случае, если они вам нужны для поддержки действительно старых, плохих браузеров:

Но у меня такая ошибка:

Это мой HTML:

А это еще один javascript:

И я пытаюсь скопировать и вставить ссылку, и я получаю ошибку 404 не найден. Как я могу это исправить? Спасибо.

Предполагая, что файлы находятся в нужном месте, вы можете получить ошибку 404 с вашего сервера, потому что сервер не имеет разрешения на доступ к этим файлам. Проверьте свои разрешения.

5 ответов 5

Разрешения

Если хост указан правильно, файл находится в нужном месте и у вас нет других проблем с сетью, иногда вы все равно можете получить ошибку 404 из-за неправильных прав доступа к файлу. Если у сервера нет разрешения на доступ к файлу, он может отправить в ответ ошибку 404. Причина, по которой некоторая ошибка «Не авторизовано» не выдается вместо этого, заключается в том, что это раскроет больше информации о файлах, чем вы, владелец сервера, можете себе представить. Чтобы ответить на запросы о привилегированных файлах, не раскрывая, существуют они или нет, можно отправить ошибку 404.

В Windows вы можете просмотреть и изменить разрешения в проводнике, щелкнув файл или папку правой кнопкой мыши и выбрав «Свойства» -> «Безопасность» -> «Изменить». Дополнительные сведения см. в примечаниях о разрешениях на сайте Microsoft.

Типы файлов

Помимо разрешений, сервер также должен быть настроен для обслуживания типа файла, к которому вы обращаетесь. Если файлы с другими расширениями обслуживаются, а файлы .js — нет, проверьте конфигурацию вашего сервера, чтобы убедиться, что файлы .js не занесены в черный список (или не в белый список, в зависимости от обстоятельств).

Расположение каталога

Вы также должны убедиться, что файлы действительно хранятся в самом верхнем каталоге веб-сервера, если вы получаете к ним доступ именно так. Если это не так, вам может потребоваться префикс пути с путем от корня веб-сервера до каталога вашего приложения. Например, вместо fusioncharts/. , вам может понадобиться /path/to/fusioncharts/. или ../../path/to/fusioncharts .

Другие соображения

В вашем конкретном случае вы также должны убедиться, что файлы в папке fusioncharts действительно структурированы так, как вы думаете. (Например, действительно ли в папке fusioncharts есть файл js/[insert name here].js?

Если ни один из этих способов не решит вашу проблему, попробуйте взять то, что работает, и постепенно делать его все более и более похожим на файлы, которые не работают. Выяснив, в какой момент вы переходите от рабочей установки к неработающей, вы можете обнаружить проблему.

См. раздел 4D книги. Тег рассматривается в разделе 2F.

Включения JavaScript не поддерживаются Netscape 2 и Explorer 3.

не поддерживается Netscape 2.

Эта страница была переведена на французский и турецкий языки.

Вам необходимо правильно разместить код JavaScript на HTML-странице, чтобы обеспечить его выполнение браузером. Это не особенно сложно, но вы должны разделить поведение (JavaScript) и структуру (XHTML).

Хотя это можно сделать двумя способами, лучше всего использовать включение JavaScript, поскольку это гарантирует, что ваш код JavaScript будет находиться за пределами HTML-файла.Это упрощает обслуживание ваших страниц, поскольку они содержат только XHTML. Это также позволяет вам изменить поведение всего вашего сайта, отредактировав один единственный файл.

Вы также можете поместить код JavaScript прямо на свою страницу, но этот метод не рекомендуется. Мы также кратко рассмотрим тег.

Включает JavaScript

Включения JavaScript не поддерживаются Netscape 2 и Explorer 3.

Включенные файлы JavaScript могут не обновляться в некоторых браузерах, независимо от того, как часто вы нажимаете кнопку Обновить. Решение: введите URL-адрес файла .js в строке адреса, загрузите его, нажмите Обновить, вернитесь на HTML-страницу и перезагрузите ее.

Вы должны включить файл JavaScript на свои страницы. Это имеет несколько преимуществ:

Обновляя один файл, вы обновляете свой скрипт на всех страницах.
Сами страницы становятся немного светлее, поскольку включаемый файл кэшируется браузером, поэтому его не нужно перезагружать каждый раз, когда пользователь загружает новую страницу.

Я включаю файл JavaScript на каждую страницу этого сайта следующим образом:

Теперь всякий раз при загрузке страницы браузер также помещает скрипт в файл quirksmode.js на странице. Обратите внимание, что вы не видите скрипт в исходном коде, вы видите только тег включения. Тем не менее, функции и переменные во включенном файле доступны для скриптов на каждой странице.

На этой странице я включил специальный скрипт, содержащий функцию testIt(). Попробуйте выполнить его, чтобы проверить поддержку включений в вашем браузере.

Как избежать ошибок в старых браузерах

Сначала определите пустую функцию lastMod() , если поддерживаются включения, она будет перезаписана фактической функцией. Таким образом, функция существует всегда, даже если она ничего не делает в старых браузерах.

не поддерживается Netscape 2.

Внутри тега вы можете поместить некоторый HTML-код, который будет отображаться только в том случае, если браузер ваших пользователей не поддерживает JavaScript или отключил JavaScript. Иногда полезно извиниться перед пользователями, не использующими JavaScript, или предложить им альтернативу.

Тег работает следующим образом: браузеры без скриптов его не знают, поэтому они игнорируют его и распечатывают все, что находится между ними. Браузеры сценариев знают об этом и не показывают этот бит внутри тега, когда включен JavaScript.

К сожалению, Netscape 2 не поддерживает этот полезный тег, поэтому пользователи Netscape 2 увидят как версию сценария, так и версию без сценария. Вы ничего не можете с этим поделать. К счастью, Netscape 2 больше не используется широко.

Атрибут отсрочки

Только в Проводнике 4+ в Windows атрибут defer откладывает выполнение скрипта до тех пор, пока документ не будет полностью проанализирован.

Спецификация W3C HTML 4.0 определяет атрибут defer для тегов script:

Обычно предупреждение выдает ошибку: документ (пока) не содержит никакой формы на момент его выполнения. Однако при добавлении defer к тегу скрипта оповещение откладывается до тех пор, пока не завершится синтаксический анализ, и правильно укажет 1 в качестве длины формы.

Устарело: Direct JavaScripts

Не используйте прямой JavaScript по причинам, описанным в разделе 2C книги. Этот раздел поддерживается только по историческим причинам.

Самый простой способ — разместить скрипты прямо на странице.

Как разместить

Во-первых, вы сообщаете браузеру, что идет скрипт, что это JavaScript и что тип MIME – "текст/javascript". Большинство валидаторов возражают против пропуска TYPE, но браузеры все равно выполняют код.

Где разместить

Обычно вы размещаете JavaScript на странице. Только когда вы хотите написать сообщение на странице, вам нужно будет поместить скрипт в правильное место в HTML.

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

JavaScript – важный аспект создания привлекательных сайтов, но он может существенно повлиять на загрузку страниц. Как и любой другой файл, создающий веб-страницу, JavaScript необходимо загрузить, прежде чем он сможет работать. Размер файлов JavaScript и способ доставки этих файлов влияют на время загрузки. JavaScript также является динамическим языком и компилируется на лету, как только браузер получает его. Это делает обработку JavaScript более дорогостоящей, чем обработка файлов других типов.

В этом посте будет рассказано об оптимизации доставки для JavaScript: почему это должно вас волновать, рекомендации и рекомендации, а также некоторые ссылки на соответствующие ресурсы.Оптимизация обработки JavaScript также невероятно важна для загрузки современных веб-сайтов, но я расскажу об этом в отдельной статье.

Влияние размера файла JS

Но 400 КБ JavaScript не равны 400 КБ загрузки изображения, отчасти потому, что обработка JavaScript происходит, когда файл несжат. Байт за байтом JavaScript обходится дороже, чем файлы любого другого типа, для обработки на странице с точки зрения ЦП и времени. Если учесть, что сжатие GZIP может уменьшить размер доставляемого текстового файла на 70–90 %, 400 КБ на самом деле становятся от 1,3 до 4,0 МБ.

Уменьшение влияния доставки JS

Как же сократить время загрузки страницы, связанное с доставкой JavaScript? Существует два способа с рекомендациями по каждому из них:

Ускорьте загрузку JS в браузере.
- Сократите использование JS для создания своей страницы.
- Минимизируйте все ресурсы JS и используйте минимизированный сторонний JS.
- Самостоятельно разместите сторонний JS (или используйте сервис-воркер).
- Сжать JS.
- Используйте push-уведомление и предварительную загрузку для критически важного кода JS.
Загружайте JS только тогда, когда это необходимо.
- Удалите мертвый код JS.
- Разделение файлов JS для доставки основных компонентов.
- Загружайте некритические компоненты JS асинхронно.
- Кэш JS.

Мы рассмотрим перечисленные передовые методы для достижения обеих целей, в том числе рекомендации для стороннего JavaScript, над которым у вас может не быть достаточного контроля.

Для следующего важно убедиться, что ваша пользовательская база поддерживает реализованные методы браузером. Реальный мониторинг пользователей позволяет вам увидеть, какие версии наиболее распространены среди ваших пользователей, и его следует считать необходимым для тестирования любых изменений, которые вы вносите на свой сайт.

< br />< бр />

Ускорить загрузку JS в браузере

Сократите объем JS, который вы используете для создания страницы

Если вы предоставите меньше JavaScript, страница будет загружаться быстрее.

Не знаете, с чего начать? Мы уже знаем, что JS — это самый дорогой тип файлов, используемых для создания вашего сайта, поэтому вы также можете подумать об этом с точки зрения обработки. Для интерактивности на странице рекомендуется использовать JavaScript для функций, улучшающих взаимодействие с пользователем, таких как ожидаемые переходы, анимация и события, а не для вещей, которые могут нарушить работу, таких как яркая, затянутая анимация.

Существуют ли сторонние фрагменты JavaScript, которые являются избыточными или не являются необходимыми для того, что вы хотите, чтобы страница делала? Подумайте об их устранении.

Разработчики Google разработали рекомендации, основанные на восприятии пользователями задержек производительности, которые вы можете использовать, чтобы решить, нужен ли JS на странице в сочетании с тестированием.

Восприятие пользователями задержек производительности

от 0 до 16 мс

Пользователи исключительно хорошо отслеживают движение, и им не нравится, когда анимация неровная. Они воспринимают анимацию как плавную, если каждую секунду рендерится 60 новых кадров. Это 16 мс на кадр, включая время, которое требуется браузеру, чтобы отобразить новый кадр на экране, а приложению остается около 10 мс на создание кадра.

от 0 до 100 мс

Отвечайте на действия пользователя в течение этого временного окна, и пользователи почувствуют, что результат будет немедленным. Еще немного, и связь между действием и реакцией разорвется.

от 100 до 300 мс

Пользователи отмечают небольшую задержку.

от 300 до 1000 мс

В этом окне все кажется частью естественной и непрерывной последовательности задач. Для большинства пользователей в Интернете загрузка страниц или изменение представлений представляет собой задачу.

1000 мс или больше

По прошествии 1000 миллисекунд (1 секунды) пользователи теряют концентрацию на выполняемой задаче.

10000 мс или больше

Свыше 10 000 миллисекунд (10 секунд) пользователи разочаровываются и, скорее всего, бросают задачи. Они могут вернуться или не вернуться позже.

Использовать мини-файлы JS

Минификация удаляет ненужные знаки препинания, пробелы и символы новой строки. Настоящая минимизация также использует обфускацию, которая переименовывает переменные в имена, которые требуют меньше байтов данных для чтения браузером, чем имена переменных, понятные человеку.

Существует множество онлайн-инструментов для минимизации, но не все из них используют обфускацию. Подумайте, что лучше всего подходит для вашего сайта, и всегда используйте какую-либо форму минимизации. Чем меньше байтов данных вы передаете на файл JavaScript, тем быстрее он может загружаться и тем быстрее браузер сможет в конечном итоге его проанализировать.

Самостоятельный хостинг стороннего JS, где это применимо (или использование сервисного работника)

Размещение стороннего JavaScript в собственном домене может быть менее удобным в сопровождении — вы не будете получать автоматические обновления для скрипта, а изменения в API могут происходить без предупреждения — но все равно может быть полезно, если скрипт критически важен для рендеринг вашей страницы. Скрипт будет использовать вашу сеть и протоколы безопасности, что может привести к лучшим результатам. Вы также можете включать в библиотеки только те компоненты, которые используются в вашем исходном коде (см. раздел «Устранение мертвого кода» ниже).

Альтернативой самостоятельному размещению сторонних скриптов является использование сервисного работника для определения того, как часто часть контента должна быть получена из сети, хотя этот вариант может быть не так доступен, как самостоятельное размещение для сайтов с устаревшей архитектурой. .

Сжать JS

Сжатие текстовых файлов на стороне сервера может существенно уменьшить размер файла. Этот переданный размер JavaScript позволяет загружать больше несжатых данных, чем обычно, что устраняет необходимость в дальнейших обходах. Сжатие JavaScript вместе с CSS и другими текстовыми файлами может уменьшить вес страницы вдвое.

Используйте push и preload для важных JS

Серверная отправка и предварительная загрузка могут использоваться для доставки файлов, которые имеют решающее значение для отображения страницы, раньше загрузки страницы, чем обычно.

Предварительная загрузка немного отличается: связанным ресурсам может быть присвоен атрибут «предварительная загрузка» в файле HTML. Как только страница доставлена и парсинг HTML только начинается, эти ресурсы запрашиваются с сервера. Это быстрее, чем обычный анализ HTML, поскольку ресурсы запрашиваются не в том порядке, в котором они перечислены в HTML.

Загружайте JS только тогда, когда это необходимо

Убедитесь, что в каждый файл JavaScript включен только тот код, который используется. Кроме того, вам может не понадобиться загружать каждый файл JavaScript на каждой странице вашего сайта. Для достижения этих целей я расскажу об оптимизации, которую вы должны знать, и дам ссылки на соответствующие ресурсы.

Устранение мертвого кода с помощью встряхивания дерева

Встряхивание деревьев, или удаление неработающего кода, позволяет избавиться, как вы уже догадались, от кода, которого нет на вашей странице. Например, предположим, что вы загружаете минимизированную библиотеку JQuery, но используете лишь несколько функций, предлагаемых JQuery, в своем собственном коде при создании своей страницы. Устранение мертвого кода позволит вам загружать только те части библиотеки JQuery, которые вы используете.

Термин "tree-shaking" был популяризирован компанией Rollup, которая реализует эту функцию, но она также доступна через webpack и source-map-explorer. Примечательно, что эта функция работает только с модулями ES2015, используя синтаксис для ссылки на пакеты JS в других файлах. Если вы используете CommonJS, доступны некоторые опции, такие как webpack-common-shake, но вы, скорее всего, столкнетесь с ограничениями при использовании CommonJS. В долгосрочной перспективе, если вы хотите использовать встряхивание дерева, наиболее полезным будет ES2015 или более поздняя версия.

Доставляйте важные компоненты с помощью фрагментации на основе маршрута или разделения кода

Разбиение кода на фрагменты на основе маршрутов применяется к веб-сайтам, которые загружают одностраничные приложения, прогрессивные веб-приложения или любую другую платформу, требующую большого пакета JS для создания первой страницы, которую видит пользователь. Использование фрагментации на основе маршрута позволяет сначала загружать на страницу только необходимые фрагменты пакета JS для первоначального рендеринга и интерактивности, что уменьшает общий объем JavaScript, передаваемый для построения страницы, а также время, необходимое для осмысленного рендеринга. содержание.

То, как вы определяете, где разделить код, зависит от типа приложения, которое вы загружаете, от того, кто ваши пользователи, и от того, на что похожа ваша серверная архитектура. Существует несколько типов разделения кода:

Разделение поставщика отделяет ваш JS от JS, предоставляемого вашим поставщиком фреймворка, например React или Vue. Разделение поставщиков предотвращает повторную загрузку большего пакета при изменении функции в любом из источников кода. Разделение поставщиков должно выполняться в каждом веб-приложении.
Разделение с помощью точек входа разделяет ваш код в зависимости от того, где в вашем коде webpack начинает определять зависимости в вашем приложении. Если ваш сайт не использует маршрутизацию на стороне клиента (например, SPA использует маршрутизацию на стороне клиента), использование точек входа для разделения кода может иметь смысл. При таком разделении использование такого инструмента, как Bundle Buddy, чтобы убедиться, что повторяющиеся пакеты не включены в дерево зависимостей, может ускорить загрузку страниц.
Динамическое разделение кода хорошо работает с приложениями, использующими маршрутизацию на стороне клиента, например с одностраничными приложениями, поскольку не все пользователи будут использовать все функции на странице. Это можно сделать с помощью динамического оператора import(), который возвращает Promise. По этой причине вы также можете использовать динамический импорт с async/await. Parcel и webpack будут искать оператор динамического импорта () для ленивой загрузки ресурсов по мере необходимости.

Загружать некритические компоненты JS асинхронно

Использование атрибутов async и defer для внешних скриптов очень важно, особенно для сторонних скриптов. И async, и defer являются асинхронными для загрузки и анализа ресурсов, которые они помечают. Почему это важно? Для JavaScript поведение по умолчанию для загрузки и синтаксического анализа сценария является синхронным, что означает, что почти все остальные процессы на странице останавливаются, пока выполняются эти шаги.

Атрибут async имеет приоритет перед defer в современных браузерах, потому что современные браузерные движки лучше приспособлены для обработки JavaScript. В старых браузерах все наоборот.

Примечательно, что все выполнение JavaScript происходит в одном и том же потоке браузера. JavaScript с пометкой async всегда будет выполняться до JavaScript с пометкой defer . Синхронный JavaScript выполняется немедленно, и его следует использовать только для кода, отображающего страницу (возможно, даже не в этом случае).

Кэш JS

Кэширование можно выполнять несколькими способами, и оно взаимосвязано с некоторыми функциями сервис-воркеров. Кэширование позволяет вам определить правила, когда браузер должен загружать ресурс с сервера вместо того, чтобы получать его из кэша намного быстрее, без необходимости загрузки.

Кэширование может существенно сократить время загрузки и стоимость доставки на страницу, и его следует использовать для JavaScript практически при любых обстоятельствах.

Выводы и TL;DR

Использование функций современных платформ делает JavaScript более простым в сопровождении, чем когда-либо. Хотя на первый взгляд это может показаться запутанным, есть всего пара целей, на которые направлены лучшие практики JavaScript:

Меньшие размеры страниц
Быстрая доставка
Более эффективная обработка

В этом посте мы рассмотрим первые два, которые взаимосвязаны. Меньшие размеры страниц возможны, если вы уменьшите объем кода, который вы предоставляете своим пользователям, тем самым доставляя их быстрее.

TL;DR

Удаление ненужного JavaScript, минимизация и сжатие JavaScript, встряхивание дерева и разделение кода — все это сокращает объем JavaScript, доставляемого на страницу.
Доставка ресурсов с помощью сервис-воркера и использование кэширования могут дополнительно контролировать загрузку JavaScript на страницу.
Асинхронная загрузка скриптов, а также предварительная загрузка и отправка критически важного кода JavaScript также ускоряют загрузку страницы.

Как всегда, не забудьте протестировать любые изменения, прежде чем внедрять их, а затем посмотреть, как они повлияют на вашу пользовательскую базу, с помощью мониторинга реальных пользователей. И вернитесь к следующему сообщению, в котором будет рассмотрена третья цель повышения производительности JavaScript — более эффективная обработка JavaScript.

Включение JavaScript на вашу страницу – довольно простой процесс.

Во-первых, что такое JavaScript?

С сайта школ W3C:

JavaScript был разработан для добавления интерактивности HTML-страницам.
JavaScript – это язык сценариев.
Язык сценариев – это легкий язык программирования.
JavaScript обычно встраивается непосредственно в HTML-страницы.
JavaScript – это интерпретируемый язык (это означает, что скрипты выполняются без предварительной компиляции)
Каждый может использовать JavaScript без покупки лицензии

Включая JavaScript

Вы можете включить JavaScript в свой HTML двумя способами:

Написание кода в HTML
Включить его как ссылку на внешний файл

В большинстве случаев вы будете включать JavaScript как внешний файл.

Тег сценария

При использовании тега script мы всегда должны использовать имя атрибута и значение type="text/javascript" .

Использование тега script для включения внешнего файла JavaScript

Чтобы включить внешний файл JavaScript, мы можем использовать тег скрипта с атрибутом src. Вы уже использовали атрибут src при работе с изображениями. Значением атрибута src должен быть путь к вашему файлу JavaScript.

Этот тег script должен быть включен между тегами в HTML-документе.

Файлы JavaScript

Всегда заканчивайте расширением js
Включить только JavaScript

На веб-сайтах принято помещать все файлы JavaScript в папку с именем js, например:

Простая демонстрация включения JavaScript

Вот очень простая демонстрация того, как включить внешний файл JavaScript в HTML-страницу.

Другие JavaScript

Для этого класса от вас не требуется писать какой-либо реальный код JavaScript. К счастью для вас, многие люди уже написали много JavaScript и даже позволяют вам использовать его бесплатно.

Фреймворки JavaScript

Framework — это, по сути, библиотека кода для определенного языка. Как правило, фреймворк абстрагирует общие задачи и упрощает и ускоряет для дизайнеров и разработчиков написание своего конкретного кода. Фреймворки на самом деле ничего не делают сами по себе, они просто предоставляют людям более простую платформу для разработки.

Распространенные фреймворки JavaScript:

Из этих платформ JQuery в настоящее время является самой популярной. Кроме того, вы больше всего хотели бы встретить его в качестве модного слова.

Размеры файлов JavaScript

Многие файлы JavaScript могут быть довольно большими, что может замедлить загрузку вашей страницы. Популярные фреймворки обычно предлагают «уменьшенную» версию своего кода. Вы всегда должны использовать эту версию на своих страницах, потому что она будет иметь меньший размер файла.

Читайте также: