Можно ли прочитать тело HTML до события DOM-ready?

Мне нужно как можно скорее прочитать содержимое тела HTML (либо в виде DOM, либо в виде необработанной строки), чтобы оптимизировать загрузку других сценариев (загрузить сценарий A, если содержимым является X, или B, если содержимым является Y). Можно ли избежать ожидания всех sync скрипты для загрузки (что является условием для DOM-ready) для чтения тела?

Примечание: изменение сценариев на async это не вариант.

Обновление: я не контролирую сервер, поэтому оптимизация не может быть выполнена там.

1 ответ

Возможно, посмотрите на изменения состояния, подписавшись на это. Встроенные комментарии для каждого.

// self envoking
(function() {
  console.log("self envoking in script");
}());
console.log(document.readyState); // logs "loading" first
window.onload = function() {
  console.log('onload'); // I fire later
}
document.addEventListener("DOMContentLoaded", function() {
  console.log('DOMContentLoaded');
});
document.addEventListener('readystatechange', function() {
  if (document.readyState == "loading") {
    //document is loading, does not fire here since no change from "loading" to "loading"
  }
  if (document.readyState == "interactive") {
    //document fully read. fires before DOMContentLoaded
  }
  if (document.readyState == "complete") {
    //document fully read and all resources (like images) loaded. fires after DOMContentLoaded
  }
  console.log(document.readyState)
});
<script id="myscript">
  // self envoking
  (function() {
    console.log("self envoking with id");
    window.customevent = new Event('customload');

    // Listen for the event.
    document.addEventListener('customload', function(e) {
      console.log("customload fired");  
    }, false);
    // another way
    var scriptNode = document.createElement('script');
    scriptNode.innerHTML = 'console.log("happy happy day inject");';
    document.head.appendChild(scriptNode);
  }());
</script>
<script id="another">
  var thisScriptElement = document.getElementById("another");
  // self envoking
  (function() {
    console.log("Another self envoking with id");
    // Dispatch the event.
    document.dispatchEvent(customevent);
  }());
</script>

Другие вопросы по тегам