個(gè)人采用hexo搭建了博客,博客也剛上線不久,博客地址:https://www.xiezhrspace.cn 。 歡迎小伙伴訪問(wèn),瘋狂暗示來(lái)關(guān)注來(lái)訪問(wèn)(‐^▽?zhuān)蕞\)。
雖然放到了云服務(wù)器上,但是由于博客上傳的圖片等資源越來(lái)越多,請(qǐng)求的資源也越來(lái)越多,博客訪問(wèn)速度越來(lái)越慢,簡(jiǎn)直不忍直視。
(資料圖片僅供參考)
愁了好久,一直在想辦法優(yōu)化,自己在網(wǎng)上也找資料,在和博客交流群的小伙伴交流后便有了解決方案,【使用cdn加速】。
但是呢問(wèn)題又來(lái)了,很多云服務(wù)提供商的cdn加速都是要根據(jù)流量花錢(qián)的。雖然網(wǎng)站訪問(wèn)量不多,但是呢能白嫖當(dāng)然是最好的了。
在小伙伴推薦后有了兩種白嫖方案 1、jsDelivr+Github 2、又拍云(需要申請(qǐng)賬號(hào)加入又拍云聯(lián)盟,個(gè)人的申請(qǐng)還未下來(lái))。都說(shuō)又拍云加速會(huì)更好一些,但是自己的申請(qǐng)還沒(méi)辦好,而博客訪問(wèn)優(yōu)化又迫在眉睫,固先采用了第一個(gè)方案:jsDelivr+Github 的方案。
下面就以jsDelivr+Github 實(shí)現(xiàn)免費(fèi)cdn加速為例,記錄自己優(yōu)化過(guò)程。
1 cdn簡(jiǎn)介cdn 全稱(chēng)Content Delivery Network即內(nèi)容分發(fā)網(wǎng)絡(luò)。
CDN是一組分布在多個(gè)不同地方的WEB服務(wù)器,可以更加有效的向用戶(hù)提供資源,會(huì)根據(jù)距離的遠(yuǎn)近來(lái)選擇 。使用戶(hù)能就近的獲取請(qǐng)求數(shù)據(jù),解決網(wǎng)絡(luò)擁堵,提高訪問(wèn)速度,解決由于網(wǎng)絡(luò)帶寬小,用戶(hù)訪問(wèn)量大,網(wǎng)點(diǎn)分布不均等原因?qū)е碌脑L問(wèn)速度慢的問(wèn)題。
2 cdn請(qǐng)求分發(fā)原理(1)用戶(hù)向?yàn)g覽器提供需要訪問(wèn)的域名;
(2)瀏覽器調(diào)用域名解析庫(kù)對(duì)域名進(jìn)行解析,由于CDN對(duì)域名解析過(guò)程進(jìn)行了調(diào)整,所以解析函數(shù)庫(kù)一般得到的是該域名對(duì)應(yīng)的CNAME記錄,為了得到實(shí)際的IP地址,瀏覽器需要再次對(duì)獲得的CNAME域名進(jìn)行解析以得到實(shí)際的IP地址;在此過(guò)程中,使用的全局負(fù)載均衡DNS解析。如根據(jù)地理位置信息解析對(duì)應(yīng)的IP地址,使得用戶(hù)能就近訪問(wèn);
(3)此次解析得到CDN緩存服務(wù)器的IP地址,瀏覽器在得到實(shí)際的ip地址之后,向緩存服務(wù)器發(fā)出訪問(wèn)請(qǐng)求;
(4)緩存服務(wù)器根據(jù)瀏覽器提供的要訪問(wèn)的域名,通過(guò)Cache內(nèi)部專(zhuān)用DNS解析得到此域名的實(shí)際IP地址,再由緩存服務(wù)器向此實(shí)際IP地址提交訪問(wèn)請(qǐng)求;
(5)緩存服務(wù)器從實(shí)際IP地址得到內(nèi)容以后,一方面在本地進(jìn)行保存,以備以后使用,二方面把獲取的數(shù)據(jù)放回給客戶(hù)端,完成數(shù)據(jù)服務(wù)過(guò)程;
(6)客戶(hù)端得到由緩存服務(wù)器返回的數(shù)據(jù)以后顯示出來(lái)并完成整個(gè)瀏覽的數(shù)據(jù)請(qǐng)求過(guò)程。
3 jsDelivr簡(jiǎn)介是一個(gè)免費(fèi)、快速和可信賴(lài)的CDN加速服務(wù),聲稱(chēng)它每個(gè)月可以支撐680億次的請(qǐng)求。服務(wù)在Github上是開(kāi)源的,jsDelivr地址 。目前,它提供了針對(duì)npm、Github和WordPress的加速服務(wù),只需要一行代碼就可以獲得加速效果。只要我們的項(xiàng)目中用到了第三方的靜態(tài)資源,譬如JavaScript腳本,css樣式表,圖片,圖標(biāo),F(xiàn)lash等靜態(tài)資源文件都應(yīng)該考慮接入到CDN中
4.jsDelivr 的簡(jiǎn)單使用我們以加載jQuery和Bootstrap 為例
// load jQuery v3.2.1https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js// load bootstrap v4.4.1https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.jsjsDelivr + Github便是免費(fèi)且好用的CDN,非常適合博客網(wǎng)站使用
5 jsDelivr + Github 的具體實(shí)現(xiàn)5.1 新建Github倉(cāng)庫(kù)5.2 使用git clone 命令將倉(cāng)庫(kù)克隆到本地在要放倉(cāng)庫(kù)的本地目錄右鍵 Git Bash Here(如果沒(méi)有安裝git的需要提前安裝下,都是默認(rèn)安裝即可),并輸入以下命令
git clone https://github.com/xiezhr/mycdn.git$ git clone https://github.com/xiezhr/mycdn.gitCloning into "mycdn"...remote: Enumerating objects: 3, done.remote: Counting objects: 100% (3/3), done.remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0Receiving objects: 100% (3/3), done.5.3 將需要cdn加速的資源上傳到github倉(cāng)庫(kù)需要用到的命令如下
git add . //添加所有文件到暫存區(qū)git status //查看狀態(tài)git commit -m "第一次提交" //把文件提交到倉(cāng)庫(kù) -m 后面的是備注信息git push //推送至遠(yuǎn)程倉(cāng)庫(kù)個(gè)人采用的是hexo博客框架,該框架的靜態(tài)資源(css、js、圖片等)都是放在source目錄下面,所以呢我是將source目錄真?zhèn)€上傳上去,這樣的好處是路徑跟原來(lái)的保持一致,后面在調(diào)用的時(shí)候比較方便。
git 窗口輸入如上命令之后,文件都上傳到了github倉(cāng)庫(kù)
5.4 點(diǎn)擊release 發(fā)布版本自定義發(fā)布版
5.5 通過(guò)jsDelivr引用資源通過(guò)如下地址應(yīng)用資源
https://cdn.jsdelivr.net/gh/你的用戶(hù)名/你的倉(cāng)庫(kù)名@發(fā)布的版本號(hào)/文件路徑舉個(gè)栗子,獲取source/bgimg路徑下的back-rain.png
https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/bgimg/back-rain.png ## 獲取最新資源https://cdn.jsdelivr.net/gh/xiezhr/mycdn@1.0/source/bgimg/back-rain.png ## 獲取1.0版本的資源注意:版本號(hào)不是必需的,是為了區(qū)分新舊資源,如果不使用版本號(hào),將會(huì)直接引用最新資源,除此之外還可以使用某個(gè)范圍內(nèi)的版本,查看所有資源等,具體使用方法如下:
// 加載任何Github發(fā)布、提交或分支https://cdn.jsdelivr.net/gh/user/repo@version/file// 加載 jQuery v3.2.1https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js// 使用版本范圍而不是特定版本https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js // 完全省略該版本以獲取最新版本https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js // 將“.min”添加到任何JS/CSS文件中以獲取縮小版本,如果不存在,將為會(huì)自動(dòng)生成https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js // 在末尾添加 / 以獲取資源目錄列表https://cdn.jsdelivr.net/gh/jquery/jquery/6 將hexo中用到靜態(tài)資源的地方換成cdn加速# 使用到的前端庫(kù),可按需替換成對(duì)應(yīng)的CDN地址,如果下面未指定具體的版本號(hào),使用最新的版本即可.# 注:jsdelivr可以自動(dòng)幫你生成.min版的js和css,所以你在設(shè)置js及css路徑中可以直接寫(xiě).min.xxxlibs: css: matery: https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/css/matery.css mycss: https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/css/my.css fontAwesome: https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/libs/awesome/css/all.css # V5.11.1 materialize: https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/libs/materialize/materialize.min.css # 1.0.0 aos: https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/libs/aos/aos.css都換好之后,執(zhí)行如下命令
hexo cl & hexo g & hexo s瀏覽器地址欄輸入 http://localhost:4000 訪問(wèn)博客,你會(huì)發(fā)下博客訪問(wèn)速度快了很多。到此大功告成?。?!