Html script src version

Версионность js и css

Часто вижу проблему, что разработчики допускают кеширование браузерами устаревших стилей css и скриптов js. Это всплывает, если разметка обновилась, а стили или скрипты подгрузились старые. Получается что верстка «едет». При этом у разработчиков все хорошо отображается из-за локальных настроек. При этом горе-разработчики рекомендуют всем проверяющим нажимать CTRL+R и CTRL+F5 для того чтобы обновить закешированное содержимое. А вот простые пользователи, которые возвращаются на сайт, видят черти что.

Решить данную проблему очень просто, нужно к пути до скрипта дописывать гет параметром версию файла, например:

 //обычное подключение скриптов  //подключение скрипта с учетом версии  

Что дает битрикс?

Битрикс при правильном подключении стилей и скриптов дописывает к пути до файла время обновления файла+размер файла:

Как правильно подключать свои файлы js и css?

Добавления стилей и скриптов в

Чтобы битрикс выводил вместе со своими стилями и скриптами ваши, их нужно добавлять следующим образом:

 $APPLICATION->SetAdditionalCSS('/assets/css/bootstrap-select.css'); $APPLICATION->SetAdditionalCSS('/assets/css/style.css'); $APPLICATION->AddHeadScript('/assets/js/jquery-1.11.2.min.js'); $APPLICATION->AddHeadScript('/assets/js/bootstrap.min.js'); 

Этот код нужно писать в некешируемой области сайта, например в шаблоне. Если требуется подключать свои стили/скрипты из компонентов, то нужно использовать файл component_epilog.php

Тогда код подключения ваших стилей/скриптов будет генерироваться вместе со стандартными с помощью функции:

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

А если нужно подключать скрипты в самом конце страницы, в footer?

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

Если не отвлекаться, то в шаблоне сайта, в файле footer.php нужно вместо непосредственно пути до стилей скриптов писать следующее:

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

Источник

Подключение JavaScript к HTML

Осваивайте профессию, начните зарабатывать, а платите через год!

Курсы Python Ак­ция! Бес­плат­но!

Станьте хакером на Python за 3 дня

Веб-вёрстка. CSS, HTML и JavaScript

Станьте веб-разработчиком с нуля

В этой главе мы займемся размещением сценариев в HTML-документе, чтобы иметь возможность использовать их для оперативной модификации HTML-документа. Для вставки JavaScript-кoдa в НТМL-страницу обычно используют элемент .

Первая программа

Чтобы ваша первая пpoгpaммa (или сценарий) JavaScript запустилась, ее нужно внедрить в НТМL-документ.
Сценарии внедряются в HTML-документ различными стандартными способами:

• поместить код непосредственно в атрибут события HTML-элемента;
• поместить код между открывающим и закрывающим тегами ;
• поместить все ваши скрипты во внешний файл (с расширением .js), а затем связать его с документом HTML.

JavaScript в элементе script

Самый простой способ внедрения JavaScript в HTML-документ – использование тега . Теги часто помещают в элемент , и ранее этот способ считался чуть ли не обязательным. Однако в наши дни теги используются как в элементе , так и в теле веб-страниц.

Таким образом, на одной веб-странице могут располагаться сразу несколько сценариев. В какой последовательности браузер будет выполнять эти сценарии? Как правило, выполнение сценариев браузерами происходит по мере их загрузки. Браузер читает HTML-документ сверху вниз и, когда он встречает тег , рассматривает текст программы как сценарий и выполняет его. Остальной контент страницы не загружается и не отображается, пока не будет выполнен весь код в элементе .

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

JavaScript в атрибутах событий HTML-элементов

Вышеприведенный сценарий был выполнен при открытии страницы и вывел строку: «Привет, мир!». Однако не всегда нужно, чтобы выполнение сценария начиналось сразу при открытии страницы. Чаще всего требуется, чтобы программа запускалась при определенном событии, например при нажатии какой-то кнопки.

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

Внешний JavaScript

Если JavaScript-кода много – его выносят в отдельный файл, который, как правило, имеет расширение .js .

Чтобы включить в HTML-документ JavaScript-кoд из внешнего файла, нужно использовать атрибут src (source) тега . Его значением должен быть URL-aдpec файла, в котором содержится JS-код:

В этом примере указан абсолютный путь к файлу с именем script.js, содержащему скрипт (из корня сайта). Сам файл должен содержать только JavaScript-кoд, который иначе располагался бы между тегами .

По аналогии с элементом атрибуту src элемента можно назначить полный URL-aдpec, не относящийся к домену текущей НТМL-страницы:

На заметку: Подробнее о путях файлов читайте в разделе «Абсолютные и относительные ссылки».

Чтобы подключить несколько скриптов, используйте несколько тегов:

Примечание: Элемент , хотя внешний сценарий выполняется, встроенный код игнорируется.

Независимо от того, как JS-код включается в НТМL-документ, элементы интерпретируются браузером в том порядке, в котором они расположены в HTML-документе. Сначала интерпретируется код первого элемента , затем браузер приступает ко второму элементу и т. д.

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

Примечание: Во внешние файлы копируется только JavaScript-код без указания открывающего и закрывающего тегов .

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

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

Это наглядно демонстрирует следующий пример. Метод alert() выводит на экран модальное окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК»:

Источник

JavaScript: versioning your files to avoid browser cache

JavaScript and CSS files are usually cached in the browser after the first access. The browser cache is used to store web application assets like images, CSS, and JS code on your computer’s hard drive.

This is so that the next time the web application is opened, your browser simply retrieves the assets for the page from the hard drive instead of downloading the same file from the server.

But the downside of caching is that when you update some assets on your web application (CSS style or JavaScript code) the new version of the code won’t be downloaded because, to the browser, your application still requests the same file.

For example, let’s say you have the following util.js file:

Then you load it into your HTML file tag as follows:

The string "Hello" will be written on your tag, and you’re done. But suppose some time later you decided to change the string from "Hello" to "World" as follows:

 You might find that everything works great in your computer, and you push the update to the server. But because of caching that’s activated on your production server, the file util.js still returns "Hello" instead of "World" .

To fix this problem, you needed to add versioning to your util.js file request on the tag. The easiest way would be by adding a query string parameter v as follows:

 By simply adding the versioning query parameter, the browser would consider that the application is requesting a different file, and will download the file instead of serving the one cached on your hard drive. When you update the JS file again, you can bump the version up to version two:

This simple query string parameter is enough to avoid browser cache, but you can also add an automated versioning to the file name by using timestamp or a randomized 10 number digits to the assets.

Automate versioning with Webpack

If you’re using build tools like Webpack, you can even automate the output file name as shown in the Webpack caching guide. Instead of using a query string parameter, Webpack will append the version of your JavaScript files into the name, for example util.bfjs921.js .

In the following webpack.config.js file, the name of the JS file generated by Webpack follows the [name].[contenthash].js pattern. The contenthash will be replaced by a unique hash based on the content of the file:

By using this method, the file name of your JS file will always change between builds. For example, you may have the following output file from Webpack when you build your application three times:

Because Webpack also generates the index.html file, you don’t need to change the tag manually each time the hash changes. Webpack will take care of putting the right tag for you.

Depending on the complexity of your web application, you may choose between simply adding a version query parameter to the tag or using build tools like Webpack to automate the versioning for you.

Learn JavaScript for Beginners 🔥

Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.

A practical and fun way to learn JavaScript and build an application using Node.js.

About

Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.

Search

Type the keyword below and hit enter

Tags

Click to see all tutorials tagged with:

Источник