Использование document.ready и window.load для загрузки отложенного содержимого - PullRequest
Новая
       4

Использование document.ready и window.load для загрузки отложенного содержимого

3 голосов
/ 28 октября 2011

Я знаю разницу между событиями document.ready и window.load. Теперь, чтобы улучшить производительность моего сайта, я планирую отложить загрузку javascript . Я видел множество примеров ленивого контента:

  1. Внедрить <script src="..."> и <link rel="stylesheet" href="..."> в document.ready
  2. Внедрить <script src="..."> и <link rel="stylesheet" href="..."> в window.load
  3. Внедрить <script src="..."> и <link rel="stylesheet" href="..."> через несколько секунд после запуска document.ready
  4. Введите <script src="..."> и <link rel="stylesheet" href="..."> через несколько секунд после запуска window.load

Мой первый вопрос: какой из этих методов предпочтительнее?

Мой второй вопрос: я хочу знать, что именно происходит, когда я использую подход № 1. Если мой документ имеет это содержание, определенное в источнике HTML: 

<!-- head -->
<link>
<script>
<!-- body -->

и в document.ready я добавляю эти дополнительные теги: 

<!-- head -->
<link>
<script>
<link class="lazyload">
<script class="lazyload">
<!-- body -->
<img><img><img><img><img>

Мне интересно, что именно будет делать браузер:

  1. Когда точно будет запущено событие document.ready
  2. В каком порядке будут загружаться файлы
  3. Будет ли блокировать страницу при попытке загрузить внедренные файлы

Ответы [ 2 ]

1 голос
/ 30 октября 2011

Я делаю так, чтобы загружать скрипты везде, в основном в <head>, затем сохранять массив функций, подобный очереди, для запуска, а затем перед тем, как </body> перебрать эти скрипты и запустить их. Я мог бы поставить все сценарии в конце <body>, если захочу, но мне легче поместить теги <script> рядом с тем местом, где они актуальны - гораздо легче найти их снова.

Если вам это не нравится, вы можете установить атрибуты async и defer тега <script>. Это означает, что загрузка и выполнение сценариев будут ждать, пока ресурсы не станут доступны (например, пропускная способность со страницы, заканчивающей загрузку).

Если вам требуется загрузить изображения и другой контент перед запуском определенного кода, используйте window.load. В противном случае document.ready в порядке.

0 голосов
/ 30 октября 2011

Это может быть полезно: Загрузка сценариев без блокировки , но она отвечает только на несколько вопросов.

...