前端JavaScript监听浏览器中所有资源的加载进度的方法与实践

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM fully loaded and parsed');
});

window.addEventListener('load', () => {
  console.log('All resources fully loaded');
});

const performanceEntries = performance.getEntriesByType('resource');

performanceEntries.forEach((entry) => {
  console.log(`Resource: ${entry.name}`);
  console.log(`Start Time: ${entry.startTime}`);
  console.log(`Duration: ${entry.duration}`);
});

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    mutation.addedNodes.forEach((node) => {
      if (node.tagName === 'SCRIPT' || node.tagName === 'IMG' || node.tagName === 'LINK') {
        console.log(`New resource added: ${node.src || node.href}`);
      }
    });
  });
});

observer.observe(document, { childList: true, subtree: true });

// 在 service-worker.js 中
self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request).then((response) => {
      console.log(`Resource loaded: ${event.request.url}`);
      return response;
    })
  );
});

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then((registration) => {
      console.log('Service Worker registered:', registration);
    })
    .catch((error) => {
      console.error('Service Worker registration failed:', error);
    });
}

function loadResource(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onprogress = (event) => {
    console.log(`Loading progress: ${event.loaded} / ${event.total}`);
  };
  xhr.onload = () => {
    console.log(`Resource loaded: ${url}`);
  };
  xhr.send();
}

loadResource('https://example.com/image.jpg');

<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>

paceOptions = {
  elements: true, // 监听 DOM 元素的加载
  restartOnRequestAfter: 0, // 在每次请求后重新启动进度条
};

<div id="pace"></div>