Javascript 文件可以异步加载自身吗？

Question

我使用 Squarespace 作为我的 CMS。我想知道是否有办法让实际的 .JS 文件自己异步加载以最终减少网站加载时间。

对于那些不知道的人，Squarespace 提供对后端内容和文件的非常有限的访问。所以我想知道是否有任何替代方法可以减少渲染阻塞资源。

该文件位于 [websitename]/scripts/site-bundle.js 中，通过 SFTP 找到。

编辑：这是完整代码 https://codepen.io/anon/pen/MMKZyQ，如您所见，我找不到任何脚本标签来插入延迟或异步值。

!function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}n(2);var r=n(6),i=o(r),a=n(60),u=n(65),c=o(u),l=n(85),s=o(l);n(86);var d=n(87),f=o(d),p=n(100),h=o(p),v=n(101),y=o(v),m=n(104),A=o(m),g=n(121),b=o(g),w=n(189),_=o(w),x=n(190),E=o(x),k=n(191),S=o(k),T=n(192),L=o(T),O=n(193),M=o(O),P=n(194),j=o(P),C=n(195),R=o(C),I=n(103),F=o(I),V=n(196),N=o(V),D=n(199),B=o(D),G=n(200),U=o(G),H=n(207),z=o(H);i.default.register("AncillaryLayout",f.default),i.default.register("FooterBreakpoints",h.default),i.default.register("HashManager",y.default),i.default.register("IndexFirstSectionHeight",A.default),i.default.register("IndexGallery",b.default),i.default.register("IndexGalleryVideo",_.default),i.default.register("IndexNavigation",E.default),i.default.register("HeaderNavFolderTouch",S.default),i.default.register("HeaderOverlay",L.default),i.default.register("MobileClassname",M.default),i.default.register("MobileOverlayFolders",j.default),i.default.register("MobileOffset",R.default),i.default.register("MobileOverlayToggle",F.default),i.default.register("Parallax",N.default),i.default.register("ScrollIndicator",B.default),i.default.register("SiteLoader",U.default),i.default.register("UserAccountLink",z.default),i.default.register("VideoBackground",function(e){return(0,c.default)(e,function(e){var t=e.handleResize,n=e.handleTweak;(0,s.default)(t,105),a.Tweak.watch("tweak-overlay-parallax-enabled",n)})}),window.addEventListener("controller:refresh",i.default.refresh)},function(e,t,n){n(3).polyfill()},function(e,t,n){(function(t){for(var o=n(4),r="undefined"==typeof window?t:window,i=["moz","webkit"],a="AnimationFrame",u=r["request"+a],c=r["cancel"+a]||r["cancelRequest"+a],l=0;!u&&l<i.length;l++)u=r[i[l]+"Request"+a],c=r[i[l]+"Cancel"+a]||r[i[l]+"CancelRequest"+a];if(!u||!c){var s=0,d=0,f=[],p=1e3/60;u=function(e){if(0===f.length){var t=o(),n=Math.max(0,p-(t-s));s=n+t,setTimeout(function(){var e=f.slice(0);f.length=0;for(var t=0;t<e.length;t++)if(!e[t].cancelled)try{e[t].callback(s)}catch(e){setTimeout(function(){throw e},0)}},Math.round(n))}return f.push({handle:++d,callback:e,cancelled:!1}),d},c=function(e){for(var t=0;t<f.length;t++)f[t].handle===e&&(f[t].cancelled=!0)}}e.exports=function(e){return u.call(r,e)},e.exports.cancel=function()

Answer 1

script 标签上有两个属性可以完全满足您的要求：

指定 defer 将延迟脚本的加载，直到页面被完全解析（并呈现）
指定 async 将向浏览器表明该脚本可以在其选择的任何时间异步加载。

这两个属性都得到了很好的支持 (defer, async)，因此，您可以而且应该利用它们来实现这一目标。

Answer 2

可以通过执行以下操作为 Brine/Wright family of templates 完成此操作：

Enable Developer Mode（设置 > 高级 > 开发者模式）
使用 SFTP 或 Git，获取对模板文件的访问权限。
在 site.region 文件中，更改：

<squarespace:script src="site-bundle.js" combo="false" />

至

<squarespace:script src="site-bundle.js" combo="false" async="true"/>
使用 SFTP 或 Git 更新 Squarespace 服务器上的模板文件。

您也可以使用 <script src="/scripts/site-bundle.js" async></script> 而不是 使用 Squarespace 的脚本加载器。只需替换步骤 3 中的上述行即可。

顺便说一句，可以在 Squarespace 的 Wright GitHub repository.

中找到未捆绑的代码

对于不属于 Brine/Wright 系列的其他模板，可能适用类似的步骤，但文件名可能不同。

Javascript 文件可以异步加载自身吗？

Can A Javascript File Load Itself Asynchronously?

javascript

html

asynchronous

squarespace