fancyBox/jQueryV3的最快加载速度，同时不会丢失Google PageSpeed Insights中的分数

目前，我们的一个旧web项目中有fancyBox v2.1.5和jQuery v1.11.3。它们被附加到HTML页面的关闭标记之前，如下所示：

if（typeof jQuery==“未定义”）{
write（unescape（“%3Cscript src=”/scripts/jquery-1.11.3.min.js'type='text/javascript'%3E%3C/script%3E”）；
}
$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox({
beforeShow:函数（）{
var alt=this.element.find（'img'）.attr（'alt'）；
this.inner.find（'img'）.attr（'alt'，alt）；
this.title=alt；
}
});
});

fancyBox的CSS是这样添加到

部分的：

当我为我们的HTML页面启动Google的PageSpeed Insights测试时，Google总是提到这个CSS，并告诉我们在上面的内容中有一个阻止CSS资源。为了解决这个问题并使页面的加载时间变得更好，我将升级到fancyBox和jQuery的最新版本（这也将带来新的特性）

fancyBox项目的示例告诉我们如何将v3添加到HTML页面：

如果我在结束标记前添加这些行，是否有助于实现我的目标？在使用fancyBox/jQuery时，有没有其他技巧可以加快页面加载速度（比如，在

标记中添加

async

属性，或者在Web服务器上托管fancyBox/jQuery文件）

---

另外，建议的解决方案可能存在的一个问题是，

标签应该只放在

部分，尽管在HTML5中它似乎也在身体中起作用（请参见）。

在尝试了可用的方法之后，查看谷歌推荐-这是一个线程-

，我决定用

var newStyle=document.createElement（'link'）在页面主体中加载fancyBox的CSS；newStyle.href=https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css'; newStyle.rel='stylesheet'；newStyle.type='text/css'；document.getElementsByTagName（'head'）[0].appendChild（newStyle）。这种方法有什么缺点吗？因为这个CSS不是（很可能）关键的，所以最好在下一个框架中加载，以优先绘制可见内容（第一个链接中有一个示例），但这很好，你不认为使用Optimize CSS Delivery文章中的代码片段延迟加载fancyBox的CSS可能会导致fancyBox的功能不正常吗？如果fancyBox开发人员认为他们的CSS将按照主页上显示的正常方式加载，该怎么办？加载CSS（闪烁或诸如此类）后，再为页面添加一个绘画周期如何？作为fancybox的作者，我可以向您保证，这并不重要。