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

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

0 голосов
/ 03 сентября 2018

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

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

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

1 Ответ

0 голосов
/ 03 сентября 2018

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

// 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>
...