具有多个 iframe 的慢速页面

Question

我有一个包含 20 个模态框的页面，每个模态框都会打开一个带有 YouTube 视频的 iframe。问题是页面因此而缓慢得令人痛苦。您有什么建议我该如何解决？另一件事是我收到此错误：

The service worker navigation preload request was cancelled before 'preloadResponse' settled. If you intend to use 'preloadResponse', use waitUntil() or respondWith() to wait for the promise to settle.

Answer 1

页面加载时，浏览器正在尝试下载所有 YouTube 视频。
所以它变慢了。
如果您在模式点击时加载视频，页面加载时间会更好。
类似的东西：

function domReady(callback) {
    document.readyState === 'interactive' || document.readyState === 'complete' ? callback() : document.addEventListener('DOMContentLoaded', callback);
}

domReady(function () {
    const videoModals = document.getElementsByClassName('video-modal');

    Array.from(videoModals).forEach((el) => {
        el.addEventListener('click', function () {
            // load video
        });
    });
});

具有多个 iframe 的慢速页面

Slow page with multiple iframes

html

javascript

css

performance

iframe