From 8d6d3a38fd15333514f0968459c389b2ab75f12b Mon Sep 17 00:00:00 2001 From: 186526 Date: Tue, 22 Dec 2020 20:31:26 +0800 Subject: [PATCH] Add fix --- .../_posts/how-to-get-a-faster-Cloudflare.md | 50 +++++--- themes/suka/_config.yml | 2 +- themes/suka/layout/_partial/header.ejs | 2 +- .../suka/layout/_partial/post/header-info.ejs | 2 +- themes/suka/source/404.html | 2 +- themes/suka/source/lib/spectre/spectre.css | 2 +- themes/suka/src/css/Font.css | 108 ++++++++++++++++++ themes/suka/src/css/dark.scss | 3 + themes/suka/src/css/main.css | 5 +- 9 files changed, 157 insertions(+), 19 deletions(-) diff --git a/source/_posts/how-to-get-a-faster-Cloudflare.md b/source/_posts/how-to-get-a-faster-Cloudflare.md index 31c5a35..62dc78d 100644 --- a/source/_posts/how-to-get-a-faster-Cloudflare.md +++ b/source/_posts/how-to-get-a-faster-Cloudflare.md @@ -8,7 +8,7 @@ tags: - Website --- -> ~~哪个男孩不想拥有一个贼快且使用 Cloudflare 的站点呢？~~ +> ~~哪个男孩不想拥有一个贼快且使用 的站点呢？~~ @@ -23,13 +23,13 @@ tags: > > 来自[维基百科](https://zh.wikipedia.org/wiki/HTTP/2) -`HTTP2` 相较于 `HTTP 1.1` 有许多特性 例如 `Server Push` `header压缩` `多路复用` +`HTTP2` 相较于 `HTTP 1.1` 有许多特性，例如 `Server Push` `header压缩` `多路复用` 。 -他们分别解决了 `HTTP 1.1` 的不同问题 尽可能提高了 `HTTP` 的性能 +他们分别解决了 `HTTP 1.1` 的不同问题，尽可能提高了 `HTTP` 的性能。 #### `Server Push` -服务器将会把页面中内连资源推送至客户端 跟随 `HTML文件` 发送至客户端 避免了解析 `DOM` 再请求的延时 +服务器将会把页面中内连资源推送至客户端，跟随 `HTML文件` 发送至客户端，避免了解析 `DOM` 再请求的延时。 需要注意的是，启用 `Server Push` 以后一定会存在流量浪费，因为服务端在接收到请求后一定会将额外的资源一并响应给客户端。如果客户端本地已有 `HTTP` 缓存，可以在接收到 `Push` 的帧后发送 `RST_STREAM` 帧阻止服务端发送后续的帧，但是头部的几个帧已经发送了，这是无可避免的。 @@ -41,12 +41,12 @@ tags: ##### 如何启用 `Server Push` -1. 需要在 `Cloudflare` 面板启用 `HTTP2` +1. 需要在 面板启用 `HTTP2` 2. 在需要 `Server Push` 的 `HTML` 文件发送时新增 `header` : `Link` 3. `Link` 需为 `HTML 5` 标准中 `` 的内容 例如 `Link:; rel=preload; as=style` -本站在使用 Cloudflare 作为 CDN 的情况下已启用 Server Push +本站在使用 Cloudflare 作为 CDN 的情况下已启用 Server Push。 #### `Header压缩` & `多路复用` @@ -61,28 +61,50 @@ tags: ##### 如何启用 -1. 在 `Cloudflare` 面板启用 `HTTP2` +1. 在 面板启用 `HTTP2` 2. Enjoy it ### 使用 `Cloudflare Partner` 来启用自选解析 -使用 `Cloudflare Partner` 的自选解析可以有效的降低 `DNS` 请求用时,也可以对 `Cloudflare` 的 `Anycast` 网络进行部分自定义 +使用 `Cloudflare Partner` 的自选解析可以有效的降低 `DNS` 请求用时,也可以对 的 `Anycast` 网络进行部分自定义 文章引路-> [关于 Cloudflare 自选节点的一些个人见解 | Puresys](https://www.puresys.net/3116.html) ## 降低回源用时 -但是，`Cloudflare` 中国大陆方向的网络质量是我们无法控制的，因此如果要缩短网站响应耗时、减少 `TTFB（首字节时间）` ，就只能在 `Cloudflare` 回源上做优化。 +但是， 中国大陆方向的网络质量是我们无法控制的，因此如果要缩短网站响应耗时、减少 `TTFB（首字节时间）` ，就只能在 回源上做优化。 ### 使用缓存规则 -### 启用 `brotli` 压缩 +`Clouflare` 为用户提供了完善的缓存配置功能，你可以通过 `Page Rules` 来详细的调整缓存规则 + +你可以在这里查询到有关 [`Caching`](https://support.cloudflare.com/hc/en-us/categories/200275248-Caching) 的内容 + +### 启用 [`brotli`](https://github.com/google/brotli) 压缩 + +> Brotli is a generic-purpose lossless compression algorithm that compresses data using a combination of a modern variant of the LZ77 algorithm, Huffman coding and 2nd order context modeling, with a compression ratio comparable to the best currently available general-purpose compression methods. It is similar in speed with deflate but offers more dense compression. +> +> -- 来自 [`google/brotil/README.md`](https://github.com/google/brotil) + +`brotil` 是一个现代的压缩算法，已经被广泛用于网络的加速。相较于常用的 `gzip` 压缩算法 `brotil` 可以提高约10%-25%的压缩比。 + +你可以在 「 速度 - `Brotil` 」处应用 `Brotil` 加速。 ### 将静态站点部署至 `Cloudflare Pages` or `Cloudflare Workers Sites` +PS: 鉴于 `Cloudflare Pages` 目前处于 `Beta Access` 阶段 请阅读 [Cloudflare Pages Docs](https://developers.cloudflare.com/pages) 详情 + +> `Cloudflare Worker` 提供了一个 `Serverless` 执行环境，使您无需配置或维护基础架构即可创建全新的应用程序或扩充现有的应用程序。 +> +> --翻译自 [`Cloudflare Workers documentation/Welcome - Cloudflare Docs`](https://developers.cloudflare.com/workers/) + +`Cloudflare Workers Sites` 是 `Cloudflare Workers` 的一个功能。将静态文件发布至 `KV Storage` [^KV_Storage] , `Workers` 从 `KV` 中取回数据并发送给客户端，来达到静态站点部署的效果。 + +你可以在 [Cloudflare Docs](https://developers.cloudflare.com/workers/platform/sites/start-from-existing) 获得详细的部署教程。 + ## 前端性能优化 -### 降低请求大小 数量 +### 降低请求 #### 使用 `NoModule/Module` 构建 @@ -100,11 +122,13 @@ tags: #### 使用 `vanilla-lazyload` -### ~~PWA~~ +## 优化网络质量 -## ~~备案 上带国内CDN的企业版~~ +### ~~备案 上带国内CDN的企业版~~ ## 借物表 [天下武功，唯快不破 —— 我是这样优化博客的 | Sukka's Blog](https://blog.skk.moe/post/how-to-make-a-fast-blog/) [关于 Cloudflare 自选节点的一些个人见解 | Puresys](https://www.puresys.net/3116.html) + +[^KV_Storage]:Cloudflare Workers KV是全球性的，低延迟的键值数据存储。 diff --git a/themes/suka/_config.yml b/themes/suka/_config.yml index 7e5be00..8109045 100644 --- a/themes/suka/_config.yml +++ b/themes/suka/_config.yml @@ -80,7 +80,7 @@ uiux: bg_color: img: - avatar: 'https://i.186526.xyz/avatar' + avatar: 'https://186526.xyz/pic/avatar-round.webp' # --------------------------------------------------------------- # Menu Settings diff --git a/themes/suka/layout/_partial/header.ejs b/themes/suka/layout/_partial/header.ejs index 34f3993..78c9168 100644 --- a/themes/suka/layout/_partial/header.ejs +++ b/themes/suka/layout/_partial/header.ejs @@ -1,6 +1,6 @@
-

Avatar
<%= config.title %>

+

Avatar
<%= config.title %>

<% if (theme.uiux.slogan) { %> diff --git a/themes/suka/layout/_partial/post/header-info.ejs b/themes/suka/layout/_partial/post/header-info.ejs index c7ac177..11a71f2 100644 --- a/themes/suka/layout/_partial/post/header-info.ejs +++ b/themes/suka/layout/_partial/post/header-info.ejs @@ -1,5 +1,5 @@ <% if (page.title) { %> -

<%- page.title %>

+

<%- page.title %>

<% } %> <% diff --git a/themes/suka/source/404.html b/themes/suka/source/404.html index 3479c7b..b94171a 100644 --- a/themes/suka/source/404.html +++ b/themes/suka/source/404.html @@ -5,7 +5,7 @@ 404 - +