关注互联网应用及运维技术的个人博客

将静态文件托管在GitHub并使用JSdeliver加速

博客加载太慢该如何优化?当然是上国内G口独享啊(误)!
我们可以对博客进行优化——将CSS、JS和图片托管于对象存储或GitHub。

博客加载太慢,这是浏览器的解析方式导致,浏览器解析html页面首先浏览器先下载html,然后在内存中把html代码转化成Dom Tree,然后浏览器根据Dom Tree上的Node分析CSS和Images,当文档下载遇到js时,js独立下载。
JS是阻塞加载,会影响页面加载的速度,如果js文件比较大,算法也比较复杂的话,影响更大。
CSS放在前端是页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树,如果CSS放在后面可能页面会出现闪跳的感觉,或者是白屏直到CSS加载完成。如果你的博客图片较多,且你的服务器网络不好,经常会出现文字都加载出来了,但是图片还要等待很久

解决方案

不要将图片存放于本地,可以选着托管于GitHub或对象存储,
将CSS和JS直接托管在对象存储或放在GitHub使用JSdeliver加速。

GitHub是通过Git进行版本控制的软件源代码托管服务,由GitHub公司的使用Ruby on Rails编写而成。用户可以免费创建公开的代码仓库,2018年6月4日晚上被微软以75亿美元股票收购。

JSDelivr 是一个免费开源的 CDN 解决方案,用于帮助开发者和站长。有国内节点,访问速度很快,可以用来加速GitHub上的资源。

使用教程

  1. 找到你的博客的静态文件夹;
    F12查看网站源码,找到.css和.js和.min.js等文件,查看它们的地址。我的是在<head>中找到的,<href=”<?php $this->options->themeUrl(‘assets/css/bootstrap.min.css’); ?>” type=”text/css”>则表明文件在 /theme/你的主题/assetc/css/bootstrap.min.css 以此类推……
  2. 将文件上传至GitHub;
  3. 将文件地址替换为JSdeliver加速的GitHub链接;例如:https://cdn.jsdelivr.net/gh/你的GitHub名/仓库名/对应文件名(以本博客主题为例,修改header.php)。

结尾

存放于对象存储方法如上。
刷新页面F12即可看到你的更改,可以感受速度的变化。

赞(0)
未经允许不得转载:飞天狒狒 » 将静态文件托管在GitHub并使用JSdeliver加速

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址