让Slides.com导出的HTML更快加载

reveal.js是一个著名的Web演示文稿框架,它有一个在线编辑器,slides.com。提供了图床和展示等功能,并对用户提供了250M的免费存储空间。甚至可以当做一个很好的网页展示制作工具,并且相较于各种天花乱坠的H5制作网站,对于有国内CDN或是云服务器的人来说相当提升逼格。然而,就算我们幻灯片上的图片全部使用自己的国内CDN或是云服务器,由于它内部字体的CDN使用了aws s3,国内运营商国际出口带宽的问题,常常一份幻灯片需要等待10秒以上的加载时间。那么,我们可以对它里面的HTML进行相关修改。加快加载速度,同时节省服务器的流量消耗。

首先,我们导出HTML,并用文本编辑器打开(建议关闭自动换行)。

这里我们可以看出来,Slides.js做出来的是一个非常臃肿的HTML,用到的大部分css和js全部放在html中,导致了一个HTML文档大至1M以上。也就意味着,如果你把它之后做成动态内容,比如php添加一个访问次数的展示,那么客户端每次刷新都至少要重新加载这1M左右的文件,非常浪费服务器的流量资源。

那么,我们可以把css和js分离出来。

首先,对于前面这个超大的css,选中<style>和</style>中间的部分,然后剪切出来,放入一个CSS中。

之后,把剩下的<style>和</style>部分替换成以下内容

<link rel="stylesheet" href="1.css" type="text/css">

对js同样进行相关操作,3段分别存成1.js、2.js,3.js

并在html原来

<script></script>

的位置替换成

<script src="1.js"></script>

2和3以此类推

除此之外还有两个script部分,但很短可以忽略不计。

以上便是我们的拆分结果。

 

在生产环境中,我们甚至可以选择直接禁用掉这些字体库。

打开我们刚才拆分的1.css和2.js,将

https://s3.amazonaws.com/static.slid.es/

替换为

(空文本)

即可。

发表评论

电子邮件地址不会被公开。 必填项已用*标注