Home › General › Thread

关于博客页面加载提速

chuxinyuan 2023-04-06 08:40:23

谭兄的博客提速小记我试了下，确实有效果，你要不要也试试啊？

有一个 Mathjax.js 文件因为 ? 后面赘了一堆参数，我不知道怎么整，暂时没有放在 static 路径下，不过目前我的博客访问速度已经非常快了（-：

1 Comment

yihui 2023-04-06 14:09:56

我现在还没有时间去进一步提速，但我已经有几项提速的待办事项：

将 highlight.js 替换为 Prism.js，后者体积仅仅是前者的十分之一不到；
将 MathJax 替换为 KaTeX，因为我很少写数学公式，要写也会是很简单的公式，KaTeX 足以应付；无论是体积还是渲染速度，KaTeX 都优于 MathJax。

对普通站主，还有个提速的简单办法就是给外部 JS 脚本加上 defer 或 async 属性（如 <script src="..." defer>），这样可以延迟或异步加载脚本，不会影响页面本身的加载速度。谭兄当时也可以用这个办法的。

chuxinyuan 2023-04-06 14:18:41

谢谢，学到了！

yihui 2023-04-13 13:28:06

已完成 KaTeX 和 Prism.js 的切换： 2e59e34 405e5b1

chuxinyuan 2023-04-13 17:47:21

赞！学习中，周末照猫画虎把我的博客也减减肥。

chuxinyuan 2023-09-23 13:32:16

prism-autoloader.min.js下载下来放在\static\js\ 路径下，然后<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js" defer></script>换成<script src="/js/prism-autoloader.min.js" defer></script>之后，无法高亮，换回来后正常，不知道啥原因？

yihui 2023-09-23 15:53:39

这个脚本实现的是动态分析页面中需要高亮的代码的语言，然后按照脚本自身的路径去加载相应语言的高亮模块，你不能只下载这一个单独的脚本，需要把你页面上要用的语言模块全部下载到同样的目录下：https://www.jsdelivr.com/package/npm/prismjs?tab=files&path=components 个人建议你不必折腾了，这个脚本是异步（延迟）加载的，而且浏览器还有缓存；除非是考虑墙的原因，否则没太大必要考虑页面加载速度问题（若有墙，那么也可以考虑用别家的 CDN：https://prismjs.com/#basic-usage-cdn）。

chuxinyuan 2023-09-23 16:26:43

暂时没有墙，我估计是被墙多了产生阴影了:smiley:。非常感谢耐心解答，这两天抄了你很多代码，代码块折叠/展开、代码块复制按钮、Pangu.js、KaTeX 和 Prism.js，当然了整个主题也是抄你的 hugo-ivy，评论系统是你推荐的 gicus，受益匪浅:handshake:。

顺祝一切顺利，心情愉快！

yihui 2023-09-23 16:44:29

谢谢！反正都是开源的，男人抄吧抄吧不是罪（女人也一样）。