RAIL​

RAIL, 是 Response, Animation, Idle, 和 Load 的首字母缩写, 是一种由 Google Chrome 团队与 2015 年提出的性能模型，用于提升浏览器内的用户体验和性能。

RAIL 模型的理念是 "以用户为中心；最终目标不是让您的网站在任何特定设备上都能运行很快，而是使用户满意。"

RAIL 把交互分为四个阶段: 页面加载，空闲，响应用户输入，滚动和动画。按首字母缩写顺序，其主要原则是：

Response 响应​

目标: 在 100ms 内响应用户的输入

Animation 动画​

目标: 在 10ms 或更短 的时间内生成动画中的每一帧。 从技术上讲，每帧的最大预算为 16ms（1000 毫秒/每秒 60 帧≈16 毫秒），但浏览器需要大约 6 毫秒来渲染每帧，因此每帧 10 毫秒的准则。

这里的动画包含:

• 视觉动画，例如入口和出口、补间和加载指示器。
• 滚动。 这包括甩动，即用户开始滚动，然后放手，页面继续滚动。
• 拖拽操作。 动画通常遵循用户交互，例如平移地图或捏合缩放。

Idle 空闲​

目标: 最大化空闲时间以增加页面在 50ms 内响应用户输入的几率。

例如，对于初始页面加载，加载尽可能少的数据，然后使用空闲时间加载其余的数据。

Load 加载​

目标：优化与用户的设备和网络功能相关的快速加载性能。 首次加载的一个很好的目标是加载页面并在 5 秒或更短的时间内在 3G 连接速度较慢的中端移动设备上进行交互。对于 后续加载，一个好的目标是在 2 秒 内加载页面。

影响页面加载性能的因素：

• 网络速度和延迟
• 硬件（例如，较慢的 CPU）
• 缓存的使用
• 解析 JavaScript

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace#%E8%AF%AD%E6%B3%95

画图网站​

1. draw.io

软件安装网站​

1. hereitis
2. xclient

参考来自： 掘金

参考来自： https://www.jianshu.com/p/921e0b89909b

https://www.jianshu.com/p/a89a3a95046f

sessionStorage 数据遍历，sessionStrage 获取所有 key

var sessionKeys = Object.keys(sessionStorage)

参考来自： https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/

公式：​

1rem = html根元素设定的font-size的px值

假设：

html{font-size:14px}

设计稿为宽度42px,高度为35px,换算成rem就是：

42/14=3rem，35/14=2.5rem。（14就是html的font-size）

background-image 添加 data:image/svg+xml;utf8, 后面直接使用 svg 资源即可

.icon-arrow-down {
    width: 20px; height: 20px;
    background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path fill="#00A5E0" d="M145.659,68.949c-5.101-5.208-13.372-5.208-18.473,0L99.479,97.233 L71.772,68.949c-5.1-5.208-13.371-5.208-18.473,0c-5.099,5.208-5.099,13.648,0,18.857l46.18,47.14l46.181-47.14 C150.759,82.598,150.759,74.157,145.659,68.949z"/></svg>') no-repeat center;
    background-size: 100%;
}

utterances 是一款基于 GitHub issues 的开源评论插件，类似于 Gitalk，支持 markdown

对比其他插件​

安装 Utterances​

申请 GitHub App​

首先保证自己的博客是 public 仓库

打开 utterances - GitHub App 点击 Configure 进入你的个人Applications页面

在打开的页面中选择 Only select repositories，并在下拉框中选择自己的博客仓库（比如我就是 lacorda/lacorda.github.io，也可以安装到其他仓库），然后点击 Save并Install

生成HTML配置​

安装完成后就会自动跳转到配置页面，也可以手动打开 Utterances

在 repository 中填入仓库名称，比如我就是 lacorda/lacorda.github.io，注意格式，不要忘记用户名

Blog Post ↔️ Issue Mapping 表示 issues 标题和博客 posts 的映射关系，我选择默认的第一项 Issue title contains page pathname。

Issue Label 表示用于评论的 issues 要不要打上 label，这一项是可选的。我选择为这些 issues 打上 Comment。

最后一项是 Theme 根据自己的喜好选择即可。

然后就会生成一段对应选项的 HTML 配置，应该是类似于这样的：

<script src="https://utteranc.es/client.js"
        repo="lacorda/lacorda.github.io"
        issue-term="pathname"
        label="Comment"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

直接将它插入到你的博客中对应的位置即可

如何在 docusaurus 博客中插入 utterances插件​

首先，你需要找到你要插入评论的位置，以 docusaurus 为例

通过 swizzle 找到 DocItem/Layout，并使用 Eject，可以对已知组件进行重新编辑

import InnerHTML from 'dangerously-set-html-content';

// 将这段插入到需要放入的位置
<InnerHTML html={`
  <script src="https://utteranc.es/client.js"
          repo="lacorda/lacorda.github.io"
          issue-term="pathname"
          label="Comment"
          theme="github-light"
          crossorigin="anonymous"
          async>
  </script>
`}/>