wiki中怎么添加JAVSSCRIPT？

使用requestAnimationFrame实现js动画性能好。

示例一：

requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：

1、requestAnimationFrame 会把每一帧中的所有DOM *** 作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

像setTimeout、setInterval一样，requestAnimationFrame是一个全局函数。调用requestAnimationFrame后，它会要求浏览器根据自己的频率进行一次重绘，它接收一个回调函数作为参数，在即将开始的浏览器重绘时，会调用这个函数，并会给这个函数传入调用回调函数时的时间作为参数。由于requestAnimationFrame的功效只是一次性的，所以若想达到动画效果，则必须连续不断的调用requestAnimationFrame，就像我们使用setTimeout来实现动画所做的那样。requestAnimationFrame函数会返回一个资源标识符，可以把它作为参数传入cancelAnimationFrame函数来取消requestAnimationFrame的回调。怎么样，是不是也跟setTimeout的clearTimeout很相似啊。

所以，可以这么说，requestAnimationFrame就是一个性能优化版、专为动画量身打造的setTimeout，不同的是requestAnimationFrame不是自己指定回调函数运行的时间，而是跟着浏览器内建的刷新频率来执行回调，这当然就能达到浏览器所能实现动画的最佳效果了。

目前，各个支持requestAnimationFrame的浏览器有些还是自己的私有实现，所以必须加前缀，对于不支持requestAnimationFrame的浏览器，我们只能使用setTimeout，因为两者的使用方式几近相同，所以这两者的兼容并不难。对于支持requestAnimationFrame的浏览器，我们使用requestAnimationFrame，而不支持的我们优雅降级使用传统的setTimeout。把它们封装一下，就能得到一个统一兼容各大浏览器的API了。

代码可以到这里来查看：https://gist.github.com/chaping/88813f56e75b0fd43f8c

安装 docsify-cli 工具：

初始化项目：

预览网站：

可以选择部署到以下服务：

我在本地使用官方的构建工具进行初始化项目：

初始化之后其实有三个文件， index.html 、 README.md 、 .nojekyll 。

在本地编辑好文档，通过下面命令即可本地预览：

添加了文档之后，我将整个 wiki 文件夹上到了「 Gitee 」，为什么选 Gitee 呢，当然是国内访问快而且免费了。

登陆我的服务器，生成 SSH 公钥 ，生成方式可以参考「 生成/添加SSH公钥 」，然后添加到 Gitee 的 「 SSH 公钥 」。

然后在服务器使用 git 拉取 Wiki 项目，当然要使用 SSH 地址，以后本地文档更新推送到 Gitee 之后，只要在服务器上拉取更新就可以了。

拉取之后，配置 Nginx 如下，即可通过域名访问：

设置不缓存这个因人而异，我个人的 Wiki 刚开始积累，还在不断的完善，如果允许缓存，可能导致最新更新的内容不显示，等以后趋于完善，应该会设置允许缓存，或者直接放到 CDN 上。

由于 docsify 搭建的 Wiki 都是源文件，不需要自己编译，所以完全可以把整个文档放到又拍云或者七牛云等 CDN 上，访问速度会更快。

但目前我还是把 Wiki 部署到了我的服务器上，为什么不直接放到 CDN 上呢，有以下几个原因：

如果使用默认的 routerMode，放在 CDN 上完全可行。

各项配置都在 window.$docsify 里。

我添加了如下配置，更多配置请参考上方文档链接。

增加 _sidebar.md 文件，编写文件格式如下：

配合 loadSidebar，效果如下：

点击后跳转到 Wiki 首页。

设置为 history 之后，浏览器链接里不会出现 #，个人习惯。

注意，设置为 history，如果使用的是 Nginx 部署的项目，一定要加上下面的配置，否则在非首页刷新会找不到页面。

我没有启用封面，因为我的 Wiki 不涉及到宣传，就是自己查阅，所以应该打开就可以看到内容。

不过 docsify 的封面还是很好看的。

设置之后，点击侧栏的二级标题之后，页面的标题不会距离顶部太近。

docsify 有丰富的插件，可以按需添加。

开启全局搜索需要引入两个 js 文件：

效果如下：

需要引入 js 文件：

效果如下：

需要引入两个 js 文件：

效果如下：

插件需要引入 js 文件，为了访问更稳定，我把所有的 js 文件都上传到了又拍云。

截止到发文，docsify 的最新版本是 4.11.3 ，查询更多版本请查看「 docsify releases 」。

以上就是 docsify 部署及配置的全部内容了，更多详细说明，可以查看「 docsify 文档 」。

最后附上我的 Wiki 地址： 掘墓人的 Wiki ，欢迎查阅。

Wiki系列（一）：Wiki系统选择

欢迎访问的个人博客： 掘墓人的小铲子

---