加快DOM加载的时间
2017年4月1日，本博客升级至0.11.7版本的最新Ghost Blog。升级做了很多微小的工作，但是花的时间还是比较多。
- 升级node环境：v6.10.1
- 合并新旧两个版本：
- fonts：Google的相关资源能在国内访问了，所以何不试试？
- 七牛cdn：直接按照Ghost Qiniu Storage将七牛存储模块下载到
content/storage目录下，然后修改配置文件config.js添加storage字段既能使用。 - highlight：更新版本。由于最近写yaml写得比较多，添加专门得hilight文件
languages/yaml.min.js。 - Casper主题：因为原来的Phantom难以维护最新的功能，博客的主题替换回官方的Casper主题。
- fonts：Google的相关资源能在国内访问了，所以何不试试？
- 添加Disqus：留言栏也替换成Disqus，因为多说就要下架了。
最后在PageSpeed Insights测试了一下加载速度。DOMContentLoaded的加载时间超过4秒（在很正常的校园网环境）。在下面几个不达标的项做了修改：
优化图片：对avatar.jpg和favicon.png进行了大小的修改和压缩。
清除首屏内容中阻止呈现的 JavaScript 和 CSS：对casper主题的js、css文件进行了压缩。并且对于
<head>元素里的css文件设置了异步加载。采用的方法是使用
<link>元素并设置非法的media属性（'none'）。当meida query计算失败时，浏览器会继续下载css，但网页内容能够先显示出来再渲染页面。当css下载完毕后需要将media设置为合法值（all）以应用样式规则。js的onload来监听载入完毕之后修改成media='all'代码。当浏览器不支持js时，就直接按老方法载入css文件，<noscript><link rel="stylesheet" href="{{asset "css/screen.min.css"}}"></noscript>。
<link rel="stylesheet" href="{{asset "css/screen.min.css"}}" media="none" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="{{asset "css/screen.min.css"}}"></noscript>
当然，重要的css代码还是应该通过内联（inline）的方式应用到页面上。
最后展示一下成绩：DOMContentLoaded已经减少至2秒内。
Refs: