Rýchlosť načítania stránky

Cieľ

Chcem pomocou jazyka JavaScript zmerať a zobraziť čas načítania webovej stránky v prehliadači.

Riešenie

Čas načítania, respektíve časy rôznych činností, ktoré sa dejú počas toho keď sa v prehliadači zobrazuje webová stránka je možné merať a zobrazovať pomocou jazyka JavaScript.

Rozhranie PerformanceTiming je podporované naprieč všetkými prehliadačmi, no odporúčajú ho prestať používať, je zastarané.

<span id="loadTimeElement"></span>

<script>
window.onload = function () {
  var loadTime = (window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart)/1000; 
  console.log('Page load time is '+ loadTime);
  var xy = document.getElementById("loadTimeElement");
  xy.innerHTML = "Page loaded in: " + loadTime + " seconds.";
};
</script>

Ešte jeden príklad:

<span id="loadTimeElement"></span>

<script>
window.onload = function () {
  setTimeout(function(){
    var t = performance.timing;
    var loadTime = ((t.loadEventEnd - t.navigationStart)/1000);
    console.log('Page load time is '+ loadTime);
    var xy = document.getElementById("loadTimeElement");
    xy.innerHTML = "Page loaded in: " + loadTime + " seconds.";
  }, 0);
};
</script>

Odporúčajú začať používať rozhranie PerformanceNavigationTiming:

<span id="loadTimeElement"></span>

<script>
window.onload = function () {
  // Use getEntriesByType() to just get the "navigation" events
  var perfEntries = performance.getEntriesByType("navigation");
  var x = perfEntries[0];
  console.log("DOM complete = " + (x.domComplete)/1000);
  console.log("DOM interactive = " + (x.domInteractive)/1000);
  var xy = document.getElementById("loadTimeElement");
  xy.innerHTML = "Page loaded in: " + ((x.domComplete)/1000) + " seconds.";
};
</script>

Tento spôsob je zatiaľ experimentálny, je vo fáze návrhu, takzvaný „W3C Editor’s Draft“. Mal by byť podporovaný vo všetkých rozšírených prehliadačoch.

image

Procesný model zo stránok w3c.github.io


Zdroj


JavaScript

229 slov

2020-01-29 09:16 +0100

2020-02-08 14:36 +0100