Какая разница в размещении JavaScript в файле и в теге сценария? - PullRequest
Новая
       3

Какая разница в размещении JavaScript в файле и в теге сценария?

4 голосов
/ 21 июля 2011

В чем разница между следующими двумя кодами в файле HTML? Если я добавлю еще один файл javascript xyz.js после включения abc.js, есть ли какой-нибудь приоритет, связанный с использованием сценариев?

Первый код: 

<script src="js/abc.js" type="text/javascript" language="javascript"> </script>

Второй код: 

<script language="javascript">
        /*same code of abc.js*/ 
</script

Ответы [ 5 ]

3 голосов
/ 21 июля 2011

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

Так что, если у вас есть 100 000 файлов javascript,Ваш посетитель должен загрузить их только один раз.В противном случае им пришлось бы загружать те же самые 100 Кбайт при каждой загрузке страницы и посещении.

Это разрешение распространяется также на встроенный и внешний CSS и изображения !!

Конечно, это только вершина айсберга кеширования и производительности браузера (книга Стива - одна из веб-библий):

http://yuiblog.com/blog/2006/11/28/performance-research-part-1/

http://www.yuiblog.com/blog/2007/01/04/performance-research-part-2/

http://www.stevesouders.com/

2 голосов
/ 21 июля 2011

В чем разница между следующими двумя кодами в файле HTML?

Требуется дополнительный HTTP-запрос, но он кэшируется. Другой нет.

Если я добавлю еще один файл javascript xyz.js после включения файла abc.js, есть ли какой-нибудь приоритет, связанный с использованием сценариев?

Загрузка внешних скриптов блокируется. Первый будет загружен первым. Затем будет загружен второй.

1 голос
/ 21 июля 2011

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

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

В противном случае приоритет отсутствует.

0 голосов
/ 21 июля 2011

Помимо основной причины кеширования, вторым и важным отличием является поддержание Разделение проблем , что, помимо прочего, говорит о том, что в веб-разработкеразметка (html) должна быть отделена от стиля (css) и поведения (js).Эти элементы должны храниться в отдельных местах и ​​связаны только с разметкой.Это важно для организации проекта, постоянного обслуживания и оптимизации.Написание беспорядочного кода спагетти со встроенным всем делает вас грустной пандой .

0 голосов
/ 21 июля 2011

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

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

Что касается вашего второго вопроса, сценарии загружаются по порядку.Вся внешняя загрузка блокируется во время загрузки скриптов.Поэтому, желательно, чтобы все ваши скрипты включались внизу тега <body>.

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

Нет похожих вопросов

...