Preload会阻塞整个渲染阶段

Question

我有一个简单的预加载示例，只是为了了解其工作原理。预加载可获取资源，而不会阻止浏览器的呈现。但这种情况并非如此。下载字体后，始终执行下面的脚本。您可以通过将网络连接更改为慢速开发工具来进行检查。

为什么会这样？

Iam使用最新的镶边

<html>
<head>
  <link rel="preload" onload="this.rel = 'stylesheet'" as="style" href='https://fonts.googleapis.com/css?family=Roboto:400,100,500,700,900,800|Material+Icons'>

</head>
<body>
  Hello
<script>
    window.onload = function () {
        console.log('Loaded')
    }
</script>
</body>
</html>

Answer 1

我已经设置了一个简单的测试用例here

测试用例与您的原始代码差别不大，只是更改了<link>：

<link rel="preload" onload="console.log('loaded stylesheet')" rel="stylesheet" as="style" href='https://fonts.googleapis.com/css?family=Roboto:400,100,500,700,900,800|Material+Icons'>

脚本是在第一次加载样式表之前执行的，对于所有后续加载，脚本都是在样式表获取之后执行的。对于后续请求，样式表应该缓存在浏览器中，不需要进一步提取：

Preload会阻塞整个渲染阶段

问题描述投票：0回答：1

1个回答

最新问题

Preload会阻塞整个渲染阶段

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1