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

一键展示管理收藏夹

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

随时随地的同步空间

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

直观且舒适的重组织

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

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

严格隐私保护

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

定制个性化新标签页

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

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

获取系统

可以从优麒麟的官网获取最新版22.04、20.04和V10的安装包，我这里用的是一个老版本。
https://www.ubuntukylin.com/downloads/

安装过程这里就省略了，基本上按照提示来就行了。

下载JCEF代码

jcef项目在Bitbucket上，地址如下：
https://bitbucket.org/chromiumembedded/java-cef/src/master/
现在jcef在Github也有代码了，但是提issue的话最好是去Bitbucket上：
https://github.com/chromiumembedded/java-cef

sudo apt-get install git #麒麟系统有的版本并没有git需要先手动安装一下

git clone https://github.com/chromiumembedded/java-cef.git #下载源代码

编译JCEF

其实打开代码里的CMakeLists.txt可以看到编译的要求和基本的步骤，可以看到最新版的jcef100要求的CMake的最低版本是3.19，但是目前麒麟系统能下载到的最新版为3.5.1，不符合要求。这里的话有两种方法，一种是下载最新版CMake源码编译安装，另一种是编译一个老版本的jcef。

我选的是后一种方法，毕竟，用麒麟系统的人也不是那么需要最新版的代码。

查看git log可以发现，在2021年12月14日，jcef更新了MakeFile，而在此之前的jcef95要求的CMake版本是2.8。
使用git reset退回到CEF version 95.7.14+g9f72f35+chromium-95.0.4638.69这个版本。

git reset --hard ae6912a705e6a2a60f0f156fcc2e8c03bf8285c4

我们还需要安装build-essential这个包。

sudo apt-get install build-essential

麒麟系统自带了JDK 1.8，但是并没配置Java Home，需要我们手动配置一下

vi /etc/profile

#在末尾添加

export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
export JRE_HOME=${JAVA_HOME}/jre
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib
export PATH=${JAVA_HOME}/bin:$PATH

#保存退出

#退出以后执行 
source /etc/profile

然后就可以开始编译了：

cd /java-cef/src  #到代码路径下src文件夹下
mkdir jcef_build && cd jcef_build

cmake -G "Unix Makefiles" -DCMAKE_BUILD_TYPE=Debug ..
make -j4

如果你的网络条件比较好的话，基本就可以顺利编译完成，但是如果不那么理想的话，可以手动去http://opensource.spotify.com/cefbuilds/下载一下编译所需要的文件，需要下载的是95版本Linux 64的包。将下载好的包放到java-cef/src/third_party/cef路径下。

使用如下指令编译所需的Java Class文件。

cd /java-cef/src/tools
./compile.sh linux64

测试编译结果

cd /java-cef/src/tools
./run.sh linux64 Debug detailed

运行效果如图

打包

测试正常后可以使用打包工具进行打包，毕竟不可能每台机器都这样编译一通。

cd /java-cef/src/tools
./make_distrib.sh linux64

打包的文件在/out路径下。

最后

其实，官方也知道jcef这个编译是个大坑，没个半天功夫根本搞不定，于是官方把jcef运行需要的包和可执行文件上传到了Maven，方便了太多。但是这个可执行文件在Windows下测试可行，而麒麟系统下却报错，有点可惜。
Windows下的maven dependency：

    <dependency>
        <groupId>me.friwi</groupId>
        <artifactId>jcefmaven</artifactId>
        <version>95.7.14.11</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/me.friwi/jcef-natives-windows-amd64 -->
    <dependency>
        <groupId>me.friwi</groupId>
        <artifactId>jcef-natives-windows-amd64</artifactId>
        <version>jcef-544024e+cef-95.7.14+g9f72f35+chromium-95.0.4638.69</version>
    </dependency>

顺便提一嘴，这个native包用阿里的源下载不下来，后来适用华为的源下下来的。

油猴是浏览器中不可或缺的扩展程序里。如果插件给了浏览器第二春，那么油猴脚本给了第三春。本文以 Chrome 中的 TemperMoneky 为例，简单列出我的脚本清单。

油猴来由

油猴脚本，正式的叫法是用户脚本（user script）。

你可以将用户脚本理解为一种可以根据我们的实际需求，为网页「加料」的手段。

如果要用严谨一点的定义来说，用户脚本其实是一种注入式的 JavaScript 程序，在网页本身的程序之外，通过一些手段，将用户需要的数据和逻辑注入到当前的网页中，达到修改界面、增加功能等等的目的。

之所以叫做「油猴」，是因为第一个制作这个浏览器扩展的作者 Aaron Boodman 起名叫做 Greasymonkey，中文直译就是「油腻的猴子」；后面其他脚本开发的时候，基本都在沿用 Greasymonkey 的一些基本规范，这些脚本也就统称为「油猴脚本」了。by 油猴使用指南 01：传说中的「油猴」与用户脚本 - kokdemo

安装油猴

• 有 番茄，通过 官网 在线安装
• 无法科学上网，通过 极简插件 下载 crx 文件，然后 离线安装

相似脚本管理器有 暴力猴（Violentmonkey）。相比 Tampermonkey，界面更简洁，管理脚本更方便，适合不喜欢折腾的用户。

安装脚本

用户脚本是一段代码，它们能够优化您的网页浏览体验。安装之后，有些脚本能为网站添加新的功能，有些能使网站的界面更加易用，有些则能隐藏网站上烦人的部分内容。

1. 打开一个著名的脚本源网站：Greasy Fork
2. 搜索脚本，或 根据脚本生效的网站过滤
3. 安装脚本（油猴脚本图文安装教程）

通用脚本

适用于所有站点。

HTML5 视频播放器增强脚本

网页播放器增强脚本，支持使用快捷键（Enter）打开全屏、无级倍速调整（0.1 倍速到 16 倍速）、自动记录播放进度和播放倍率、快进快退（30 秒）、开启画中画、逐帧截图等功能。

更多特性和快捷键，请参阅：

• 项目地址
• 小众软件

简悦( SimpRead ) · 轻阅版

简悦 · 轻阅版是 简悦 的轻量级版本，拥有 简悦的大部分特性，更具有加载速度快 · 只关注阅读模式呈现等特点。

Userscript+

• 在当前网站的右下角显示可用脚本（10 秒后自动消失）
• 筛选评分最高的前 50 个脚本

Picviewer CE+

可以将包含很多图片的网页变成图片浏览器，还能对图片进行翻转、旋转、放大，显示原始大图、收藏、批量保存，聚合所有分页大图，图片在线编辑等操作，功能丰富的不像是一款浏览器脚本，而更像是浏览器里的看图工具。@Appinn

显示最高质量的图片

1. 右键点击图片
2. 在新标签页中打开图片
3. 自动定位到最高质量图像

去繁留简

• 自动切换（利用此脚本）：将网页上的繁体中文转为简体中文。
• 手动切换（无需此脚本，Chrome 自带）：在网页的空白位置右键 - 翻译成中文（简体）

为什么你们就是不能加个空格呢？

自动在网页中所有的中文字和半形的英文、数字、符号之间插入空白。（摊手）没办法，处女座都有强迫症。

• Chrome 插件：为什么你们就是不能加个空格呢？
• 关联阅读：文案风格及排版指南 - 庭说

拒绝二维码登录

淘宝、京东、阿里云等网站默认使用账号密码登录，不出现二维码登录界面。

复制 Markdown 格式的超链接到剪贴板

快速复制 Markdown 格式（[标题](网址)）的超链接到剪贴板

特定脚本

只适用特定站点。

douban.com

豆瓣资源下载大师

• 聚合数百家资源网站，通过右侧边栏，几秒内告诉你哪些网站能下载对应的资源（FTP、BT、字幕、网盘等）
• 显示 IMDb、Metascore、Rotten Tomatoes（烂番茄）等的评分
• 有资源的站显示绿色，无法访问 / 没登陆的站显示白色，无资源的站显示黄色
• 显示对应的在线视频|在线音频|在线图书
• 显示对应的中英文
• 安装完脚本后，在弹出窗口点击 总是允许域名
• Telegram 频道：https://t.me/doubanchannel

在豆瓣电影页面直接搜索电影资源

by Cupfox 茶杯狐

这个脚本可以作为「豆瓣资源下载大师」的补充。

在豆瓣显示微信读书可读

微信读书很快要一统江湖了。

zhihu.com

知乎网页助手

• 外链直接跳转
• 无广告
• 下视频
• 左键划词自动复制
• 自动显示问题全部信息等

baidu.com

AC-baidu

• 去除广告
• 去除百家号
• ……

网盘助手

by 哩呵

• 百度网盘分享时自定义提取码
• 百度网盘、腾讯微云、蓝奏云万能钥匙
• 百度网盘生成并展示下载链接，再配合 IDM 插件，解决网盘限速问题
• 还有一些 NSFW 相关的脚本，这里就不便提及了

weibo.com

药方

• 根据关键字、作者、话题等过滤微博（及评论）
• 界面清理
• 去广告
• 调整版式

youtube.com

去除 YouTube 广告

1. 打开 youtube.com
2. 点击 uBlock Origin 扩展程序的图标，即可关闭广告拦截功能。仅对 YouTube 有效，其它网站 uBlock Origin 依然可以拦截广告。这样看视频的时候就不会收到「YouTube 不允许使用广告拦截器」的警告。
3. 安装这个 去除 YouTube 广告的脚本，轻量且高效，也能丝滑的去除界面广告和视频广告，包括 6 秒广告。

本地 YouTube 下载器

不需要透过第三方的服务就能下载 YouTube 影片。

同步脚本

右击 Tampermonkey - 选项 - 设置：

1. 通用 - 配置模式：高级
2. 同步脚本 - 启用 TESLA - 同步类型：浏览器同步
3. 保存

如此设置，安装的脚本就可以随着你的 Google 账号进行同步。

没有番茄，推荐采用坚果云 WebDAV 同步脚本。

拒绝从头再来，重装系统之前这样备份你的油猴脚本 - by Eric_hong

关联阅读

• 👍 浏览器必备，2019 年度最喜欢油猴脚本 - 奔跑中的奶酪：大量精选脚本，任你挑选。
• 💚 谷歌浏览器（Google Chrome)：插件（扩展程序）清单及使用技巧 - 庭说
• 🔞 Sleazy Fork：这是一个提供 NSFW 脚本 的网站（新地址发布页）。

眼睛是心灵的窗户，浏览器是网络世界的入口。如何彻底打开这个入口（夸张的修辞手法）？这篇文章会一一告诉你。

选用理由

• 2008 年 9 月 2 日，Google 发布网页浏览器 Chrome（音标：krəʊm）。时至今日，Chrome 已经是全球 65% 用户的选择（概数）。
• 超过 15 万款 Chrome 扩展程序（俗称插件）可供你随心选择，这也是 Chrome 最强大的地方。
• 界面简洁，没有广告；支持网页翻译；支持简繁转换。
• 食用 番茄 后，登录 Google 账号，即可开启同步功能。Chrome 便会在你的电脑和手机上自动同步你的最新活动状态（例如扩展程序、书签、历史记录、密码和其他设置）。这样，无论身在何处，都能在自己的设备上享受一致的体验。
• 如果疲于搭建访问国际互联网的环境，或者对隐私有较高的要求，采用 Chromium 内核的 Microsoft Edge 或许你的第二选择。Chrome 上的功能 Edge 都有，Chrome 上的插件，Edge 也能用。而且，Edge 也支持一键导入 Chrome 上的数据。

下载安装

• Chrome 官方下载网址（需番茄）
• Chrome 最新版离线安装包下载网址（免番茄）
• RunningCheese 定制版 Chrome 下载网址
  • 绿色便携，内核可随 Chrome 官方发布的版本更新。
  • 自带：常用插件、百度网盘加速下载、视频去广告、翻译、下载、代理、小窗播放等。

扩展程序

正所谓：无篮球，不兄弟；无插件，不 Chrome。不装插件的 Chrome，只能发挥它一半的能力。

如何安装插件

• 有番茄，直接安装：直接在 Google 或 Chrome 网上应用店 输入插件的名称，即可下载安装。
• 无番茄，离线安装：访问第三方 Chrome 插件下载网站离线安装：
  • CrxDL：页面简洁。
  • 极简插件：严选有趣、实用、适合国内的插件。
  • GugeApps：Chrome 网上应用店高仿版，下载速度一般。
  • Crx4Chrome：英文网站。

关联阅读

• Chrome 插件离线安装方法（兼容全版本）
• 谷粒 - Chrome 插件英雄榜：为优秀的Chrome插件写一本中文说明书, 让Chrome插件英雄们造福人类

插件云同步

1. 在 Chrome 中登陆 Google 账号
2. 在插件中开启云同步功能（一些插件不支持云同步）
3. 即可在多个设备之间同步插件的设置

Tips

• 隐藏扩展程序：右键点击扩展程序的图标，选择 在 Chrome 菜单中隐藏
• 临时关闭扩展程序：右键点击扩展程序的图标，选择 管理扩展程序，关闭 启用

接下来，我将推荐一些常用的插件。

SwitchyOmega

科学上网（番茄）的必备插件，所以特地写了一篇文章，隆重地介绍它：《SwitchyOmega：在浏览器上轻松快捷地管理和切换多个代理》。

Tampermonkey

不安装油猴脚本的 Chrome 是没有灵魂的。作为扩展程序里的最强王者，值得我为它开篇立传：《油猴：浏览器的必备插件》

uBlock Origin

一款高效的请求过滤工具（广告拦截工具）：

• 占用极低的内存和 CPU，和其他常见的过滤工具相比，它能够加载并执行上千条过滤规则。
• 可拦截视频网站的广告。
• 点击弹出窗口中的电源按钮，uBlock 将对当前网页永久禁用 / 启用过滤功能（非全局开关）。

更多使用技巧，参阅：

• Wiki - uBlock Origin
• AdBlock-Rules - Mirror：无需通过任何代理即可光速更新规则。使用方法：
  1. 复制加速地址
  2. 打开 规则列表 - 自定义 - 导入
• 全平台支持，长久有效的广告过滤解决方案 - 奔跑中的奶酪
• uBlock 过滤规则 - 奔跑中的奶酪
  • 另存为 txt 文件，右键 uBlock Origin > 选项 > 从文件还原
  • 打开 启用云端储存

uBlacklist

帮你在 Google 搜索结果中屏蔽一些你不想看到的网站。

订阅黑名单列表 by eallion：

https://git.io/ublacklist

这是一个 uBlacklist 订阅地址合集，搜集了网上大部分的订阅地址合并成一个。通过 Github Actions 每周自动更新一次。

但是规则可能严格，例如会屏蔽知乎专栏和简书，虽然我对这两个写作平台也没什么好感，因为它们排斥外链。

英文翻译

沙拉查词

最优秀的划词翻译插件，必须单独写一篇文章夸夸它：《沙拉查词：PC 端（浏览器）上最好的翻译工具》。

达达划词翻译

好看简洁的划词翻译：

• 基于牛津字典的「英英翻译」、「例句」。
• 自带「生词簿」, 并可同步至扇贝、有道。
• 基于记忆曲线的「吐司弹词」。
• 外链「词根词缀」。

彩云小译

对整个网页上进行翻译，并将翻译的结果插入到原字符出现的位置，形成中英对照。

Language Reactor

边看视频，边学英文。目前只支持Chrome 浏览器。

• 观看 Netflix、YouTube 时自动开启双字幕或三字幕（机器翻译、人工翻译）
• 鼠标移至生词，释义自动显示，视频自动暂停
• 鼠标单击生词，显示详细释义，自动发音

更多功能，请参阅 官方入门指南 以及 电脑玩物的介绍。

Grammarly

Enhance your written communication everywhere you type.

• 免费版提供语法纠正（Grammar）、拼写纠正（Spelling）和标点纠正（Punctuation）等基础功能。
• 支持 网页版、 Mac 版、Windows 版、Word 插件 和输入法。但和 Grammarly 最般配的是，把它装进浏览器里，不管是写邮件、还是在社交媒体上发 Post，它就是你身边的写作小助手。

排版利器

简悦

简单阅读，愉悦心情。

• 阅读模式：为你提供沉浸式的阅读体验
• 支持生产力工具：Pocket、Instapaper、Linnk
  Notion、印象笔记 / Evernote、Onenote、Dropbox、Google 云端硬盘、Bear、Ulysses、语雀、坚果云、有道云笔记、为知笔记、WebDAV
• 支持把网页导出为 Markdown 文档。
• 获取最新动态，请关注 Telegram 频道。

关联阅读：为了完美阅读模式这个小目标 ，我适配了 160+ 个网站，因此诞生了它 - 简悦 ：沉浸式阅读的 Chrome 扩展

Markdown Here

用 Markdown 写邮件，然后点击 Markdown Here 的图标，Ta-da，一封漂亮的电子邮件就生成了。

Markdown Nice

让微信公众号的排版变 Nice。

网页版：mdnice.com

Copy Title and Url as Markdown Style

一键复制当前标签页的标题和链接，不过是 Markdown 格式。

Wikiwand

维基魔杖用于改善维基百科的阅读体验（Wikiwand gives good old Wikipedia a great new look）。

我们无法忍受世界上第五名受欢迎的网站，全球有五亿人使用的一个网站的界面竟然有好几十年没有更新。我们意识到维基百科的界面杂乱，很难阅读（小文章文本框过大），很难浏览，整体而言缺乏可用性。by Grossman

• 左侧有目录栏。
• 右上角提供了访问原文（Read On Wikipedia）、切换条目语言、字体调节等功能。
• 双击 Ctrl 可以调出搜索框，方便检索其他条目。

IDM Integration Module

此插件配合 IDM 的客户端，下载体验变得愉快。

京价保

有了这个插件，不用等最低价，吃了我的全给我吐出来。

• 官方网站：jjb.im
• 价格保护：全天候监控价格变化，降价自动价保
• 自动签到：支持京东会员、京东金融、京东支付
• 价格走势图：监控商品价格历史，了解价格走势
• 关联阅读：装上这款 Chrome 插件，去京东购物不用担心「刚买就降价」了 - 少数派

潮汐

极简番茄钟与白噪音。

RSSHub Radar

万物皆可 RSS。

RSSHub Radar 是 RSSHub 的衍生项目，它是一个可以帮助你快速发现和订阅当前网站 RSS 和 RSSHub 的浏览器扩展。

OneTab

当您发现自己有太多的标签页时，单击 OneTab 图标，将所有标签页转换成一个列表。当您需要再次访问这些标签页时，可以单独或全部恢复它们。

关联阅读：One Tab 不仅是浏览标签收容所，更是工作流 - tony4927

下载管理 Pro 版

可以隐藏底部的下载项（下载进度条），这样我在使用 HTML5 视频播放器增强脚本给《瑞克和莫蒂》截图（Shift + S）时，就不会有通知了。

此功能需要在设置中开启。

Search to Play the Song

初衷是为了快速搜歌，然后有了广播，有了片段播放，有了更多听众。保持纯爱好，尊重版权，不下载不破解不拉歌单评论。by Leewei

听音乐

• 支持网易/虾米/QQ/咪咕/油管试听

• 支持歌单导入导出

• 支持 MV 搜索及快捷键

• 虾米默认不展示，油管需 VPN

听播客

• 相当于一个泛用型播客客户端
• 截止 2020 年 9 月 21 日，未集成 Show Notes 功能

听广播

• 相当于一个收音机
• 可搜索大陆或者港台的电台节目

需要时才启用的插件

在性能不足的电脑上，启动过多的扩展程序会拖慢系统的运行速度。因此，临时关闭一些不常用的扩展程序，需要时再启用，是一个折衷的方法。

YouTube 双字幕

已被 Language Reactor 取代。

☝️ YouTube™双字幕 ☝️

• 安装即用
• 仅支持 YouTube

最佳实践

1. 浏览器语言设置为你的母语
2. YouTube 的默认字幕设置为「自动」

✌️ Dualsub ✌️

• 支持中文注音、日语注音和词性标注
• 功能强大，官网网站 提供了详细的新手指南和设置帮助
• 支持 YouTube、Netflix、Hulu、HBO Max、爱奇艺国际版、哔哩哔哩、网易云音乐、QQ 音乐等 16 个视频/音频网站

简 Tab

只呈现美图，无任何干扰，望你每次打开 New Tab（新标签页）都有好心情。但这并不意味它仅代表简单，它的功能包含：多种背景源、丰富的定制化选项、常用网址、书签栏、快捷搜索栏、白噪音、禅模式等。

IE Tab

一些政务和网银相关的网页需要 IE 浏览器才能打开，启用这个插件，即可以 IE 内核显示网页。

QR 码生成与识别

轻松为网址、链接、文本生成 QR 码（二维码），同时支持右键菜单、本地文件和摄像头扫码。

扫描二维码

• 选择含有 QR 码的图片，右击扫码

生成二维码

• 右击当前页面的空白处，可以生成当前页面的链接 QR 码。
  • 手机扫码直达网址，免去手动输入网址的烦恼。
  • 下载 svg 格式的无损图片。
  • 也可自行修改 URL，然后生成 QR 码。
• 生成鼠标选中文本的 QR 码。
• 右击页面上链接、图片、视频或音频，即可生成QR 码

Fatkun 图片批量下载 - Pro

找出并下载当前页面的所有图片。

• 支持按分辨率、链接等条件筛选图片。
• 支持对图片批量重命名。
• 自动把 WEBP 转换为 JPG。

送给电商从业者的福音：针对淘宝、天猫和 1688 的商品，自动按主图、SKU 图（以相应 SKU 来命名图片）和详情图分类。

QQ 空间导出助手

用于导出备份 QQ 空间的说说、日志、私密日记、相册、视频、留言板、QQ 好友、收藏夹为文件，便于迁移与保存。

GitHub 主页以及使用教程

西方媒体查一查

提供西方媒体的简单介绍、 可信度和政治倾向性。by 新闻实验室。

Infinity

另一个新标签页插件，可以自由添加网站图标，云端高清壁纸，快速访问书签、天气、笔记、待办事项、扩展管理与历史记录。可快速切换搜索引擎。

几枝

搭配经典诗词，在新标签页上展示中国传统色的层叠波浪动画效果。

键盘快捷键

🔥 越多，代表我越常用。

标签页和窗口快捷键

• Ctrl + W / Ctrl + F4 关闭当前标签页或者单击鼠标中键（滚轮） 🔥🔥🔥
• Ctrl + T 打开新的标签页（Tab），并跳转到该标签页 🔥🔥
• Ctrl + Shift + T 重新打开最后关闭的标签页，并跳转到该标签页 🔥🔥
• Ctrl + N 打开新（New）窗口 🔥🔥
• Ctrl + Tab 跳转到右边的标签页
• Ctrl + Shift + Tab 跳转到左边的标签页

功能快捷键

• Ctrl + Shift + I / F12 打开「开发者工具」
• Ctrl + Shift + B 显示或隐藏书签（Bookmark）栏

地址栏快捷键

• Ctrl + K / Ctrl + E 从页面中的任意位置搜索
• Ctrl + L / Alt + D / F6 跳转到地址栏
• 输入搜索字词并按 Alt + Enter 键，打开新的标签页并执行 Google 搜索

网页快捷键

• Ctrl + R / F5 重新加载当前网页 🔥🔥🔥
• Shift + F5 / Ctrl + Shift + R 重新加载当前网页（忽略缓存的内容）🔥
• F11 开启或关闭全屏模式 🔥
• Ctrl + 0 将网页上的所有内容恢复到默认大小（数字 0）🔥
• Tab 浏览下一个可点击项（应用：输完账号，按 Tab，输入密码）
• Shift + Tab 浏览上一个可点击项
• Ctrl + D 将当前网页保存为书签（如何快捷添加书签到指定的书签文件夹：右键点击书签栏 - 添加网页）
• Ctrl + Shift + D 将所有打开的标签页以书签的形式，保存在新文件夹中
• Space：翻页
• Shift + Space：向上翻页

鼠标快捷键

• 按住 Ctrl 键的同时点击链接：在新的后台标签页中打开链接。🔥
• 按住 Ctrl + Shift 键的同时点击链接：打开链接，并跳转到该链接。
• 按住 Ctrl 键的同时向上滚动鼠标滚轮：放大网页上的所有内容。🔥
• 按住 Ctrl 键的同时向下滚动鼠标滚轮：缩小网页上的所有内容。🔥
• 将标签页拖出标签栏：在新窗口中打开标签页（仅使用鼠标）。
• 将相应网址拖动到书签栏中：将当前网页保存为书签。
• 把图片拖拽桌面，即可下载图片。

参考来源：

• Chrome 键盘快捷键 - Google Chrome 帮助
• 谷歌浏览器有哪些鲜为人知的高效操作？- Topbook

使用技巧

• 在地址栏输入 chrome://flags，搜索关键词 clipboard ，即可开启一个叫「云剪贴板」实验功能，更多玩法，请参阅 Chrome 79：官方「云剪贴板」来了 - 少数派。
• 在地址栏（搜索栏）输入 chrome://dino/（最后的斜杠不能少）就可以玩恐龙小游戏：空格键跳跃，下方向键蹲下。
• 利用 Chrome 原生工具进行网页长截图 - 少数派

关闭 QUIC 协议

防止运营商的 QoS 限速。在地址栏输入：

chrome://flags/#enable-quic

把 Default 改为 Disabled。

始终开启 Flash

Adobe® 已 宣布 将于 2020 年 12 月弃用 Flash® Player®。在 Chrome 76 及更高版本中，Flash 播放器默认处于停用状态。

如何在 Chrome 71 及更高版本上默认全部网站开启 Flash？知乎用户 asukaid 提供了以下解决办法（仅适用于 Windows，其他操作系统详见 知乎：最新版的 Chrome 如何始终开启flash而不是先询问？）：

1. 在任意位置（例如桌面），鼠标右键单击 - 新建 - 文本文档：新建文本文档.txt。
2. 复制并粘贴下面的代码到新建的文本文档，保存并退出。

   Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Policies\Google\Chrome\PluginsAllowedForUrls]"1"="https://*""2"="http://*"

3. 把文件扩展名 新建文本文档.txt 改为 新建文本文档.reg，双击，确定，即可写入注册表。
4. 重启 Chrome，在地址栏输入 chrome://settings/content/flash 查看是否写入成功。
5. 打开 4399，如果可以直接运行小游戏，即可删除 新建文本文档.reg。

关联阅读

• Chrome 将不支持 Flash，这位动画王者的时代即将结束 -数码荔枝
• Chrome - 少数派
• Chrome - 小众软件

tingtalk.me 因为不可抗力，在中国大陆被遭到屏蔽，此时在 智能分流（PAC）模式 下无法正常访问庭说的博客。于是不得不切换为 全局模式，但这样一来，其他可以正常访问的网站（例如 sspai.com）也走代理通道了（速度慢，费流量）。所以阅读完我的博客之后，不得不换回 PAC 模式。

这个时候，借助 SwitchyOmega 可以创建属于自己的规则列表（任意网站，走不走代理通道，你说了算）。

SwitchyOmega 不提供代理服务，它只是一个桌面浏览器插件（手机上不适用），但它可以：

• 更便捷地切换全局模式和分流模式
• 快速添加被屏蔽的网站（当 PAC 智能分流模式中的 GFWList 未能及时覆盖到被封锁的网站时）

安装 SwitchyOmega 到浏览器后，它就会接管代理规则，此时客户端的代理规则对浏览器不适用。

安装

打开 SwitchyOmega 的项目发布页，根据不同的浏览器，选择对应的安装方式。使用 Chrome 的用户，请在 Chrome 网上应用店 获取 SwitchyOmega。添加到浏览器后会自动跳出一段介绍性的教程，点击 跳过教程。

配置

界面

• 初始情景模式：auto switch

导入/导出

• 启用同步

proxy

• 代理协议：SOCKS5
• 代理服务器：127.0.0.1
• 代理端口：1080（Clash 是 7890）

auto switch

• 白名单：告诉代理工具，白名单（大陆没墙的网站）里面的网站直接连接，其余使用代理（会消耗更多的翻墙流量）。
• 黑名单：告诉代理工具，黑名单（大陆被墙的网站）里面的网站要使用代理。

随着墙越来越高，黑名单难以收录不断被墙的网站（年久失修，无人维护），例如 tingtalk.me，因此就需要经常添加新规则，所以使用白名单模式，绕开局域网和大陆未墙网址，也许更实用。

关联阅读：是时候使用 PAC 白名单了 - 落格博客

白名单模式

切换规则

• 勾选 规则列表规则（按照规则列表匹配请求）：直接连接（国内白名单网站）
• 默认情景模式：proxy

规则列表设置

• 规则列表格式：AutoProxy
• 规则列表网址：https://raw.githubusercontent.com/aglent/autoproxy/master/whitelist.pac
• 立即更新情景模式

黑名单模式

切换规则

• 勾选 规则列表规则（按照规则列表匹配请求）：proxy（被墙的网站）
• 默认情景模式：直接连接

导入在线规则列表

• 规则列表格式：AutoProxy
• 规则列表网址：https://raw.githubusercontent.com/gfwlist/gfwlist/master/gfwlist.txt
• 立即更新情景模式

启用

左击浏览器右上角的 SwitchyOmega 图标，选择：

• 直接连接：全部网站不通过代理，直接连接网站
• 系统代理：通过客户端代理，此时请在客户端开启代理
• proxy：全部网站通过代理连接网站
• auto switch：根据 GFWList 智能分流，最常用的模式
• 添加条件：把网站加入到自己的规则列表（重启浏览器后依然有效）
• 漏斗图标：临时切换通道（重启浏览器后失效）

关联阅读

• Proxy SwitchyOmega 配置教程（非官方）
• 谷歌浏览器（Google Chrome)：插件（扩展程序）清单及使用技巧 - 庭说

Saladict（沙拉查词）是一款聚合了大量权威词典的划词翻译插件（扩展程序），多个查词引擎可以交叉验证查词结果，助你全方位掌握外文词汇（涵盖中、英、日、韩、法、德、西语等），支持网页翻译、生词本、快捷键唤醒查词面板等功能，完全满足了我对查词插件所有的期望。

介绍

• 大量词典：大量权威词典涵盖中、英、日、韩、法、德、西语；同时对比多个词典快速掌握词义。
• 个性定制：个人按需配置（删除、添加、排序）词典，可以加快查询速度以及提升阅读效率。
• 无所不翻：多个主流机器翻译，除了翻译单词，还可以翻译长句。
• 查词历史：查词记录可导出到其它记忆软件（例如 Anki）中强化记忆。单词本可以通过 WebDAV 跨设备同步。
• 生态丰富：配合其它工具可实现浏览器外划词，OCR 查词（图片文字识别）。基于浏览器，不限于浏览器
• 论文模式：配合侧边栏模式的独立窗口查词面板，母亲手织毛衣的温暖，熬夜在沙拉查词上读论文时也能感受到。
• 网页翻译：支持有道网页翻译与谷歌网页翻译。
• 自动发音：还有真人发音。
• 排版清爽：带给你舒适的阅读效果。

更多细节，请参阅 Saladict 沙拉查词的官网。

安装

如何下载安装 最新发布版本：

• Google Chrome（谷歌浏览器）
  • 具备 科学上网 的环境，直接 从 Chrome 网上应用店安装沙拉查词
  • 否则，从 Chrome Extension Downloader / Crx4Chrome / 网盘 下载 crx 文件，使用开发者模式安装沙拉查词（请勿解压）。
• Firefox：火狐浏览器扩展商店
• Microsoft Edge：扩展商店

配置

以下是我的配置心得。更多细节，请参阅 沙拉查词使用教程（官方完整版）。

情景模式

我只配置了一个 默认模式，因为查词时懒得切换其他模式。所以，以下的「改造」都是在同一个情景模式下。

查词面板

因为经常翻译长句，所以 保持展开 自动展开多行搜索框。

自定义查词面板样式 by CaliforniaDream：

.dictPanel-Root { border-radius: 5px; }.menuBar { background-color: #019425; }.dictItemHead { padding: 5px; cursor: pointer; box-shadow: rgba(0,0,0,.3) 0 -10px 15px -8px; }.mtaBox-TextArea { font-family: Consolas, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; }.mtaBox-DrawerBtn, .waveformBox-DrawerBtn { height: 20px; }

我把顶部菜单栏的背景颜色换成 庭说绿 #019425：学习英文要保持绿意盎然、生机勃勃的好奇心

词典设置

波形控制按钮 在词典面板最下方显示音频控制面板展开按钮 ∧：

• Loop：音频 AB 循环（循环播放发音）。

我的 已选词典 排序如下：

• 双语例句：真人发音，地道得不能再地道；但一些发音无法播放。
• 人人词典：提供原汁原味的中英文字幕学习场景。
• 维基百科：网络百科全书；有些词语配有插图。
• 朗文词典：英英词典（用英语解释英语，才能掌握英语思维）；有些单词配有插图。
• 英汉双语词典
  • 剑桥词典
  • 柯林斯高阶
• 配置多个长句翻译词典，便于交叉验证：
  • 彩云小译
  • 谷歌翻译
  • 搜狗翻译
  • 腾讯翻译君
  • 百度翻译
  • 有道翻译（不推荐）
• 谷歌词典：查看词形（过去式、过去分词、现在分词和第三人称单数等）。
• 有道词典：附带词义辨析。

其他词典（按需添加）：

• Urban：解释英语俚语词汇。
• Etymonline：解释英语单词的起源。
• 韦氏学习词典：详细的英英学习词典。
• 小鸡词典：网络流行语词典。

PDF 设置

开启 默认用本扩展浏览 PDF 后，既可在 PDF 上进行划词翻译。

1. 右键点击沙拉查词，选择 管理扩展程序 > 允许访问文件网址
2. 把 PDF 文件拖拽到 Chrome 或右键点击 PDF > 打开方式 > Google Chrome
3. 哪里不会划哪里

详情请参阅 支持 PDF 划词的 Saladict 沙拉查词。

右键菜单

除了添加已有的 必应搜索 和 百度搜索（万不得已），我还自定义了以下链接：

豆瓣电影：查看电影评分

https://movie.douban.com/subject_search?search_text=%s

海词词典：查看单词的「释义常用度分布图」

http://dict.cn/%s

快捷查词

启用快捷键 后，将弹出独立词典界面：

• Windows：连续按三次 Ctrl
• macOS：连续按三次 ⌘ Command
• 设置浏览器键盘快捷键：Chrome 的设置入口是 chrome://extensions/shortcuts

我的习惯是：把文档放左边，独立词典窗口放右边。这样查单词，体验非常好。

导入导出

定期备份你精心配置好的沙拉查词，切换到新设备时，导入设定，即可享用。

技巧

右键点击图标

• 谷歌网页翻译
• 有道网页翻译

当前页面二维码

1. 点击（右上方地址栏旁的）沙拉查词的图标，打开查词面板
2. 鼠标移动到左下方的二维码图标，即可显示当前页面的二维码
3. 使用手机扫描二维码，即可把当前浏览的网页传送到手机上

多行搜索框

位于顶栏搜索框下面，使用输入大段文字。

• Enter 换行
• Ctrl + Enter 开始搜索

钉住与拖动查词面板

• 钉住：点击查词面板绿色任务栏上的 📌 即可「钉住」面板，面板不会消失，除非点击面板的 ❌。
• 拖动：按住绿色任务栏中间的空白部分可以拖动面板。

与 Quicker 联动

• 全局文本翻译
• 截图翻译（OCR 图像识别查词）
• 复制翻译

注：Windows 用户独占以上功能。

浏览器外划词

Windows

• Quicker：支持 OCR 图片文字识别；支持一边标注 PDF 一边使用沙拉查词翻译；支持鼠标手势操作。
• PantherBar

macOS

• Alfred Workflows
• Popclip

配合 Anki 使用

许多人疑惑添加生词为何不自动添加翻译（现已提供了上下文翻译）。与其它词典不一样，本扩展添加生词的方式是基于 Anki 和 SuperMemo 理念设计的，认为添加生词的过程也是记忆的一个环节。这刻意与当前流行的「尽可能省事」的设计相抵触，以避免迷失在信息流的漩涡中，产生「收藏既获得」的错觉。

关联阅读：记单词，神器再升级 - 山海青

关联阅读：

• 达达划词翻译 - Chrome
  • 自带「生词簿」，可与扇贝、有道单词本同步
  • 基于记忆曲线的「吐司弹词」
  • 基于牛津字典的「英英翻译」、「例句」
  • 外链「词根词缀」
  • 好看
• 彩云小译 - 网页翻译插件：同时显示网页原文和翻译。
• 谷歌浏览器（Google Chrome)：插件（扩展程序）清单及使用技巧 - 庭说

MaxAI.me 是一款可以让你在任何网页上使用人工智能的 Google Chrome 插件。它可以帮助你用 AI 完成各种任务，比如写作、改写、总结、翻译、解释和回复。你可以通过按 Cmd/Alt + J 快捷键或选择任意文本来调用 AI 聊天侧边栏，然后输入你想让 AI 做的事情。

MaxAI.me 支持多种 AI 模型，包括 ChatGPT（GPT-4）、Claude（Claude 2 100k）、Bard、Bing AI 等。你可以根据你的需要和喜好选择不同的 AI 提供商和语言。

MaxAI.me 还有很多其他有用的功能，比如 Markdown 渲染、代码高亮、自定义提示模板等。你可以在它的官方网站或 Chrome 网上应用店上了解更多信息和下载安装。

MaxAI.me 是一款免费的插件，但你也可以升级到付费版本来获取更多的功能和优势。

MaxAI.me 是一款能够提高你的生产力和创造力的强大工具，我强烈推荐你试一试！

如果你要试一试，可以通过我的专属推广链接来访问

https://app.maxai.me?invite=1YEM9pz7

对于AI小白用户来说，MaxAI.me有以下几个特别的价值：

1.快速访问、便捷调用

它可以让你快速地访问和切换不同的AI模型，包括ChatGPT（GPT-4）、Claude（Claude 2 100k）、Bard和Bing AI。这些模型都有各自的优势和特点，你可以根据不同的场景选择合适的模型。

对于国内用户来说，访问这些AI服务，比如访问他们的官方网站，都有很多障碍和限制，至少对于BingChat、OpenAI API，我们都可以利用MaxAI.me 实现快速访问和调用。

我的两个ChatGPT的账号都已经被封了，所以现在是通过购买银河录像局的提供的ChatGPT API 服务来续命的。

它可以让你在任何文本区域或网页上直接使用AI生成的内容，无需登录、复制或粘贴。你只需按下Cmd/Alt+J键，就可以调出一个类似Notion AI 的数字终端，让AI为你提供第一稿、改进建议或内容总结等服务。

它可以让你与AI进行交互式的聊天，提出跟进问题或细化结果。你可以在侧边栏中输入任何问题或指令，让AI为你搜索、解答或执行。你也可以使用一些预设的ChatGPT提示来完成一些特定的任务，比如营销、销售、文案、运营、生产力和客服等。

2.PDF 文档AI 辅助阅读

它提供浏览器阅读PDF文档的AI辅助，可以让你在浏览器中阅读PDF文档的时候依然可以快速调用AI总结、翻译、交互问答等功能。

3.优质Prompt &支持自定义

对于我们这些小白来说，提出好的问题、撰写好的需求提示Prompt 还是有一定门槛的，MaxAI 这类工具给我们预设了很多不错的需求提示，并做了封装，这样调用起来就更简单了。当然，我们也可以自定义我们所需要的需求提示Prompt，在未来也能通过它快速复用&调用。

4. ChatGPT稳定模式

当然，如果你已经有了不过的AI 使用经验了，MaxAI 也能为我们提供更加进阶的用法，依然值得关注。

比如他所提供的ChatGPT稳定模式：

• 减少ChatGPT登录中断
• 减少ChatGPT网络错误
• 减少ChatGPT Cloudflare检查
• 减少ChatGPT网页刷新

5.MaxAI Pro

你可以在设置中选择不同的付费计划，以获取更多的功能和优势。例如，如果你有OpenAI API密钥，你可以使用GPT-4、GPT-3.5-turbo-16k或GPT-4-32k等更高级的模型。如果你有ChatGPT Plus账户，你可以使用GPT-4、Web Browsing、Code Interpreter和Plugins等更多的功能。

今天在网上找了些 PNG 格式的动态表情包我是不会告诉你是我是在 LINE 偷的表情包的，于是了解到是 APNG 这种格式。由于微信和 QQ 不支持 APNG，所以就把 APNG 转为 GIF 了，在使用 APNG 转换成 GIF 后，发现在微信上只能播放一次，就产生了如何批量修改 GIF 的循环次数的问题。

所以准备简单介绍一下 APNG。并提供了一个在线工具，可以将 APNG 批量转换为 GIF，但是该工具不能实现无限循环。所以分享了一个批量修改 GIF 循环次数的方法，使用了 Node.js 和批处理脚本两种不同的实现方式。方便 Node 开发者和使用 Windows 的普通用户直接批量处理。

APNG 是什么？

APNG（Animated Portable Network Graphics）是 PNG 的位图动画扩展，可以实现 PNG 格式的动态图片效果。APNG 相比于 GIF 在图片质量和细节表现方面更有优势，而且随着越来越多的浏览器对 APNG 的支持，它有望成为下一代动态图的标准之一。主要有以下区别：

1. 图片质量：GIF 最多支持 256 种颜色，并且不支持 Alpha 透明通道，这导致 GIF 在色彩丰富的图片和含有半透明效果的图片上质量较差。而 APNG 可以支持更高质量的图片，包括更多的颜色和 Alpha 透明通道，使得动画效果更加细腻。

2. 构成原理：APNG 和 GIF 都是由多帧构成的动画，但是 APNG 的构成原理允许超自然向下兼容。APNG 的第一帧是标准的 PNG 图片，即使浏览器不认识 APNG 后面的动画数据，也可以无障碍显示第一帧。而如果浏览器支持 APNG，就可以播放后面的帧，实现动画效果。

3. 浏览器支持：从 Chrome 59 开始，Chrome 浏览器开始支持 APNG，使得大部分浏览器都能显示 APNG 动画。唯独 IE 浏览器不支持 APNG。

更多内容请参考：https://xtaolink.cn/268.html

APNG 批量转 GIF

该工具可以批量将 APNG 转为 GIF，不过不能无限循环。

https://cdkm.com/cn/png-to-gif

批量修改 GIF 为无限循环

bat（普通用户请使用该方法）

下面是使用批处理脚本（.bat）来实现相同的功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

@echo offsetlocal enabledelayedexpansionset "directoryPath=C:\path\to\directory"for /r "%directoryPath%" %%f in (*.gif) do (    echo Modifying %%~nxf    call :modifyGif "%%f")exit /b:modifyGifset "filePath=%~1"set /p data=<"%filePath%"set "index=!data:~0,16!"set "modifiedData=!data:~0,16!!data:~16,1!!data:~17,1!!data:~19!"echo.!modifiedData!>"%filePath%"exit /b

请将C:\path\to\directory替换为实际的目录路径。将上述代码保存为.bat文件，双击运行即可。脚本将遍历指定目录下的所有.gif文件，并对其进行修改。

请注意，批处理脚本的功能相对有限，无法直接读取二进制文件。上述脚本通过读取文件的第一行来模拟读取文件内容。在修改文件时，它直接将修改后的数据写入文件，而不进行二进制操作。这种方法可能不适用于所有情况，尤其是处理大型文件时可能会有性能问题。如果需要更复杂的二进制文件处理，请考虑使用其他编程语言或工具来实现。

Node(Nexmoe 使用的该方法）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

const fs = require('fs');const path = require('path');function unlimitedGifRepetitions(path) {  const data = fs.readFileSync(path);  const index = data.indexOf(Buffer.from([0x21, 0xFF, 0x0B]));  if (index < 0) {    throw new Error(`Cannot find Gif Application Extension in ${path}`);  }  data[index + 16] = 255;  data[index + 17] = 255;  return data;}function batchModifyGifFilesInDirectory(directoryPath) {  fs.readdir(directoryPath, (err, files) => {    if (err) {      console.error('Error reading directory:', err);      return;    }    files.forEach(file => {      const filePath = path.join(directoryPath, file);      const fileExtension = path.extname(file);      if (fileExtension === '.gif') {        try {          const modifiedData = unlimitedGifRepetitions(filePath);          fs.writeFileSync(filePath, modifiedData);          console.log(`Modified ${file}`);        } catch (error) {          console.error(`Error modifying ${file}:`, error);        }      }    });  });}const directoryPath = './path/to/directory';batchModifyGifFilesInDirectory(directoryPath);

请注意，上述代码使用了 Node.js 的文件系统模块（fs）来读取和写入文件。此外，需要将./path/to/directory替换为实际的目录路径。在执行该脚本之前，请确保已经安装了 Node.js。

该脚本将批量遍历指定目录下的所有文件，并对后缀名为.gif的文件调用unlimitedGifRepetitions函数进行修改。修改后的数据将写回原始文件。在控制台输出中，你可以看到每个已修改的文件的信息或任何出现的错误信息。

更多内容参考：https://www.b612.me/golang/232.html

更好的工具

这个批处理工具可以将多个 APNG 文件批量转换为 GIF 文件，并且可以对转换后的 GIF 文件批量设置为无限循环。

https://github.com/nexmoe/batch-apng2gif

什么是布局偏移

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

更详细的解释是：布局偏移指的是在网页上发生突然变化时，页面中的内容位置发生意外移动的现象。这种情况常常让人感到困扰，因为它会导致阅读中断或误操作。布局偏移通常是由于资源异步加载或动态添加到页面上的 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 分数

生产阶段

• Chrome User Experience Report
• PageSpeed Insights
• Search Console (Core Web Vitals report)
• web-vitals JavaScript library

实验阶段

• Chrome DevTools
• Lighthouse
• PageSpeed Insights
• WebPageTest

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

Edge：https://microsoftedge.microsoft.com/addons/detail/bopgggdgdhogemdpoepddaakfgfadjal
Chrome：https://chrome.google.com/webstore/detail/fefnkaabnkfafmmmopbghgejhnieccpm

我的想法

• 英文名，更有科技感
• 界面设计更有科技感
• 产品名称更直白
• 口号更加直白，而不是传递理念
• 产品描述更加直白，而不是传递理念

产品形态

特点

• 🏄不一个个添加：根据收藏夹生成，不用再额外管理一个新标签页
• 🛡️绿色安全隐私强：数据来自于你的收藏夹，不再来自我们的服务器
• 💪功能强大易用：强大的个性化、搜索、小功能，丰富的选项、状态设置

从今天开始，让你的书签变得再次强大

文件夹并行，让收藏夹变看板。进度跟踪，掌握全局

微创新

效果器

高可定制化

看板，并行显示

播放进度条

自动记录你哔哩哔哩（已上线）和 Youtube（暂未上线） 的播放进度

多个空间，随时变换身份

临时使用某个搜索引擎

快速目录

快速定位到你的书签

面向开发者的高级功能

提供无限的自由与可能

发布时间

一个月以内。

目前参加了Edge浏览器开拓者大赛。这个比赛对我很重要，比赛前 20 名才有奖项。每天每个人可以投两次票。希望大家能够支持我的项目。谢谢大家。
https://edgecontest.microsoft.com/worksDetail.html?WorkDataId=a002d0f8-e68a-48c0-a3c4-c7885731bbcd