推迟页面不必要内容的加载

前言

前两天在 YFun’s Note 上使用了 HexoPlusPlus，给自己的 Hexo 博客加了个后台。

经常测试网站速度的 YFun 发现 HPP 的签到拖慢了页面的速度，就决定改改代码。

开始

HPP 签到的原理是：博客调用 后台返回的 JS，向页面元素内更新值。

我们只需要等待页面加载完毕，再调用这个 JS 文件，就可以让 JS 不阻塞页面的渲染。

代码

document.onreadystatechange = function(){
    if(document.readyState == "complete"){
        var ele = document.createElement("script");
        // 记得要更改 `src` 属性的值
        ele.src = "https://{yourdomain}/hpp/api/getblogeractive";
        document.body.appendChild(ele);
     }
}

我们来看看上面的代码。

首先，使用 document.onreadystatechange 监听页面加载的变化。

如果返回 complete，就创建一个 src 为 https://{yourdomain}/hpp/api/getblogeractive 的 <script> 标签，否则就不创建。

后

将不重要的 JS 文件推迟，可以有效的加快页面的加载速度。

你还可以在要注入内容的标签中加入「Loading」的提示，避免空白。

<span id="bloggeractivetime">[ Loading ]</span>