简体繁体 English

根据 webpagetest，延迟脚本仍然呈现阻塞

[英]Deferred script is still render blocking according to webpagetest

原文 2022-06-09 12:31:50 7 1 javascript/ core-web-vitals/ webpagetest/ web-vitals/ front-end-optimization

I am using webpack to build the assets in production.我正在使用 webpack 来构建生产中的资产。 The split chunking feature allows us to break big scripts into chunks.拆分分块功能允许我们将大脚本分成块。 However the problem is that even though the scripts are deferred, webpagetest still shows they are render blocking:然而，问题是即使脚本被推迟，webpagetest 仍然显示它们呈现阻塞：

The scripts already have the defer attributes.脚本已经具有 defer 属性。

Is it because defer is executing the scripts in order?是因为 defer 是按顺序执行脚本吗？ Changing the defer to async seems to have solved the issue but I am trying to understand why it was render-blocking even though using defer.将延迟更改为异步似乎已经解决了这个问题，但我试图理解为什么即使使用延迟它也会阻塞渲染。

Page URL: https://trip101.com/article/airbnb-castle-england页面URL： https://trip101.com/article/airbnb-castle-england

1 个解决方案

The render blocking indicator comes directly from Chrome, and in this case it's a bug in Chrome due to a race condition.渲染阻塞指示器直接来自 Chrome，在这种情况下，它是 Chrome 中由于竞争条件而导致的错误。 (You can find the Chromium bug here: https://chromium-review.googlesource.com/c/chromium/src/+/3596328 ) （您可以在此处找到 Chromium 错误： https://chromium-review.googlesource.com/c/chromium/src/+/3596328 ）

Should be fixed in version 103, which comes out June 21st ( https://chromestatus.com/roadmap ).应该在 6 月 21 日发布的版本 103 中得到修复 ( https://chromestatus.com/roadmap )。

页脚中的脚本是否“阻止渲染”？ - Is a script in the footer “render-blocking”?

在图像之前加载渲染阻止脚本 - Loading render blocking script before image

渲染阻塞延迟vs底部移动脚本 - Render blocking defer vs moving script at bottom

Handlebars.js：呈现大数据而不阻塞UI –使用setTimeout（）延迟还是延迟加载？ - Handlebars.js: Render large data without blocking UI – deferred or lazy loading using setTimeout()?

即使在异步加载资源后，Google Page Speed仍然会出现渲染阻止问题 - Google Page Speed still giving render blocking issue even after loading resources async

解析器阻塞与渲染阻塞 - Parser blocking vs render blocking

具有async属性的script元素仍然阻止浏览器渲染？ - script element with async attribute still block browser render?

这个CSS如何阻止？ - How is this CSS render blocking?

渲染阻止JavaScript和CSS - Render blocking javascript and CSS

js是否阻止页面渲染？ - is js blocking for page render or not?

暂无

暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 页脚中的脚本是否“阻止渲染”？ - Is a script in the footer “render-blocking”? 在图像之前加载渲染阻止脚本 - Loading render blocking script before image 渲染阻塞延迟vs底部移动脚本 - Render blocking defer vs moving script at bottom Handlebars.js：呈现大数据而不阻塞UI –使用setTimeout（）延迟还是延迟加载？ - Handlebars.js: Render large data without blocking UI – deferred or lazy loading using setTimeout()? 即使在异步加载资源后，Google Page Speed仍然会出现渲染阻止问题 - Google Page Speed still giving render blocking issue even after loading resources async 解析器阻塞与渲染阻塞 - Parser blocking vs render blocking 具有async属性的script元素仍然阻止浏览器渲染？ - script element with async attribute still block browser render? 这个CSS如何阻止？ - How is this CSS render blocking? 渲染阻止JavaScript和CSS - Render blocking javascript and CSS js是否阻止页面渲染？ - is js blocking for page render or not?

相关标签

粤ICP备18138465号 © 2020-2024 STACKOOM.COM