Question

我将Squarespace用作CMS。我想知道是否有一种方法可以使实际的.JS文件异步地自身加载，以最终减少网站加载时间。

对于不知道的人，Squarespace提供了非常有限的后端内容和文件访问权限。因此，我想知道是否有其他选择可以减少渲染阻止资源。

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

编辑：这是完整的代码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文件可以异步加载吗？

2 个答案: