如果我们想要让网页首次渲染的时间尽量提前,那么我们必须加快关键路径上的资源加载。而网页内嵌关键资源,异步加载非关键资源能够让网页的渲染速度达到极致。
在建博客之初,我是把css样式表和js脚本都放在本站,但是从国外的服务器请求静态资源的延迟实在太大了,因此我后来使用jsDelivr这个在国内也有服务器的CDN来加载静态资源(详情见上一篇文章,使用jsdelivr CDN加速hexo的图片等静态资源加载 )。但是为了追求极致的速度,我不能让html网页传过来后还要去请求css样式表才能开始渲染,即使是使用CDN也是有不可忽视的请求延迟的,因此我现在将渲染需要的关键css样式表内联在html网页中,而异步加载非关键的资源。
更新:很遗憾,jsDelivr目前(2021-12-22)失去了中国大陆地区的区域CDN,将使用就近的CDN代替。
独立博客的一个十分重要的问题就是图片等静态资源的加载速度,这对于访问博客的体验而言十分的重要,尤其在中国,如果使用国外的服务器而域名也没有备案的话,图片的加载速度能够让人怀疑人生。
而jsDelivr是一个著名的开源CDN项目,它闻名于免费的javascript CDN,全球部署尤其是在中国也有备案的站点。但是少有人了解它提供的其他免费服务,其中包括一项是对Github仓库的CDN加速,而这便可用来作为我们博客的图片CDN。
这件事的起因是我想要给自己的博客加个rss,博客的基本操作嘛,结果这个rss让我发现了原来的主题的一些问题。
2020-07-17 更新: 现在推荐所有使用Hexo的人都采用hexo-filter-mathjax插件,支持unicode字符,后端渲染,前端不用外挂CSS样式表和Javascript脚本。如果想找解决方案可以直接阅读"Maxjax 后端渲染"小节。
许许多多的Hexo博客都是Next主题的,而这样的大主题大多封装了Mathjax或Katex等前端渲染工具,配置比较简单。我这个小主题就只能在网上找解决方案了。
现在来总结,其实无非就是两个大方向,前端渲染和后端渲染。其中前端渲染是主流,而绝大部分前端渲染都是用的Mathjax或Katex。
前端渲染的流程是,在生成时Hexo渲染器(如hexo-renderer-pandoc
)首先一轮渲染把Markdown中的Latex代码转换为Mathjax或Katex支持的代码,然后在前端加载html时前端的Javascript脚本就会渲染Latex公式为矢量图形。
可我最后用的是后端渲染,虽然说后端渲染有种种好处,但是我用它的最开始的原因却是我不能把前端渲染的方案做完善,也就是说,我前端方面是个菜狗。