微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

有没有办法在页面完全加载后加载脚本标记并执行其中包含的脚本?

如何解决有没有办法在页面完全加载后加载脚本标记并执行其中包含的脚本?

页面已加载到我的html(或PHP页面中之后,我试图动态地包含three.js模块类型脚本标签。我需要这样做是因为google pagespeed洞察力在包含三个js的页面上严重失败,从而为该页面提供了错误和可怕的速度得分。

  • 我尝试了PHP readfile-可以,但是并没有真正改变速度测试的行为,我得到了LCP的问号结果

  • 我正在考虑尝试在页面加载后使用xhr插入脚本,这可能是一种解决方案吗?

settimeout在这里不是选项

有什么想法吗?

解决方法

管理加载Three.js脚本的正确方法是使用UPDATE METRICS_G m,( SELECT ApplicationID,COUNT(*) FamilySize,GrantID FROM ( SELECT g.ApplicationID,ChildApplicationID `RefID`,g.GrantID FROM CONTINUITYCHILD_P `child` JOIN uspto.GRANT as g ON child.ApplicationID = g.ApplicationID UNION SELECT g2.ApplicationID,ParentApplicationID `RefID`,g2.GrantID FROM CONTINUITYPARENT_P `par` JOIN uspto.GRANT as g2 ON par.ApplicationID = g2.ApplicationID ) t1 GROUP BY ApplicationID ) t2 SET m.FamilySize = t2.FamilySize WHERE m.GrantID = t2.GrantID;

一旦页面被加载并且浏览器窗口处于空闲状态,脚本将开始加载。

示例:

requestIdleCallback()

您可以传入一个可选的timeout参数,如果回调未在超时时间内完成,它将在下一个事件循环空闲时重新为该回调排队。

function loadThreeJS(deadline){ //your three.js script } requestIdleCallback(loadThreeJS)

可以找到文档here

另一种方法是使用Promise并在requestIdleCallback(loadThreeJS,{ timeout: 3000 })事件之后加载脚本。

以下内容也使用DOMContentLoaded,但是由于您将脚本标签插入文档中,因此以下内容更加针对您的问题。它是从here借来的,并可以直接在浏览器中使用:

如果您需要script元素具有requestIdleCallback(),请像下面这样设置options变量:type=module

let options = {timeout: 3000,type: "module"}

ThreeJS脚本CDN URL的脚本加载时间为15毫秒。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。