[TOC]
起因
博客的加载速度实在是太慢了，chrome Dev tools显示，完成加载需要15s以上，让人难以接受。
使用PageSpeed Insights进行测速，手机版20分，电脑上不到60分。是什么阻止了网页的快速加载？让我们来一探究竟。
奇怪的第三方
诊断结果--详细了解您的应用的性能。这些数字不会直接影响性能得分。
- 降低第三方代码的影响 第三方代码将主线程阻止了 12392 毫秒
让我看看是谁敢阻塞爷
| 第三方 | 传输文件大小 | 主线程拦截时间 |
|---|---|---|
| JSDelivr CDN | 200KiB | 0ms |
| Bootstrap Chinese Network | 480KiB | 10292ms |
| CDNJS | ... | 1100ms |
？？？后面那两个是减速器吗？？？
Bootstrap是中国优化，海外节点逊可以理解，，，但CDNJS由云耀斑驱动，怎么也这么屑？好在CDNJS启用了HTTP / 3 QUIC协议所以大陆访问速度并不慢（但域名解析失败又是怎么回事？
过载的主线程
最大限度地减少主线程工作 - 8.2 秒
建议您减少为解析、编译和执行 JS 而花费的时间。您可能会发现，提供较小的 JS 负载有助于实现此目标 了解详情
开始行动
2020-07-28 to 2020-07-29
首先得把垃圾CDN扬了
BootStrap死 CDNJS死 这样以后就没有别的选择了，JSDelivr 天下第一！
Pio插件中l2d.js还是占用了加载时间的大头。其中2d模型png文件就500+KiB，传输时间动辄10s+。
Pio插件提供了便捷的cdn设置页面，
选择外链模型
model.json-JSDelivr
在这里填入一个模型配置文件 model.json 的地址，可供使用外链模型，不填则使用插件目录下的模型在这里填入一个模型配置文件 model.json 的地址，可供使用外链模型，不填则使用插件目录下的模型
Pio
原来不止我一个在用JSDelivr加载Pio插件，填好，再测试，500KiB的模型png仅加载了100ms！震撼我,...
主页加载时间从20s+一下子缩到了8s以内，但这就是极致了么？不，一定还能继续省！
很快我就发现炫彩鼠标插件HoerMouse从外部源（lib.sinaapp.com)加载了jQuery1.9.1，既然主题和各种插件都加载过jQuery了，还有加载的必要吗？我试着关闭，经测试，炫彩鼠标插件正常，谁知这却给代码高亮插件埋了雷。
还能再节省一点吗
HoerMouse
从本站也加载了好几个文件，这也对速度造成了影响，于是我从Gitee克隆，一瞬导入Github，并修改相关代码。Github-HoerMouse-First commit
使用JSDelivr加速，效果也不错。
HoerMouse
MDr
MDr主题看起来不错，除了背景惨白不能自定义之外都挺好。编辑外观页面提供了便捷的CDN设置，可惜MDUI静态资源来源不能选jsDelivr，什么？还有小学生递送不能加载的资源？还好可以自定义，一共加载两个文件，却只有一个输入框，一番摸索之后，终于找到文档，原来是先写css，第二行写js
MDr
好了，搞了那么多，终于大功告成了，再去测试一下
实验室数据
| 项目 | 时间 |
|---|---|
| 首次内容绘制时间 | 1.3 秒 |
| 速度指数 | 1.4 秒 |
| 最大内容渲染 | 1.6 秒 |
| 可交互前的耗时 | 1.8 秒 |
| 总阻塞时间 | 320 毫秒 |
| 累积布局偏移 | 0.001 |
Pagespeed有时甚至能达到90（PC端），手机端分数不高，不过实际体验也不错。那本次维护就能告一段落了。
小结
JSDelivr是好文明
得益于 HTTP / 2多路复用和TLS 1.3以及CHACHA20_POLY1305算法的应用，即使是加载数十个资源，共2MiB文件，速度也很快，当然，JSDelivr在中国广泛的CDN节点分布也功不可没。
同时加载这么多资源会不会产生阻塞？
不会。在HTTP / 1.1 中，浏览器会限制并发请求数，控制TCP连接数在2-8之间，排队加载。所以在过去，静态资源要从多个域名下加载。在HTTP / 2 中，由于多路复用，从同一个域名下加载静态资源，不仅不会阻塞，还能减少DNS解析次数，连接建立的耗时等。
旁生枝节
EditorMD
EditorMD在加载首页时会请求几个css和js，为什么不给它们加上CDN呢？就像刚刚一样，我修改了plugin.php内的地址，在一次测试中发现，网页上所有代码高亮都没了！
危
一瞬回档（初中生行为，怎么办呢，，，
- 上一次看到代码高亮是什么时候？
- 有无备份？
思考完这些问题后，先回档到修改EditorMD之前，没有用，再回到开始维护之前，还是没有用。:scream:完了qwq
干脆直接回到建站之初，只有3篇文章的那个备份。乱捣鼓一阵，还是没用，原来我只备份了网站，没有备份数据库。而插件的设置正是保存在数据库里的，我只能一个个回忆改了什么设置，一个个改回来。
尾声
原来是HoerMouse里加载jQuery的选项被我关了，这样不影响炫彩鼠标，却影响了代码高亮。控制台还没有提示，看上去一切正常，服了。
总结
通过这次维护，我学会了：
以上
2020-08-06 19:21 星期四
awsl.blog控制台
下次维护列表-gugugu
- 搞清楚各个插件之间的依赖关系，尽量相互独立
- 减少不必要的js
- 制作位于英国的镜像站，符合GPDR
- 搞一个更好看的背景
本篇文章采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 许可协议进行许可。
转载或引用本文时请遵守许可协议，注明出处。