January 2, 2021

CDN公共库的修改

博客有一段时间加载很慢,打开chrome的控制台显示这样:

image-20210102140530995

image-20210102145113671

网站有几处错误和警告,加载这些失效和错误资源限制了网页加载速度。

<link rel="stylesheet" href="{{ $scratch.Get "baseURL" }}/css/styles.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" 
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

这些是错误和失效的公共CDN,以及警告链接,一般这种情况是CDN公共库网站失效了,导致JS,CSS资源加载缓慢错误。这时就应该找一个加速CDN库了。这里我推荐奇虎360CDN公共库jsdelivr公共库,找到相应的CSS.js格式换成这些公共CDN,但是JS,CSS资源在公共CDN安全容易受到攻击,这时需要SRI,SRI生成可以在SRI Hash Generator这网站生成相应的哈希函数。启用 SRI 策略后,浏览器会对资源进行 CORS 校验,这就要求被请求的资源必须同域,或配置 Access-Control-Allow-Origin 响应头和添加crossorigin="anonymous" 这个属性。

改好后上传GitHub,再打开网站控制台看看。

all.css静态文件由30s加载时间下降到13ms,大大的减少了网站加载时间,网页速度得到提升。


这里我要感谢@怡红公子 提供公共CDN资源库。

santorini

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

©阿波尔的博客2019-2024