❌

普通视图

发现新文章，点击刷新页面。
昨天以前首页

如何轻松创建并托管你的 GitHub Pages 站点 (无服务器静态应用)

✇小赖子的英国生活和资讯
作者 JustYY.com 小赖子的英国生活和资讯
2025年1月24日 05:10

创建一个 GitHub Pages 站点是一个简单的过程，可以免费为你的个人、项目或组织创建网站/博客。按照此指南开始。

步骤 1：创建 GitHub 仓库

  • 登录你的 GitHub 账户。
  • 点击“新建”来创建仓库。
  • 对于个人站点，命名为 .github.io。
  • 对于项目站点，使用任何有效的名称。

步骤 2：添加你的站点文件

使用以下命令克隆仓库到本地机器：

git clone https://github.com/<username>/<repository-name>.git

创建一个 index.html 文件，包含你想要的内容。这里是一个例子：

<!DOCTYPE html>  
<title>我的 GitHub 页面</title>
<h1>欢迎访问我的站点</h1>
<p>这是我的第一个 GitHub Pages 站点。</p>

或者，你可以使用 README.md（Markdown）作为首页。

## 我的 Github 页面
### 欢迎访问我的站点
THis is my first Github Pages site.

将你的更改提交并推送到 GitHub：

git add .
git commit -m "Initial commit"
git push origin main
how-to-setup-github-pages-static-apps 如何轻松创建并托管你的 GitHub Pages 站点 (无服务器静态应用) Github 学习笔记 小技巧 程序设计 网站信息与统计 计算机 计算机

Github 上启用 Github Pages 的步骤

步骤 3：启用 GitHub Pages

  • 转到你的仓库设置。
  • 在侧边栏点击“Pages”。
  • 在“源”下选择分支（例如，main）和文件夹（如果适用）。
  • 点击“保存”。

步骤 4：查看你的站点

  • 对于个人站点：访问 https://<username>.github.io/。
  • 对于项目站点：访问 https://<username>.github.io/<repository-name>/。

步骤 5：自定义你的站点

要添加主题，请转到 Pages 设置并选择“选择一个主题”。

你还可以上传额外的 HTML、CSS 和 JavaScript 文件以进行进一步的自定义。

为什么 GitHub Pages 是“无服务器静态应用” / Serverless Apps

GitHub Pages 作为无服务器静态应用运行，因为它们直接向用户提供预构建的静态 HTML、CSS 和 JavaScript 文件，而不依赖后端服务器或运行时动态内容生成。相反，这些文件托管在 GitHub 的全球内容分发网络（CDN）上，确保快速有效的交付。

优点：

  • GitHub 提供的免费托管。
  • 不需要服务器维护。
  • 由于 CDN 分布，加载速度快。
  • 简化了静态站点的部署和扩展。

缺点：

  • 仅限于静态内容；不支持像数据库这样的服务器端功能。
  • 高级工作流的自定义需要技术知识。
  • 依赖于 GitHub 的基础设施。

GitHub Pages 的总结

GitHub Pages 是一个令人赞叹的免费托管网站的工具。只需几步，你就可以为你的项目、作品集或个人使用创建一个站点。通过利用无服务器模型，你可以构建轻量、高效且维护最小的站点。

英文：How to Setup and Create GitHub Pages (Serverless Static Apps)

本文一共 587 个汉字, 你数一下对不对.
如何轻松创建并托管你的 GitHub Pages 站点 (无服务器静态应用). (AMP 移动加速版本)

扫描二维码，分享本文到微信朋友圈
75a5a60b9cac61e5c8c71a96e17f2d9c 如何轻松创建并托管你的 GitHub Pages 站点 (无服务器静态应用) Github 学习笔记 小技巧 程序设计 网站信息与统计 计算机 计算机
The post 如何轻松创建并托管你的 GitHub Pages 站点 (无服务器静态应用) first appeared on 小赖子的英国生活和资讯.

相关文章：

  1. 英国房子的EPC节能报告(Energe/Efficiency Performance Certificate) EPC (Energe/Efficiency Performance Certificate) 是英国房子的节能报告, 法律上规定, 每个房子都必须要有一个EPC报告, 报告的有效期为十年. 房东在把房子出租或者想卖房的时候, 这个EPC就必须有效, 在一些情况下 比如出租房子的时候, 这个EPC报告还必须符合一些最低标准, 比如房子必须满足 F档(类似及格线)...
  2. 按揭贷款(房贷,车贷) 每月还贷计算器 去年给银行借了17万英镑 买了20万7500英镑的房子, 25年还清. 前2年是定率 Fix Rate 的合同 (年利率2.49%). 每个月大概是还 700多英镑. 有很多种还贷的计算方式, 定率/每月固定 是比较常用的. 简单来说就是 每个月交的钱是...
  3. 最好的发财策略就是忘记它 在群里我和 @nationalpark 说到我用STEEM换了3000多个 YOYOW的时候我还有点沾沾自喜, 谁知道他一针见血: 听说你是steem换的我顿时心理平衡了 才突然想起来, 我半个月前是拿 500 个 STEEM 换了 将近3300个YOYOW. 今天 STEEM的价格8美元,...
  4. 智能手机 HTC One M9 使用测评 虽然我对手机要求不高, 远远没有像追求VPS服务器一样, 但是怎么算来两年内换了四个手机, 先是三星 S4 用了一年多, 然后 Nokia Lumia 635 Windows Phone, 后来又是 BLU, 半年多前换了...
  5. 英国TESCO超市有偿回收瓶子 前不久, 英国剑桥 Bar Hill 的的 TESCO乐购超市推出了一个回收瓶子的机器, 这机器就在超市入入口出. 只需要把瓶子放进去, 机器自动识别, 然后每个瓶子10P也就是相当于1块人民币. 完成后会给个小票, 买东西可以拿来当折扣用. 如果嫌麻烦, 在回收完成还可以选择捐给慈善机构. 机器非常人性化,...
  6. 面试刷题更像是一种服从性测试 在许多求职者看来，面试中的刷题环节似乎是对技术能力的直接考察。然而，从另一个角度来看，这一过程或许更像是一场服从性测试。 想象一下，当一个公司要求候选人解决复杂的算法问题或设计一个系统架构时，真正的目的并不仅仅是判断候选人是否能完成这项任务。许多时候，公司更关心的是你是否愿意花时间和精力去迎合他们的流程和标准。 为什么这样说呢？从实际工作中来看，绝大多数岗位并不需要员工每天都在解决高难度的算法问题或从零设计分布式系统。相反，工作中的任务更偏向于理解业务逻辑、维护现有系统以及团队协作。那么，为什么刷题依然是很多公司青睐的筛选方式？ 答案或许在于，刷题能有效筛选出那些愿意投入大量时间准备，并在面试中展现高度配合精神的候选人。这种配合精神，是公司希望在未来的工作中看到的品质。一旦你通过了这些测试，公司就会认为你是一个值得信赖的员工，一个能遵从流程、适应规则并在需要时投入额外努力的人。 还有就是以前说的：面试刷力扣是大公司过滤的成本较低的方法之一：为啥有名的IT公司的程序员面试都这么难?，可以过滤掉大部分 False Positive，当然也有可能过滤掉人才（胜任工作的求职者）。不过对于大厂来说，招进来一个False Positive的损害要远远比错过一个False Negative大。 此外，随着AI技术的飞速发展，刷题的技术价值正在逐渐降低。像ChatGPT这样的AI工具，已经可以轻松解决LeetCode或Codeforces上的许多高难度问题，并给出清晰的解题过程。这表明，算法题不再是人类独有的技术优势，而是可以被高效地自动化处理的任务。这种变化进一步凸显了刷题在实际工作中的局限性，因为日常工作更多依赖于沟通、业务理解和对系统的长期维护，而不是短时间内解决某个抽象问题。 OpenAI推出o3大语言AI模型。 Codeforces 评分：2727——相当于全球人类程序员编码竞赛中，排名第 175 位。...
  7. 英国 NatWest 银行推出 Reward Current Account 用来交水电费等帐单可以省钱 英国 NatWest 银行推出 Reward Current Account 银行帐号, 每个月需要交会费 3 英镑, 一年则需要36英镑 并不便宜, 但是好处是 只要通过该帐号以 Direct...
  8. 离开 NPower – 在英国选择便宜的电气公司 extraenergy 在彻底离开 谢菲尔得的那一天 和房东一起读了 电表, 公寓里只用电 没有媒气 所以做饭也用电 特别贵. 虽然在 13年底装了 两个电表. 白天一个 晚上 12点到早上7点另一个表, 所以两个计费....

热力图

✇KAIX.IN
作者 dimlau
2024年11月6日 14:43

文章更新热力图

类似的热力图，我最早是在 GitHub 看到的，用来展示开发者的更新频率。现在看到不少博客也做了这种小组件：就是从当前日期向前追溯一年，每一天显示成一个灰色的小方块，如果当天有文章发布，就显示成浅绿色，如果当天发布的文章不止一篇，就显示成深绿色。我想了一下，用 Hugo 的模版系统，加上一点 CSS 做布局和显示优化，应该就能实现，动手试了一下，果然效果还算可以。目前可以在首页看到实际演示。

fin.

新标签页助你重新掌控你的收藏夹

✇折影轻梦
作者 折影轻梦
2024年3月5日 08:00

在数字时代，我们的浏览器收藏夹，就如同一个宝库，里面藏着我们曾经因兴趣、工作或学习而保留的无数网站链接。小舒同学，一个浏览器新标签页扩展，帮助您高效地管理这些珍贵的在线资源。通过整洁、直观的界面和强大的功能，通过小舒同学这款强大的浏览器扩展，让您的收藏夹焕发新生。

一键展示管理收藏夹

不需要反复整理和搜索您的主页，小舒同学提供了一种轻松的方法来展示和管理您的收藏夹。通过在新标签页中，将书签以清晰的图形方式呈现，帮助您聚焦真正重要的事情。无论是微软的 Edge、Google 的 Chrome，还是 Mozilla 的 Firefox，都可以实现一步直观整洁地展示管理您的网络财富。

一键展示管理收藏夹

随时随地的同步空间

小舒同学的同步空间可以让您轻松同步收藏夹，通过同步空间功能，不管您是在工作场合的电脑还是在家里的设备，都可以轻松连接，访问您全部的收藏内容。您的内容将被安全地存储与同步，确保您可以在任何时间访问。网络世界的一切都将由您连接统一，不仅能启动哔哩哔哩，更能直接访问您关注的具体内容。

同步空间

网页端

直观且舒适的重组织

小舒同学以流畅和直观的用户体验，帮您重新组织您的在线生活。我们专注于舒适的交互设计，将您的收藏夹以一种对您有意义的方式进行组织。

小舒同学提供各式各样的卡片形式和布局，让您可以完全按照自己的喜好进行自定义。您可以创建个性化的卡片组合，以满足您的独特需求。

重组织

严格隐私保护

小舒同学重视用户的隐私保护，拒绝记录和上传用户数据。在不使用同步空间的情况下，您的收藏夹数据也只在浏览器本地数据中，确保隐私数据的私密性。依托于 Manifest V3，小舒同学严格控制所需权限，保证只加载本地代码，保护用户的安全与私密。

定制个性化新标签页

小舒同学的自由度极高，可以按照用户的喜好进行多种个性化设置。您可以更换壁纸、主题、主题色，甚至可以用自定义 CSS 美化您的标签页。拥有如此高度自定义的新标签页，您的浏览器将成为真正属于您的个性空间。

主题 Fluid

主题 Meteor

主题 Hyper

小舒同学不仅仅是一个简单的收藏夹工具，它改变了我们与网络信息的互动方式，提供了一个更高效、更有组织性的网络生活体验。减少了无谓的折腾，让每一次收藏都变得值得，让每一次浏览都充满发现的喜悦。现在，尝试小舒同学，让您的收藏夹变成您的独特网络资产，发挥它们真正的潜力吧。

用 Blender 制作一个可循环沙漠公路绿幕

✇石樱灯笼博客
作者 石樱灯笼
2024年2月17日 16:40

偶然间看到有人发了个《奔跑的阿塔尼斯.GB》，我瞬间联想到的竟是《GO BROLY GO GO》这个梗。

那为什么不干脆自己做一个呢？

然后就遇到了一大堆大坑。其中的一个大坑就是这个奔跑用的绿幕背景该怎么搞。本文就围绕这个大坑随便嘚吧几千字。

（注1：本文非教程）

（注2：本文本该引用的图片，因为我懒而直接截图贴到 Discord 了，所以本地没有保存，我也懒得去 Discord 往回抠，直接文字描述了。对付看吧）

素材与原梗

《奔跑的阿塔尼斯.GB》

《GO BROLY GO GO》

首次尝试

在网上随便搞了一个绿幕背景，然后就做了一下。

[StarCraft] Go Go 大主教 Go Go !!!「旧版」

非常的不满意。

主要是这个绿幕背景不能循环，背景高度在开头和结尾不一致，所以每次到循环的位置时都咯噔一下子，看起来就非常的粗糙。

当然在现在这种大多数都是垃圾视频的大环境下，每天都产生大量漏洞百出的垃圾视频，平台和用户已经亢奋到巴不得直接脑子上插根安卓充电线接手机上在人脑内播放垃圾视频了，没人会在乎这种小细节，甚至都没人看我做的这种视频。

重新搜寻绿幕素材

在网上随便搜索了一下，发现几乎没有我需要的 「可循环」 的绿幕素材。

screenshot_on_b85m_by_flameshot_at_2024-02-16_22-32-40

大多数都是随便一个奇怪的片段，长度都很短，而且全部都是头尾不相同的，简单点的咯噔一下，复杂点的干脆连方向都变了，完全不知道这种限制性极强的素材在什么地方能用得到。

总之在网上找这种可循环绿幕素材这个途径行不通。

尝试自己做

算是要做个3D动画。掏出 Blender。

「路」，好解决，画个面，然后找个路的纹理贴上去就行，然后根据纹理做个首尾相接，循环就搞定了。

难点在路边，我想整个沙漠，那单纯的平面纹理就不够了。

在网上搜了一下关于 Blender 沙漠 的教程。

screenshot_on_b85m_by_flameshot_at_2024-02-16_22-32-51

screenshot_on_b85m_by_flameshot_at_2024-02-16_22-32-56

第一个，测试渲染完了，细节很好，但是主要用法是展示大沙漠里微观场景的，就和其缩略图一样。在大场景下做大背景效果很好，但是缩放小了之后发现作为沙地的效果却很差。只能说纯当练手了。

第二个，测试渲染完了，作为沙地的效果很好，但是沙地的效果是完全随机生成的，边缘不连续，接不上，没法做循环。

很明显遇到了非科班出身的人常遇到的困难。

寻求帮助

找熟人

我目前能联系的人当中，目前没有任何一个人是会使用 Blender 的。

可以说是真正意义上的 人脉匮乏，找不到 关系 。

中文社区

至于所谓的中文社区，QQ群，那都是吹逼饭的窝点。当年我3DS变砖时寻求帮助，顺着3ds.hack的路先加了中文区的QQ群，结果和想象中的一样，中文社区无非就是 吹牛逼 晒有钱 互相诋毁，一点帮助没获取到，还浪费了我不少时间。最后是把 3ds.hack 改成英文模式然后进了 Nintendo Homebrew 的 Discord 频道，我提出问题之后立刻就有人一步一步手把手帮忙解决问题，而且解决途中还发现我遇到的并不是很寻常的基础问题（不然怎么能卡住我）。

screenshot_on_b85m_by_flameshot_at_2024-02-16_23-41-58

screenshot_on_b85m_by_flameshot_at_2024-02-16_23-42-59

从提出问题到得到响应，用时1分钟。从提出问题到完全解决，用时43分钟。此时中文QQ群还一个屁都没崩出来。

本身被自己不懂的有一点难度的问题卡住就很难受了，网上却又存在着各种能力远比你低下的人在那不懂装懂，很可能导致你离解决方案反而越来越远。你看像 segmentfault.com 现在都是乌烟瘴气，都臭成什么样子了。

（光是当时3DS变砖后的解决办法，我当时没写博文出来，我都觉得奇怪）

总之，在中文区甭想找到什么求助。

英文社区

也不知道算是走运，还是巧合。

我的 Discord 频道列表里刚好有一个 TF2 相关的 Blender 社群。

screenshot_on_b85m_by_flameshot_at_2024-02-16_23-51-17

我还真就想不起来是为啥加了这个社群了，可能是因为看了 Pootis Engage ？

然而事情并没有像解决 3DS 变砖那样顺利。

我提出问题之后，首先跳出来的一帮人问我「为什么要做这个东西？」

哈？

然后我解释了一遍我需要做一个「可循环的沙漠公路绿幕」：其核心思想是，渲染一段以plane为底面的沙漠；沙漠上面有一个公路样式的几何图形，最好是 Cube 这种有高度的，看起来像是沙子上的路；视频结尾帧与视频开头帧相同，这样我可以无限循环这个视频，其最简单的办法是镜头最后的图形边界与开头的边界相同（其他方法亦可）。

然后得到了这么几个答案：

  • 随便渲染一下就好了，循环的时候咯噔一下，没人在意。
  • 渲染一个足够长的道路。
  • 你为什么要做绿幕，你直接在 Blender 你做完你的项目不就好了？

基本上，面对一个 目标极为明确的问题时 ，得到的答案是 不要做？ 。

什么玩意……

继续摸索

阶段1

总之得到的帮助极为有限，多数人都是喷子状态。因为我的电脑配置是 i7-4790K + GTX1080 ，10年前的配置。虽然这个配置称霸了非常多的年份（10系显卡GTX1060霸榜一直到去年年末为止），但是放在 Blender 这种纯正的生产力场景下是很虚的。所以又冒出来一堆开喷硬件配置的，直到有人发现我在 Linux 环境下没有正确启用 Cycles 的硬件加速。

作为个生产力工具，整个社区竟然没几个人用 Linux 这一点也是够搞笑的。不过有了这个场景，我立刻就能分辨出哪些才是真正的有能力的 Blender 用户了。

搞了一宿，最后还是没搞定如何 循环 沙漠纹理。

这个时候终于有人提出新的方案了：不要用随机去渲染沙漠纹理，用内置的 海洋 去渲染。

我试了一下，海洋的渲染是基于一个固定模式的，所以其首尾的形状可以首尾相接。然后用颜色噪音把海洋渲染成土黄色。仔细一想其实海洋和沙漠是一回事，还挺有道理的。

然后这个是阶段成果。

[Blender] 在电脑前坐了一天，干到后半夜3点，就整出来2秒钟这玩意

问题出来了，因为我的目标是公路 正向/反向 的效果，所以「地平线」需要是垂直的，这就要求这个海洋要 足够宽 ，那么这个海洋的纹理就会被拉伸得，没啥效果，看着更像是 泥水 了。

此时已经是后半夜三点了。

然后我决定睡觉！

然后刚准备躺下的时候，脑子里冒出来了一个极其有意思的主意！导致我一晚上没睡好觉！

阶段2

首先，「海洋」的办法不是不行，就是实现起来可能要调教很久，效果也很一般，尤其是为了水平线而拉宽之后，效果肉眼可见的差劲。

毕竟我基础就已经很差了，就算形状搞定了，到纹理的大坑也得摔倒。

screenshot_vlcsnap-2024-01-30-19h05m30s064

screenshot_vlcsnap-2024-01-30-19h05m36s007

但是之前的方法我又搞不定边界连接的问题，无法做到循环。

然后我就想到了，或许改变一下前提。

我目前遇到的问题是，沙漠plane的边缘接不上。那假如，代表沙漠的图形没有边缘呢？

screenshot_on_b85m_by_flameshot_at_2024-02-17_01-10-41

Ta-Da！圆柱！

没错，这个就是兴奋得让我一宿没睡好觉的点子。

放弃平面的设计，做两个圆直径超大的圆柱体，一个代表沙漠，沿用旧的渲染方式；一个代表公路，嵌在沙漠里，只要位置恰当，看起来就像公路一样。

这方法甚至都不需要再移动镜头，只要让俩圆柱体旋转起来就行。

[Blender] 用了新的思路，编辑2小时，渲染1小时。

当然，缺点也是有的。圆柱体的直径必须足够大，不然看起来的确不像是平面，而是圆柱，露馅了。直径太大就导致周长特别大，那么转一圈的时长就特别长，渲染压力立刻就上来了。而且圆柱终究是圆柱，边缘怎么看都会觉得并不是地平面，而周长太大，大过头了 循环 的实用性就没了。

不过目前也就只能这样了。

阶段3

第一个大坑算是过了。

然后是给公路贴纹理。

这 TMD 作为一个 Blender 用户，应该是最简单的一个功能。

我TM不会啊！

screenshot_on_b85m_by_flameshot_at_2024-02-17_01-25-20

screenshot_on_b85m_by_flameshot_at_2024-02-17_01-25-37

我其实是要给一个圆柱的侧面贴纹理，而且还是要重复贴相同的纹理。我哪会这个！ 你让我写个 CSS 还差不多！

screenshot_on_b85m_by_flameshot_at_2023-12-29_00-34-18

screenshot_on_b85m_by_flameshot_at_2023-12-29_00-49-32

总之这一块也卡了好久才搞定。

这种最基础的玩意，真的是，最好有个人能手把手教一下，把流程缕清晰了最好。

我这种瞎蒙出来的，完全不知道自己是怎么蒙出来，下次让我做一样的事情，我照旧做不出来，还是得瞎蒙。尤其是我也已经上岁数了，记忆力也差，蒙出来也想不起来过程，非常难受。

阶段4

至此坑就算是填了，把天空改成绿幕，然后速度和其他参数什么的，调整了一下就能出成果了。

然后初次渲染的时候，一遍渲染，一边尝试微调些细节。结果渲染出来的结果一塌糊涂。

我这才意识到 Blender 的渲染不是沙盒模式的，即它渲染的不是我在执行「渲染」瞬间的副本，而是正在编辑的正本。

也就是说 Blender 渲染的时候，最好完全不要动 Blender。切出去干别的，或者最好把电脑放那不要动。

这都2024年了怎么软件行业里还有这种玩意啊！

成果

随便剪了一下，做了两个示例，就发B站了。

[Blender] 可循环沙漠公路绿幕

我甚至懒得发布纯素材。

其实渲染有 Alpha 通道的视频也不是不行，但是指望我这个老电脑渲染 VP8/9 H.265 AV1 实在是太困难了。而且现在所有视频网站依旧以 H.264 为主流。

（其实主要还是我电脑带不动）

这玩意到这个阶段时，我把片段发到之前的 Discord 频道里，然后一堆人（就是之前那堆帮倒忙的）冒出来问我这这那那都是怎么实现的，尤其是对绿幕这块甚至都不知道怎么实现怎么使用。

好家伙， NLE+VFX 最基础的东西都不知道，竟然还试着在那指教我？

然后看到我在用开源的 Shotcut 作为 NLE 时竟然开喷我用不起高贵的 Adobe，这一看就是小孩没参加过工作啊，我在家用不起 Adobe 我大不了去公司用公司电脑上的 Adobe。

（原来国外社区跟国内也没什么两样，都 Toxic ）

使用例

除了上面那个视频带的 Senator 和 国际靶场 两个示例，我还用这个素材做了另一个视频。

Funky Town ⧸ Eurobeat Remix (Deamoz Eurobeat)

当然最初为了做这个绿幕素材的目的也没忘。

[星际争霸2] Go 大主教 Go Go !!!

结尾

这事就算了结了。

经验基本上是没累积到。我现在这个年龄，好多新知识，摸了不进脑子，除非天天摸。我现在开始担心自己以后会不会糊涂得像家里大人一样，到了岁数后连手机怎么接打电话都不会，但是刷短视频乱花钱比谁都猛。

国内国外社区都这么 Toxic 这事看来我是可以确定了，国外的月亮不比国内圆，但国外的屎一样臭。

The post 用 Blender 制作一个可循环沙漠公路绿幕 first appeared on 石樱灯笼博客.

累积布局偏移优化 CLS 完全指南

✇折影轻梦
作者 折影轻梦
2023年9月16日 08:00

什么是布局偏移

一个十几秒的短视频解释清楚。

更详细的解释是：布局偏移指的是在网页上发生突然变化时，页面中的内容位置发生意外移动的现象。这种情况常常让人感到困扰，因为它会导致阅读中断或误操作。布局偏移通常是由于资源异步加载或动态添加到页面上的 DOM 元素导致的。可能的原因包括具有未知尺寸的图像或视频、字体与其备用字体渲染大小不同，或者第三方广告或小部件动态调整大小。

难受的是，网站在开发过程中的功能通常与用户体验有很大不同。个性化或第三方内容在开发中的行为通常与生产环境中不同，测试图像通常已经存在于开发者的浏览器缓存中，本地运行的 API 调用通常非常快，延迟几乎不可察觉。

什么是 CLS

累积布局偏移 CLS（Cumulative Layout Shift）是一个指标。

是对页面整个生命周期中发生的每个意外布局变化的最大布局变化分数的度量。

CLS 通过测量实际用户遇到布局偏移的频率来帮助解决布局偏移问题。它可以帮助开发者了解布局偏移在真实用户中发生的情况，从而采取相应的措施进行修复。

为什么要优化 CLS

布局偏移是一个非常影响用户体验的问题，通过上面那一个简短的视频也能理解。

布局偏移通常会导致意外点击、页面方向的迷失，最终导致用户受挫。用户往往不会逗留太久。有时也会使用户不按照预计的产品流程走。

通常优化好布局偏移能够很好的提高用户粘性、用户停留时间等指标。

Yahoo! JAPAN News 通过降低 CLS 0.2 分，得到如下成果。

如何降低 CLS

图片等媒体元素占位

在图像、视频等媒体资源元素中始终包含宽度和高度大小属性。或用 CSS 中的 min-height、aspect-ratio 或类似的方式保留所需的空间。

aspect-ratio

可以用来直接指定当前元素的比例。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio

对浏览器的支持：

padding-bottom

如果考虑浏览器支持问题仍然可以考虑使用目前一个被广泛接受的基解决方案 “Padding-Top Hack”。这个解决方案需要一个父元素和一个绝对型的子元素。然后计算出长宽比的百分比来设置为 padding-top。例如：

1
2
3
<div class="container">  <img class="media" src="..." alt="..."></div>
1
2
3
4
5
6
7
8
9
10
.container {  position: relative;  width: 100%;  padding-top: 56.25%; /* 16:9 Aspect Ratio */}.media {  position: absolute;  top: 0;}

使用不易产生偏移的 CSS

其中 transfrom 表现很好，以下举几个例子。
用例可以在这里找到：https://play.tailwindcss.com/26PxFA6UVI

zoom VS transform: scale

当 zoom 会撑大页面并向右偏移时，transform: scale 只是在原地放大。

margin VS transform: translate

margin 造成父元素变大，transform: translate 只是让当前元素移动。

border VS box-shadow

border 会撑起父元素，而 box-shadow 并不会。

小心你的懒加载

懒加载会引起布局的偏移，如果你在有懒加载长列表的里进行跳转，请小心！
无动画进行跳转，能够一定程度上避免该问题。

小心使用 transition: all

在页面首次加载或者跳转页面时，transition: all 可能会导致元素的 padding 等从参数为 0 开始渲染，照成页面的抖动。

这都是痛：
Commit：表格以及友情链接图标抖动
Commit：修复导航栏抖动问题

标签顺序导致的偏移问题

由于在移动端上优先展示主要内容，因此侧边栏的 markup 位于主要内容的后面；而在更大的屏幕上，则通过设置 CSS order 的方式进行排序，将主要内容移到中间（即第二列），伪代码如下：

1
2
3
4
5
6
7
8
9
export default function MainLayout(props) {  return (    <Container>      <Main className={css`@media screen and (min-width: breakpoint) { order: 0 }`} />      <Left className={css`@media screen and (min-width: breakpoint) { order: -1 }`} />      <Right className={css`@media screen and (min-width: breakpoint) { order: 1 }`} />    </Container>  )}

浏览器在首次绘制时并没有完整解析 DOM、只知道 <Main /> 的存在、但不知道 <Left /> 或者 <Right /> 的存在，才因此将 <Main /> 渲染进第一列而不是第二列；直到第二次绘制时，浏览器才将 <Main /> 渲染进第二列、将 <Left /> 渲染进第一列。

Chrome 并不是一次完整解析 HTML 的，在以下两种情况下，Chrome 会暂停解析、开始渲染和绘制：

  1. Chrome 解析器在读取了 65535 字节的 HTML 后暂停
  2. Chrome 在遇到 <script> 标签后，会继续读取约 50 个「Token」之后暂停

详细了解请看：优化博客的累计布局偏移（CLS）问题

网页跳转与前进后退缓存

默认情况下，所有浏览器都使用 bfcache，但由于各种原因，有些站点不适合使用 bfcache。有关如何测试和识别阻止 bfcache 使用的任何问题的更多详细信息，请阅读 bfcache 文章。

在你离开后，bfcache 将页面保存在浏览器内存中很短的一段时间，所以如果你返回它们，那么它们将完全恢复为你离开时的样子。这意味着完全加载的页面立即可用，而不会出现任何变化。

现在的 SPA 应用也能很轻易的保证路由跳转页面布局的一致性。记住始终保持你的目录和导航栏在页面的固定位置。

字体

在下载和渲染网络字体之前，通常有两种处理方式：

  1. 使用网络字体替代备用字体（FOUT——未样式化文本的闪烁）。
  2. 使用备用字体显示“不可见”文本，直到网络字体可用并且文本可见（FOIT——不可见文本的闪烁）。

着两种方式都可能导致布局变化。即使文本是不可见的，它仍然使用备用字体进行布局。这意味着使用该字体的文本块以及周围的内容在网络字体加载时会发生布局变化，与 FOUT 的可见字体完全相同。

以下方法可以帮助你最小化这种问题：

  1. 使用 font-display: optional 可以避免重新布局，因为只有在初始布局时网络字体可用时才会使用它。
  2. 使用匹配度高的备用字体。例如，使用 font-family: "Google Sans", sans-serif; 将确保在加载"Google Sans"字体时使用浏览器的无衬线备用字体。如果只使用 font-family: "Google Sans" 而不指定备用字体，将使用默认字体，而在 Chrome 上默认字体是"Times"，它是比默认无衬线字体的匹配度更差。
  3. 使用新的 size-adjust、ascent-override、descent-override 和 line-gap-override API 来尽量减小备用字体和网络字体之间的大小差异，详细信息请参阅“Improved font fallbacks”文章。
  4. 使用 Font Loading API 可以减少获取所需字体的时间。
  5. 使用 <link rel=preload> 尽早加载关键的网络字体。预加载的字体有更高的机会达到首次绘制，这样就不会发生布局变化。
  6. 阅读有关字体最佳实践的“Best practices for fonts”文章。

使用真正的骨架屏

骨架屏好坏示例

测量 CLS 分数

生产阶段

实验阶段

Lighthouse in DevTools

能够针对移动设备和桌面设备生成网页的实际性能报告，并能够提供关于如何改进相应网页的建议。

在本地开发期间从 DevTools 运行 Lighthouse 非常方便。

PageSpeed Insights

应该就是在线版的 Lighthouse。

Performance in DevTools

性能选项卡在 Chrome 的 DevTools 配置文件的所有页面行为在一段时间内记录。时间轴上会出现一个标记为“Experience”的图层，突出显示布局的变化和发生变化的元素。

Web Vitals extension

最好将 Web vital 扩展视为查找性能问题的抽查工具，而不是全面的调试工具——这是 Chrome 的 DevTools 中的性能选项卡的工作。

结语

作为一个对自己项目有较高要求的人，平常几乎都会接触到布局偏移优化或者 Lighthouse，只不过之前自己瞎折腾的时候还没有 CLS 这个概念，现在算是对 CLS 有了较为清晰的概念了。
CLS 作为一个非常基础的优化指标，在用户体验上非常重要，任何项目都应该针对 CLS 做优化。

如有勘误，请及时指出，感谢！

参考

  1. https://web.dev/cls/
  2. https://web.dev/optimize-cls
  3. https://developers.google.com/publisher-tag/guides/minimize-layout-shift
  4. https://web.dev/yahoo-japan-news/
  5. https://addyosmani.com/blog/infinite-scroll-without-layout-shifts/
  6. https://blog.skk.moe/post/fix-blog-cls/
  7. https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
❌
❌