具有多个 iframe 的慢速页面

【问题标题】：Slow page with multiple iframes具有多个 iframe 的慢速页面
【发布时间】：2021-12-16 01:46:33
【问题描述】：

我有一个包含 20 个模式的页面，每个模式都会打开一个 iframe，其中包含 youtube 视频。问题是页面因此非常缓慢。你有什么建议我该如何解决这个问题？另一件事是我收到了这个错误：

在“preloadResponse”解决之前，Service Worker 导航预加载请求被取消。如果您打算使用 'preloadResponse'，请使用 waitUntil() 或 respondWith() 等待 promise 完成。

【问题讨论】：

标签： javascript html css performance iframe

【解决方案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
        });
    });
});

【讨论】：