✨📒

详细记录一下此次建站过程

开始

之前的博客是基于jekyll打造的，要添加和定制化的东西都只能基于html+js+css完成，有些麻烦，所以一直有想更换引擎的想法
直到偶然间发现vuepress，首先是被vue3+typescript+vite吸引，然后看到默认主题属实有点不合符我的期待，自己动手成本又太高，也没有太急着去折腾，直到无意中发现了
vuepress-theme-hope，漂亮的外观一下子就吸引到我了，然后去官网深入研究了一番，发现二次开发的成本并不高，对于我来说比较友好，基本都是基于选项的配置型，和一小部分的定制开发，也可以基于vue来写，这让我觉得很合适。所以，一步步折腾了起来……

Markdown增强

hope主题的markdown效果是出乎意料的好，而且支持了很多普通markdown不支持的东西，如自定义容器、带tab的代码块，最方便的是可以直接写流程图了，可选高亮主题（本站代码高亮基于shikiPlugin,虽不如默认的prismjs轻量高效，但能提供更准确的语法高亮）具体效果看这里☞Markdown展示

目录结构

.
├── .github
│   ├── ISSUE_TEMPLATE # issus 模版
│   │   └── bug-report.yml
│   └── workflows
│       └── deploy-docs.yml # 推送脚本
├── CNAME
├── LICENSE
├── README.md
├── api
│   └── proxy.js # 跨域代理
├── env.d.ts
├── package.json
├── pnpm-lock.yaml
├── script
│   ├── requirements.txt 
│   └── submit.py # Github Actions 推送URL使用脚本
├── src
│   ├── .vuepress
│   │   ├── client.ts # 客户端配置文件
│   │   ├── components
│   │   │   ├── MyCoverLink.vue # 友链组件
│   │   │   └── Mylink.vue # 卡片组件
│   │   ├── config.ts # vuepress配置文件
│   │   ├── data # 数据
│   │   ├── navbar
│   │   ├── plugins
│   │   │   ├── vuepress-plugin-canvas
│   │   │   ├── vuepress-plugin-gradient-cover
│   │   │   ├── vuepress-plugin-hitokoto
│   │   │   ├── vuepress-plugin-live2DAssist
│   │   │   └── vuepress-plugin-popper
│   │   ├── public
│   │   │   ├── assets # 资源
│   │   ├── sidebar
│   │   ├── styles
│   │   ├── theme
│   │   │   ├── api
│   │   │   │   └── bing.ts # bing 每日壁纸
│   │   │   ├── components #自定义组件
│   │   │   ├── index.ts
│   │   │   ├── layouts # 自定义布局
│   │   │   └── utils
│   │   │       ├── busuanzi.pure.js # 不蒜子统计
│   │   │       └── time.ts #运行时间
│   │   └── theme.ts # 主题配置文件
│   └── README.md
├── tsconfig.json
└── vercel.json # vercel 配置文件

框架支持

vuepress2.x

主题支持

vuepress-theme-hope

自定义内容

基于原主题进行了继承，个性化内容如下，主要自定义内容分为

1. 自定义布局

   • NotFound.vue
   • Layout.vue(增加打赏组件)
   • News.vue(说说列表布局)

2. 自定义组件

   • BlogHero.vue
   • PageFooter.vue
   • Sponsor.vue（打赏组件）
   • NewsList.vue （说说列表）
   • NewsItem.vue （说说item）

3. 本地插件开发

   • vuepress-plugin-canvas（支持彩虹背景和动态几何图形两种）
   • vuepress-plugin-gradient-cover （遮罩背景）
   • vuepress-plugin-hitokoto （一言插件）
   • vuepress-plugin-live2DAssist （看板娘辅助，由于子页有sidebar，看板娘会挡住，所以写了一个子页隐藏的小东西）
   • vuepress-plugin-popper （鼠标特效，基于@moefy-canvas/theme-popper）

4. 引用外部内容

   • vuepress-plugin-oh-my-live2d 看板娘插件

   • 不蒜子统计

   • @moefy-canvas/theme-popper原有插件只支持vuepress1.x，自己基于moefy-canvas进行了支持vuepress2.x的本地化插件开发

   • @vuepress/plugin-google-analytics 支持Google Analytics 4 正好看到通知原来的UA也要被强制转换了，所以更换了G4

5. 配置内容

   • navbar
   • sidebar
   • 评论基于 Waline
   • 搜索基于algolia
   • 启用 copyright 版权信息插件
   • feed rss插件
   • 增加文章类型-说说，为说说markdown图片添加预览选择器

6. 零碎

   • 运行时间统计
   • CSS 样式美化
   • 引入字体，品如手写体，夏行楷体
   • wanlie 增加自定义emoji，并修改展示样式
   • 个性log
   • 自动推送新文章url到搜索引擎（百度、Bing、Google）👉详细配置

总结

未完待续，持续优化中

本地插件，喜欢自取，源码公开，点击右上角，github图标即可，当然不要忘记点个✨哦

Exploration & geek enthusiast, full-stack front-end engineer, UX Designer | Currently focusing on cross-platform development with main directions in iOS, ReactNative, Flutter, and Vue | Discovering a bigger world together with you.

Skills

Languages

Frameworks

Databases

Hardwares

Others

Github Summary

Preview

Activity Graph

关于本站

传送门

相关信息

这是一个GitHub Actions的配置文件，整体思路是，获取本次更新的url
（通过对比两次提交的sitemap.xml文件），所以触发条件是deploy分支有推送并修改了sitemap.xml文件，再利用python脚本进行url推送到百度、Bing、Google

脚本代码请看这里👉提交URL到搜索引擎（百度、Bing、Google）

前些天不是写了Bing的提交脚本吗，但是每次都要自己手动跑脚本也很麻烦，但我又没有服务器，所以用上了GitHub Actions了嘛
总的来说做了以下事情：

1. 提交代码并修改sitemap.xml 后触发工作流
2. 比对上一次提交和本次提交的新增URL
3. 将URL分别提交给百度站长、Bing、Google 供搜索引擎快速收录

流程解读

由于多说评论系统将于 6 月 1 日下线，所以准备迁移至disqus，相比较的话对于国内环境还是多说好用一点，毕竟加载快，支持各大媒体的分享，也不用小伙伴们翻墙；而 disqus 分享也只支持 Facebook 和 twitter。。PS:貌似现在又被墙了，以后有时间再换吧，目前就先这样，国内据说畅言还不错

迁移过程

1.首先为了不丢失原有评论，导出多说评论

2.文件转换

• 由于 disqus 不支持多说导出的.json 文件，所以需要进行转换为 xml 文件，此处使用 github 上的轮子JamesPan/duoshuo-migrator
• 使用步骤
  1. 下载duoshuo-migrator.py并安装依赖
     
  2. 执行 python duoshuo-migrator.py -i ~/Desktop/export.json -o disqus.xml命令
     
  3. 将转换完成文件导入
     

“Yeah It's on. ”

前言

Oragekk 的 Blog 就这么开通了。

跳过废话，直接看技术实现

2016 年，11 月 总算有个地方可以好好写点东西了。

作为一个程序员， 看多了别人的 Blog 这种轮子都是酷炫的不要不要的，自己其实一种想搞一个，前两天发现了 GitHub Pages +Jekyll 的技术方案，一下子就上瘾了。

终于可以有自己的自留地了，之前一直在简书上写一些技术类的文章，这次可以有个自己的地盘，想怎么写就怎么写。😝 哈哈。不过这些前端的东西对我也是一种挑战，似懂非懂的看着模板，和一堆 js+css+html 的代码。。一顿头大。。对照着效果，一步步自己改。改好了之后也是蛮有成就感的嘛

正文

接下来说说搭建这个博客的技术细节。

正好之前就有关注过 GitHub Pages + Jekyll 快速 Building Blog 的技术方案，非常轻松时尚。

其优点非常明显：

• Markdown 带来的优雅写作体验
• 非常熟悉的 Git workflow ，Git Commit 即 Blog Post
• 利用 GitHub Pages 的域名和免费无限空间，不用自己折腾主机
  • 如果需要自定义域名，也只需要简单改改 DNS 加个 CNAME 就好了
• Jekyll 的自定制非常容易，基本就是个模版引擎
• Jekyll 的安装倒是不难，难的是安装它之前的一堆安装

✨

陆续优化中……这次到了评论的邮件通知，由于 waline 带后端，可以开启评论通知，我是部署在 Vercel 上的，配置一下就可以了，模版要感谢小波同学

前置注意点

1.邮件要注意每日发信限制，短时密集评论会导致直接被封，禁止发信

2.最好不要使用自己平常使用的邮箱，使用一个单独的邮箱来操作

3.有服务器的同学，自己部署SMTP服务可以不受限制

老规矩先放效果图:

1. waline 官方邮件通知环境变量说明[1]

1.1 waline 邮件通知必填环境变量

SMTP_SERVICE: SMTP 邮件发送服务提供商。例如 163 在受支持的运营商列表可以直接填写 163

SMTP_USER: SMTP 邮件发送服务的用户名，一般为登录邮箱【切记要完整填写xxx@xxx.xx】。

SMTP_PASS: SMTP 邮件发送服务的密码，一般为邮箱登录密码，部分邮箱(例如 163)是单独的 SMTP 密码。 ^[2]

1.2 waline 邮件通知选填环境变量

SENDER_NAME: 自定义发送邮件的发件人

SENDER_EMAIL: 自定义发送邮件的发件地址

1.3 waline 邮件通知模版环境变量

MAIL_SUBJECT: 自定义评论回复邮件标题

MAIL_TEMPLATE: 自定义评论回复邮件内容

MAIL_SUBJECT_ADMIN: 自定义新评论通知邮件标题

MAIL_TEMPLATE_ADMIN: 自定义新评论通知邮件内容

1.4 waline邮件通知模版index.js服务端配置参数

• mailSubject 类型: string

  评论回复邮件标题自定义，等同于环境变量 MAIL_SUBJECT。

• mailTemplate 类型: string

  评论回复邮件内容自定义，等同于环境变量 MAIL_TEMPLATE。

• mailSubjectAdmin 类型: string

  新评论通知邮件标题自定义，等同于环境变量 MAIL_SUBJECT_ADMIN。

• mailTemplateAdmin 类型: string

  新评论通知邮件内容自定义，等同于环境变量 MAIL_TEMPLATE_ADMIN。

2.根据部署方式选择合适的邮件模版修改方法

2.1 vercel

• 环境变量^[3]
• 私有walie仓库index.js文件【推荐】

2.2 独立部署

• 修改服务端入口文件index.js

3.开始配置

3.1 设置完毕1.1中Vercel配置必须的环境变量

3.2 继续使用环境变量设置模版

MAIL_SUBJECT_ADMIN

{{site.name | safe}} 上有新评论了

MAIL_TEMPLATE_ADMIN

<div style="background: url(https://tva3.sinaimg.cn/large/c56b8822ly1h62npb7s1ej201y01y0lh.jpg);padding:40px 0px 20px;margin:0px;background-color:#FFCDCE;width:100%;">
	<style type="text/css">@media screen and (max-width:600px){.afterimg,.beforeimg{display:none!important}}</style>
	<div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 530px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;max-width:100%;background: ##ffffff;">
		<img class="beforeimg" style="width:530px;height:317px;pointer-events:none" src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png">
		<img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" style="width:100%;overflow:hidden;pointer-events:none;margin-top: -120px;">
		<div style="width:100%;background:#f8d1ce;color:#9d2850;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://tva2.sinaimg.cn/large/c56b8822ly1h61tb7tagcj20ii01u3yc.jpg) left top no-repeat;display: flex;justify-content: center;flex-direction: column;">
		<p style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;margin:0;">
		您在<a style="text-decoration:none;color: #9d2850;" href="{{site.url}}"target="_blank">{{site.name}}</a>上的文章有了新的评论</p>
		</div>
		<div class="formmain" style="background:#fff;width:100%;max-width:800px;margin:auto auto;overflow:hidden;margin-bottom: -155px;">
			<div style="margin:40px auto;width:90%;"><p><strong>{{self.nick}}</strong> 回复说：</p>
			<div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">{{self.comment | safe}}</div>
			<p style="text-align:center;position: relative;z-index: 99;">您可以点击<a style="text-decoration:none;color:#cf5c83" href="{{site.postUrl}}" target="_blank">查看回复的完整內容</a></p>
			<img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png" style="width:100%;margin:25px auto 5px auto;display:block;pointer-events:none">
			<p class="bottomhr" style="font-size:12px;text-align:center;color:#999">上冬十二(oragekk)博客竭诚为您服务！</p>
			</div>
		</div>
		<img class="afterimg" style="width:535px;height:317px;z-index:100;margin-left: -3px;"src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png">
	</div>
</div>

MAIL_SUBJECT

{{parent.nick | safe}}，『{{site.name | safe}}』上的评论收到了回复

MAIL_TEMPLATE

<div style="background: url(https://tva3.sinaimg.cn/large/c56b8822ly1h62npb7s1ej201y01y0lh.jpg);padding:40px 0px 20px;margin:0px;background-color:#FFCDCE;width:100%;">
	<style type="text/css">@media screen and (max-width:600px){.afterimg,.beforeimg{display:none!important}}</style>
	<div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 530px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;max-width:100%;background: ##ffffff;">
		<img class="beforeimg" style="width:530px;height:317px;z-index:-100;pointer-events:none" src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png">
		<img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" style="width:100%;overflow:hidden;pointer-events:none;margin-top: -120px;">
		<div style="width:100%;background:#f8d1ce;color:#9d2850;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://tva2.sinaimg.cn/large/c56b8822ly1h61tb7tagcj20ii01u3yc.jpg) left top no-repeat;display: flex;justify-content: center;flex-direction: column;">
		<p style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;margin:0;">
		您在<a style="text-decoration:none;color: #9d2850;" href="{{site.url}}">『{{site.name | safe}}』</a>上的留言有新回复啦！</p>
		</div>
		<div class="formmain" style="background:#fff;width:100%;max-width:800px;margin:auto auto;overflow:hidden;margin-bottom: -155px;">
			<div style="margin:40px auto;width:90%;"><p>😊Hi，{{parent.nick}}，您曾在文章上发表评论：</p>
			<div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">{{parent.comment | safe}}</div>
			<p><strong>{{self.nick}}</strong> 给您的回复如下：</p>
			<div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">{{self.comment | safe}}</div>
			<p>您可以点击<a style="text-decoration:none; color:#cf5c83" href="{{site.postUrl}}" target="_blank"> 查看回复的完整內容 </a>，欢迎再次光临<a style="text-decoration:none; color:#cf5c83" href="{{site.url}}" target="_blank"> {{site.name}} </a>。<hr />
			<p style="font-size:14px;color:#b7adad;text-align:center;position: relative;z-index: 99;">本邮件为系统自动发送，请勿直接回复邮件哦，可到博文内容回复。<br />{{site.url}}</p>
			</p>
			<img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png" style="width:100%;margin:25px auto 5px auto;display:block;pointer-events:none">
			<p class="bottomhr" style="font-size:12px;text-align:center;color:#999">上冬十二(oragekk)博客竭诚为您服务！</p>
			</div>
		</div>
		<img class="afterimg" style="width:535px;height:317px;z-index:100;margin-left: -3px;"src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png">
	</div>
</div>

3.3 使用服务端入口文件index.js变量设置模版

文件初始内容为:

const Application = require('@waline/vercel');

module.exports = Application({
    async postSave(comment) {
        // do what ever you want after save comment
    },
});

const Application = require('@waline/vercel');

module.exports = Application({
    async postSave(comment) {
        // do what ever you want after save comment
        mailSubjectAdmin: '{{site.name | safe}} 上有新评论了',
        ……
    },
});

正确使用姿势:

const Application = require('@waline/vercel');

module.exports = Application({
    async postSave(comment) {
        // do what ever you want after save comment
    },
    mailSubjectAdmin: '{{site.name | safe}} 上有新评论了',
    mailTemplateAdmin: `<div style="background: url(https://tva3.sinaimg.cn/large/c56b8822ly1h62npb7s1ej201y01y0lh.jpg);padding:40px 0px 20px;margin:0px;background-color:#FFCDCE;width:100%;">
	<style type="text/css">@media screen and (max-width:600px){.afterimg,.beforeimg{display:none!important}}</style>
	<div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 530px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;max-width:100%;background: ##ffffff;">
		<img class="beforeimg" style="width:530px;height:317px;pointer-events:none" src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png">
		<img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" style="width:100%;overflow:hidden;pointer-events:none;margin-top: -120px;">
		<div style="width:100%;background:#f8d1ce;color:#9d2850;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://tva2.sinaimg.cn/large/c56b8822ly1h61tb7tagcj20ii01u3yc.jpg) left top no-repeat;display: flex;justify-content: center;flex-direction: column;">
		<p style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;margin:0;">
		您在<a style="text-decoration:none;color: #9d2850;" href="{{site.url}}"target="_blank">{{site.name}}</a>上的文章有了新的评论</p>
		</div>
		<div class="formmain" style="background:#fff;width:100%;max-width:800px;margin:auto auto;overflow:hidden;margin-bottom: -155px;">
			<div style="margin:40px auto;width:90%;"><p><strong>{{self.nick}}</strong> 回复说：</p>
			<div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">{{self.comment | safe}}</div>
			<p style="text-align:center;position: relative;z-index: 99;">您可以点击<a style="text-decoration:none;color:#cf5c83" href="{{site.postUrl}}" target="_blank">查看回复的完整內容</a></p>
			<img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png" style="width:100%;margin:25px auto 5px auto;display:block;pointer-events:none">
			<p class="bottomhr" style="font-size:12px;text-align:center;color:#999">上冬十二(oragekk)博客竭诚为您服务！</p>
			</div>
		</div>
		<img class="afterimg" style="width:535px;height:317px;z-index:100;margin-left: -3px;"src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png">
	</div>
</div>`,
    mailSubject: '{{parent.nick}}，您在『{{site.name}}』上发表的评论收到了来自 {{self.nick}} 的回复',
    mailTemplate: `<div style="background: url(https://tva3.sinaimg.cn/large/c56b8822ly1h62npb7s1ej201y01y0lh.jpg);padding:40px 0px 20px;margin:0px;background-color:#FFCDCE;width:100%;">
	<style type="text/css">@media screen and (max-width:600px){.afterimg,.beforeimg{display:none!important}}</style>
	<div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 530px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;max-width:100%;background: ##ffffff;">
		<img class="beforeimg" style="width:530px;height:317px;z-index:-100;pointer-events:none" src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png">
		<img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" style="width:100%;overflow:hidden;pointer-events:none;margin-top: -120px;">
		<div style="width:100%;background:#f8d1ce;color:#9d2850;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://tva2.sinaimg.cn/large/c56b8822ly1h61tb7tagcj20ii01u3yc.jpg) left top no-repeat;display: flex;justify-content: center;flex-direction: column;">
		<p style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;margin:0;">
		您在<a style="text-decoration:none;color: #9d2850;" href="{{site.url}}">『{{site.name | safe}}』</a>上的留言有新回复啦！</p>
		</div>
		<div class="formmain" style="background:#fff;width:100%;max-width:800px;margin:auto auto;overflow:hidden;margin-bottom: -155px;">
			<div style="margin:40px auto;width:90%;"><p>😊Hi，{{parent.nick}}，您曾在文章上发表评论：</p>
			<div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">{{parent.comment | safe}}</div>
			<p><strong>{{self.nick}}</strong> 给您的回复如下：</p>
			<div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">{{self.comment | safe}}</div>
			<p>您可以点击<a style="text-decoration:none; color:#cf5c83" href="{{site.postUrl}}" target="_blank"> 查看回复的完整內容 </a>，欢迎再次光临<a style="text-decoration:none; color:#cf5c83" href="{{site.url}}" target="_blank"> {{site.name}} </a>。<hr />
			<p style="font-size:14px;color:#b7adad;text-align:center;position: relative;z-index: 99;">本邮件为系统自动发送，请勿直接回复邮件哦，可到博文内容回复。<br />{{site.url}}</p>
			</p>
			<img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png" style="width:100%;margin:25px auto 5px auto;display:block;pointer-events:none">
			<p class="bottomhr" style="font-size:12px;text-align:center;color:#999">上冬十二(oragekk)博客竭诚为您服务！</p>
			</div>
		</div>
		<img class="afterimg" style="width:535px;height:317px;z-index:100;margin-left: -3px;"src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png">
	</div>
</div>`
});

4. 结语

至此，大功告成，所有的注意点我都写在上边了

此模版来自SaraKale^[4]，经小波同学修改美化
其他模版同理，可以去SaraKale这里看看

你应该创建和编写 Markdown 文件，以便 VuePress 可以根据文件结构将它们转换为不同的页面。

Markdown 介绍

如果你是一个新手，还不会编写 Markdown，请先阅读 Markdown 介绍 和 Markdown 演示。

Markdown 配置

VuePress 通过 Frontmatter 为每个 Markdown 页面引入配置。

Markdown 扩展

VuePress 会使用 markdown-it 来解析 Markdown 内容，因此可以借助于 markdown-it 插件来实现 语法扩展 。

VuePress 扩展

为了丰富文档写作，VuePress 对 Markdown 语法进行了扩展。

关于这些扩展，请阅读 VuePress 中的 Markdown 扩展。

主题扩展

通过 [vuepress-plugin-md-enhance][md-enhance]，主题扩展了更多 Markdown 语法，提供更加丰富的写作功能。

自定义容器

const a = 1;

• 查看详情

代码块

• 查看详情

上下角标

19^th H₂O

• 查看详情

自定义对齐

• 查看详情

Attrs

一个拥有 ID 的 单词。

• 查看详情

脚注

此文字有脚注^[1].

• 查看详情

标记

你可以标记 重要的内容 。

• 查看详情

任务列表

• 计划 1

• 计划 2

• 查看详情

图片增强

支持为图片设置颜色模式和大小

• 查看详情

图表

• 查看详情

Echarts

• 查看详情

流程图

• 查看详情

Mermaid

写来留待日后慢慢欣赏 😜

苏轼

十年生死两茫茫，
不思量，自难忘。

陆游

红酥手，黄藤酒，
满城春色宫墙柳。

李清照

此情无计可消除，
才下眉头，却上心头。

辛弃疾

众里寻他千百度。
蓦然回首，那人却在，灯火阑珊处。

柳永

多情自古伤离别，
更那堪冷落清秋节！

范仲淹

羌管悠悠霜满地，
人不寐，将军白发征夫泪。

晏殊

无可奈何花落去，
似曾相识燕归来。

岳飞

三十功名尘与土，八千里路云和月。
莫等闲、白了少年头，空悲切！

秦观

两情若是久长时，
又岂在朝朝暮暮。

李之仪

只愿君心似我心，
定不负相思意。

欧阳修

人生自是有情痴，
此恨不关风与月。

唐婉

世情薄，人情恶，
雨送黄昏花易落。

姜夔

二十四桥仍在，
波心荡、冷月无声。

晏几道

琵琶弦上说相思。
当时明月在，曾照彩云归。

李冠

一寸相思千万绪。
人间没个安排处。

宋祁

绿杨烟外晓寒轻，
红杏枝头春意闹。

周彦邦

执手霜风吹鬓影，
去意徊徨，别语愁难听。

万俟咏

短长亭，古今情。
楼外凉蟾一晕生，雨余秋更清。

蒋捷

流光容易把人抛，
红了樱桃，绿了芭蕉。

吴潜

老去惜花心，相对花无语。

刘著

江南几度梅花发，
人在天涯鬓已斑。

贺铸

试问闲情都几许。
一川烟草，满城风絮。梅子黄时雨。

严蕊

不是爱风尘，似被前缘误。
花落花开自有时，总赖东君主。

黄庭坚

若有人知春去处。
唤取归来同住。

张先

天不老，情难绝。
心似双丝网，中有千千结。

晁补之

人生无奈别离何。
夜长嫌梦短，泪少怕愁多。

乐婉

若是前生未有缘，
待重结、来生愿。

朱淑真

把酒送春春不语。黄昏却下潇潇雨。

看完了，跪安吧。╮(╯_╰)╭

相关信息

素材、设计相关好用的网站

工具类

相关信息

免费公开的API网站，提供多种公共接口服务

一直以来，从 0 开始构建应用，都是一项复杂的工作。尤其是跨越手机、Web 和桌面平台的程序。

这是一片无尽的复杂海洋，需要把技术堆栈融合在一起，来引导、编译、测试、部署、监控应用程序。

多年来，谷歌一直致力于让多平台程序开发流程更快、更顺畅。

经过几个月的成果，团队成功做出了 Project IDX。

谷歌在创建 Project IDX 时并没有构建新的 IDE（集成开发环境），而是使用 VS Code 作为其项目的基础。这让团队能够专注于与 Codey 的集成，Codey 是谷歌基于 PaLM 2 的编程任务基础模型。Project IDX 支持智能代码补全，可以帮助开发者解答一般编码问题，提供与你正在处理的代码有关的特定问题（包括解释能力）的类似 ChatGPT/Bard 的聊天机器人，以及添加如 “添加注释” 等上下文代码操作的能力。
目前，Project IDX 支持 Angular、Flutter、Next.js、React、Svelte 和 Vue 等框架以及 JavaScript 和 Dart 等语言，后续还将支持 Python、Go 和其他语言。

Project IDX 特性

• 随时随地快速开始：你能够在任何地方、任何设备上进行开发，具有本地开发的全部保真度。每个 Project IDX 工作空间都具有基于 Linux 的虚拟机的全部功能，配合云中托管的通用访问权限。

• 一键导入或从模板创建：从 GitHub 导入现有项目，让你继续之前的进度。还可以创建新项目，预先包含流行框架的模板，包括 Angular、Flutter、Next.js、React、Svelte、Vue 和如 JavaScript、Dart 以及（即将推出的）Python、Go 等语言。IDX 还在积极努力为更多项目类型和框架添加一流支持。

• 跨平台预览：应用成功发布后，需要优化设计和不同平台上的行为（像用户那样预览自己的应用），而 IDX 内置的网络预览（目前只支持 web 预览），和即将推出的完全配置的 Android 模拟器和嵌入式 iOS 模拟器，所有这些都可以直接在浏览器中使用。

• AI 助手：我们花费大量时间编写代码，而人工智能的最新进展创造了巨大的机会，可以让我们的时间变得更加高效。IDX 正在探索 Google 在 AI 领域的创新 —— 包括 为 Android Studio 中的 Studio Bot 提供支持的 Codey 和 PaLM 2 模型、Google Cloud 中的 Duet [4] 等 —— 可以帮助你不仅更快地编写代码，还可以编写更高质量的代码。

• 一键部署：在最后，将应用推向生产方面的一个常见痛点是部署它。通过集成 Firebase Hosting，通过几次点击就可以部署你的 Web 应用的可共享预览，或通过快速、安全和全球托管平台部署到生产环境。由于 Firebase Hosting 支持由 Cloud Functions 提供动力的动态后端，所以它非常适合像 Next.js 这样的全栈框架。

• IDX 申请链接：https://idx.dev/

IDX 背后的 AI 模型 Codey

根据介绍，IDX 由 Codey 提供支持。

在 Google I/O 2023 大会上，谷歌正式发布 Codey。这是一款新型 AI 驱动工具，能够编写并理解代码内容。这款新工具被外界视为谷歌对于 GitHub Copilot 的回应，属于同 Replit 结盟打造的成果。

Codey 基于谷歌的下一代大语言模型 PaLM 2，并采用谷歌自家产品代码及大量合法许可的源代码作为训练素材。更重要的是，Codey 仍在不断学习和发展，从谷歌服务生态系统的各个项目中持续汲取新的力量。

Codey 支持 20 多种编程语言，包括 Go、谷歌标准 SQL、Java、JavaScript、Python 以及 TypeScript。开发者可以通过 Visual Studio Code、JetBrains IDE、Google Shell 编辑器以及 Google Cloud 托管工作站服务的扩展来访问 Codey。开发者能够直接在 IDE 的聊天框中与该模型交流（例如 Android Studio Bot），或者在文本文件中编写注释以指示其生成相关代码。它支持各种编码任务，通过以下方式帮助开发人员更快地工作并缩小技能差距：

代码完成：Codey 根据提示中输入的代码上下文建议接下来的几行。

代码生成：小程根据开发人员的自然语言提示生成代码。

代码聊天：Codey 允许开发人员与机器人对话，以获得调试、文档、学习新概念和其他与代码相关问题的帮助。

Codey 在处理与编码相关的提示词方面接受了专门训练，谷歌还通过其他训练让该模型学会了处理关于 Google Cloud 的一般查询。

目前在用的辅助AI开发工具

- CodeGeeX 智能编程助手

• 代码自动生成和补全 CodeGeeX可以根据自然语言注释描述的功能自动生成代码，也可以根据已有的代码自动生成后续代码，补全当前行或生成后续若干行，帮助你提高编程效率。
• 提供代码翻译能力 基于AI大模型对代码进行语义级翻译，支持多种编程语言互译
• 自动添加注释 CodeGeeX可以给代码自动添加行级注释，节省大量开发时间。没有注释的历史代码，也不再是问题。

基于CodeGeeX2: 更强大的多语言代码生成模型
是多语言代码生成模型 CodeGeeX (KDD’23) 的第二代模型。不同于一代 CodeGeeX（完全在国产华为昇腾芯片平台训练） ，CodeGeeX2 是基于 ChatGLM2 架构加入代码预训练实现，得益于 ChatGLM2 的更优性能，CodeGeeX2 在多项指标上取得性能提升（+107% > CodeGeeX；仅 60 亿参数即超过 150 亿参数的 StarCoder-15B 近 10%），更多特性包括：

• 更强大的代码能力：基于 ChatGLM2-6B 基座语言模型，CodeGeeX2-6B 进一步经过了 600B 代码数据预训练，相比一代模型，在代码能力上全面提升，HumanEval-X 评测集的六种编程语言均大幅提升 (Python +57%, C++ +71%, Java +54%, JavaScript +83%, Go +56%, Rust +321%)，在 Python 上达到 35.9% 的 Pass@1 一次通过率，超越规模更大的 StarCoder-15B。
• 更优秀的模型特性：继承 ChatGLM2-6B 模型特性，CodeGeeX2-6B 更好支持中英文输入，支持最大 8192 序列长度，推理速度较一代 CodeGeeX-13B 大幅提升，量化后仅需 6GB 显存即可运行，支持轻量级本地化部署。
  更全面的 AI 编程助手：CodeGeeX 插件（VS Code, Jetbrains）后端升级，支持超过 100 种编程语言，新增上下文补全、跨文件补全等实用功能。结合 Ask CodeGeeX 交互式 AI 编程助手，支持中英文对话解决各种编程问题，包括且不限于代码解释、代码翻译、代码纠错、文档生成等，帮助程序员更高效开发。
• 更开放的协议：CodeGeeX2-6B 权重对学术研究完全开放，填写登记表申请商业使用。

- AWS CodeWhisperer

4月18日，亚马逊云科技宣布，实时AI编程助手Amazon CodeWhisperer正式可用，同时推出的还有供所有开发人员免费使用的个人版（CodeWhisperer Individual）。CodeWhisperer帮助开发者基于注释生成代码，追踪开源参考，扫描查找漏洞。此外，还可以帮助开发者创建代码胜任如下场景，比如常规、耗时的无差别任务，或是在使用不熟悉的API或SDK时构建示例代码，亦或要正确高效地使用亚马逊云科技API操作，还有其他场景比如编写读写文件、处理图像、编写单元测试等代码。

Amazon CodeWhisperer 为多种编程语言提供基于人工智能（AI）的代码建议，包括 Python、Java、JavaScript、TypeScript、C#、Go、Rust、PHP、Ruby、Kotlin、C、C++、Shell 脚本、SQL 和 Scala。您可以使用来自多个 IDE 的服务，包括 JetBrains IDE（IntelliJ IDEA、PyCharm、WebStorm 和 Rider）、Visual Studio（VS）Code、AWS Cloud9、AWS Lambda 控制台、JupyterLab 和 Amazon SageMaker Studio。

- Poe

国内可注册，使用方便，免费，有针对代码和程序专门优化的gpt-3.5-turbo模型 Assistant
当然还有其他的模型，包含一些限额和付费的，你也可以创建自己的bot

• Claude-2-100k
• Claude-instant-100k
• gpt-4-32k（Powered by gpt-4-32k. Since this is a beta model, the usage limit is subject to change.）
• Google-PaLM（Powered by Google's PaLM 2 chat-bison-001 model）

CodeGeeX2和AWS CodeWhisperer都提供了VSCode的插件可以使用，体验下来，CodeGeeX2支持的文件类型更多一点，而且反应也还算迅速，AWS CodeWhisperer只支持了主流开发语言，对于如dart、Vue、markdown、CSS等非主流编程语言支持效果很差，目前两者都免费，体验下来CodeGeeX2更不错一点，根据注释生成代码，给现有代码生成注释，代码翻译，纠错等功能也比较实用

Some thoughts🤔

看来云上开发将来一定是主流趋势，程序员再也不用因为换设备，换环境而苦恼，集成式一体开发环境，开箱即用，开发随时可中断，可恢复，不受限于设备，环境，地点影响
而且集成AI代码助手，各大厂家都在发力了，微软的GitHub Copilot,亚马逊的CodeWhisperer，还有即将到来的Google的Project IDX 方便快捷的开发，将大量繁琐重复的工作交给AI来执行

That's It

参考资料：

• OSC 开源社区（ID：oschina2013)
• https://developers.googleblog.com/2023/08/introducing-project-idx-experiment-to-improve-full-stack-multiplatform-app-development.html
• https://codeandhack.com/google-codey/

提示

之前介绍了ZSH的安装和使用，这次把最终成果介绍一下，就是ZSH + iTerm2 + Pure

前置工作：安装ZSH，请参照之前的文章👉zsh安装

目录

先看效果图

安装pure

👉官方文档

可以使用 npm 或手动安装。需要 Git 2.15.2+ 和 ZSH 5.2+。已知旧版本的 ZSH 可以工作，但不推荐使用。

如果是手动安装的，将克隆的 repo 的路径添加到 $HOME/.zshrc 中的 $fpath 。

# .zshrc
fpath+=($HOME/.zsh/pure)

将以下内容复制到 .zshrc文件中

autoload -U promptinit; promptinit
prompt pure

在 .zshrc 中设置 ZSH_THEME="" 以禁用 oh-my-zsh 主题。

到这里就基本完成了，如果要基于pure做详细定制，请参考文档

iTerm2

👉戳这里下载 官方下载地址

效果图我自用的配置文件在这里 👉 链接 密码:74aq

1.主题配置

访问iTerm2主题网站👉iTerm2-Color-Schemes

可以下载zip包并解压到本地，进入解压缩的文件目录，找到schemes文件夹，里边全是主题配置，可以对照github上的效果图来选择

2. 标签页配色

标签配色默认为黑色，不能与操作页面保持统一

打开iTerm2，打开Preferences配置界面，Appearence -> General，将 Theme 改为 Minimal

3. 设置 Status bar

iTerm2 提供了不少的 Status bar，开启后我们可以在终端的最上方非常方便的实时查看本机的一些信息。

打开iTerm2，打开Preferences配置界面，Profiles -> session-> 勾选 Status bar enable-> configure Status bar，选择自己想要的展示内容即可。向下托动放入Active Components 中即可,我这里只选了CPU、内存、网络

4. 光标选择

iterm提供了三种光标可供选择：_、|、[]。

打开iTerm2，打开Preferences配置界面，Profiles -> text-> cursor，选择自己想要的光标即可。

5.配置SSH快速连接

#首先在/Users目录下按照如下命令创建sh脚本
cd /Users/

#创建iterm文件夹
mkdir iterm
 
#进入iterm文件夹
cd iterm

#创建myserver.sh文件
touch myserver.sh

#编辑myserver.sh文件
vi myserver.sh

如果出现没有权限，就命令前面加上sudo

键盘输入i编辑文件，插入以下内容：

#!/usr/bin/expect
set timeout 30
spawn ssh -p [lindex $argv 0] [lindex $argv 1]@[lindex $argv 2]
expect {
        "(yes/no)?"
        {send "yes\n";exp_continue}
        "password:"
        {send "[lindex $argv 3]\n"}
}
interact

myserver.sh文件中变量解释：

[lindex $argv 0]：端口号
[lindex $argv 1]：服务器用户名
[lindex $argv 2]：服务器IP地址
[lindex $argv 3]：服务器密码

插入完成后键盘esc 然后输入:wq退出，接下来给文件赋权

chmod 777 myserver.sh
打开iTerm2，打开Preferences配置界面，Profiles -> general，左下角点击+号，新建profile，参考下面图片在对应位置输入内容即可。

Name:根据需求输入，通常选择标识性较强的内容便于区分，例如服务器的IP地址

Command：这里选择login Shell

Send text at start ：填写格式形如A B C D E这样，每一个部分之间用空格隔开，根据自己实际情况填写,下面是对每一部分内容的解释

结语

当然这里只介绍一部分，还有很多高级玩法，需要用到的时候自己去研究一下了

This document is not completed and will be updated anytime.

Catagory

• Catagory
• Unix
• Unix-like
  • Single UNIX Specification
  • Apple iOS
  • XNU Kernel
• Linux
  • Linux Kernel
  • GNU Project
  • Android
  • Android Kernel
  • Android ROM
  • Chrome OS
  • Chromium OS

MacOS 自带的 bash 作为几乎所有 Linux 发行版的默认终端，正常使用时没什么问题的

这里介绍一个更强大的终端神器

目录

背景介绍

在 unix 内核的操作系统中,当然现在衍生出好多分支,linux ,OS X 都算.

shell 就算和上面这些系统内核指令打交道的一座桥梁,我们通过键盘输入一种自己容易记忆识别的符号标识(shell 命令)

然后 shell 解析这种命令再反馈给内核去执行一系列操作.

zsh 和 shell 有什么关系呢?

其实 zsh 也是一种 shell ,但是并不是我们系统默认的 shell ,unix 衍生系统的默认 shell 都是 bash。

查看已安装 shell
查看 Mac 上已有的 shell,一共有 6 种

提示

最近在做SEO，因为链接没有做同步，需要清除之前旧站的链接，重新提交，让搜索引擎尽快索引，google search console的已经基本做差不多了

bing最近因为 New Bing 的原因也用的比较多，所以做了一些工作，很方便的是，它可以直接同步GSC的站点数据，不过就只是域数据，URL还是要自己提交

为了尽快索引，只提交sitemap是不够的，还需要调用API手动提交URL

官方示例

python代码

解读

在上面的脚本中，我们首先指定了Sitemap的URL。然后，我们使用Python中的requests库获取Sitemap的内容，并使用Python中的xml.etree.ElementTree库解析Sitemap中的URL。

接下来，我们使用Bing API提交URL。我们首先指定Bing API的密钥和API URL，并设置请求头。然后，我们将Sitemap中提取的URL列表作为数据，将其作为JSON格式发送到Bing API。最后，我们检查响应的状态码，以确保URL已成功提交。

注意：在使用Bing API提交URL之前，需要先注册Bing Webmaster工具，并获取Bing API密钥。还需要将"https://example.com"替换为自己的站点URL。

API密钥生成↘️

1. 访问Bing Webmaster Tools
2. 右上角设置

相关信息

这是一个利用GitHub Actions自动触发的工作流进行解析更新的url并推送到搜索引擎的python脚本,除了之前介绍过的bing api之外，还增加了百度和Google的相关内容

关于GitHub Actions的介绍可以看这里👉GitHub Actions

关于GitHub Actions的配置可以看这里👉如何利用GitHub Actions推送URL到搜索引擎

流程图

Rust 最早是 Mozilla 雇员 Graydon Hoare 的个人项目。从 2009 年开始，得到了 Mozilla 研究院的资助，2010 年项目对外公布，2010 ～ 2011 年间实现自举。自此以后，Rust 在部分重构 -> 崩溃的边缘反复横跳（历程极其艰辛），终于，在 2015 年 5 月 15 日发布 1.0 版。

在紧锣密鼓的开发过程中，Rust 建立了一个强大且活跃的社区，形成一整套完善稳定的项目贡献机制（Rust 能够飞速发展，与这一点密不可分）。Rust 现在由 Rust 项目开发者社区 维护， Rust 基金会赞助支持。

大家可能疑惑 Rust 为啥用了这么久才到 1.0 版本？与之相比，Go 语言 2009 年发布，却在 2012 年仅用 3 年就发布了 1.0 版本。

• 首先，Rust 语言特性较为复杂，所以需要全盘考虑的问题非常多；
• 其次，Rust 当时的参与者太多，七嘴八舌的声音很多，众口难调，而 Rust 开发团队又非常重视社区的意见；
• 最后，一旦 1.0 快速发布，那绝大部分语言特性就无法再被修改，对于有完美强迫症的 Rust 开发者团队来说，某种程度上的不完美是不可接受的。

因此，Rust 语言用了足足 6 年时间，才发布了尽善尽美的 1.0 版本。

为何又来一门新语言？

简而言之，因为还缺一门无 GC 且无需手动内存管理、性能高、工程性强、语言级安全性以及能同时得到工程派和学院派认可的语言，而 Rust 就是这样的语言。你也可以回忆下熟悉的语言，看是不是有另外一门可以同时满足这些需求：)

至于 Rust 最为人诟病的点，那也就一个：学习曲线陡峭。不过当语言生态起来后，这都不算问题。

缓解内卷

有人说 Rust 作为新语言会增加内卷，其实恰恰相反，Rust 可以缓解内卷。为何不说 C++ 内卷，而说 Java、Python、JS 内卷？不就是后几个相对简单、上手容易嘛？而 Rust 怎么看也是 C++ 级别的上手难度。

其实从我内心不可告人的角度出发，并不希望 Rust 大众化，因为这样可以保饭碗、保薪资，还能拥有行业内的地位。但是从对 Rust 的喜爱角度出发，我还是希望能卷一些。不过，目前来看真的卷不动，现在全世界范围内 Rust 的需求都大于供给，特别是优秀的 Rust 程序员更是难寻。

与 Go 语言相比，成为一名优秀的 Rust 程序员所需的门槛高得多，例如融汇贯通 Rust 语言各种中高级特性、闭着眼睛趟过各种坑、不用回忆无需查找就能立刻写出最合适的包/模块/方法、性能/安全/工程性的权衡选择信手拈来、深层性能优化易如反掌、异步编程小菜一碟，更别说 Rust 之外的操作系统、网络、算法等等相关知识。

所以，Rust 可以缓解内卷，而不是增加内卷。可以说是程序员的福音，不再是被随意替换的螺丝钉。

运行效率

得益于各种零开销抽象、深入到底层的优化潜力、优质的标准库和第三方库实现，Rust 具备非常优秀的性能，和 C、C++ 是 一个级别。

同时 Rust 有一个极大的优点：只要按照正确的方式使用 Rust，无需性能优化，就能有非常优秀的表现，不可谓不惊艳。

现在有不少用 Rust 重写的工具、平台都超过了原来用 C、C++ 实现的版本，将老前辈拍死在沙滩上，俨然成为一种潮流～～

开发效率

Rust 的开发效率可以用先抑后扬来形容。在最初上手写项目时，你的开发速度将显著慢于 Go、Java 等语言，不过，一旦开始熟悉标准库、熟悉生命周期和所有权的常用解决方法，开发效率将大幅提升，甚至当形成肌肉记忆后，开发效率将不会慢于这些语言，而且原生就能写出高质量、安全、高效的代码，可以说中高级 Rust 程序员就是高效程序员的代名词。

开源

目前 Rust 的主战场是在开源上，Go 的成功也证明了农村包围城市( 开源包围商业 )的可行性。

• UI 层开发，Rust 的 WASM 发展的如火如荼，隐隐有王者风范，在 JS 的基础设施领域，Rust 也是如鱼得水，例如 swc、 deno 等。同时 nextjs 也是押宝 Rust，可以说 Rust 在前端的成功完全是无心插柳柳成荫。
• 基础设施层、数据库、搜索引擎、网络设施、云原生等都在出现 Rust 的身影，而且还不少。
• 系统开发，目前 Linux 已经将 Rust 语言纳入内核，是继 C 语言后第二门支持内核开发的语言，不过刚开始将主要支持驱动开发。
• 系统工具，现在最流行的就是用 Rust 重写之前 C、C++ 写的一票系统工具，还都获得了挺高的关注和很好的效果，例如 sd, exa, ripgrep, fd, bat 等。
• 操作系统，正在使用 Rust 开发的操作系统有好几个，其中最有名的可能就是谷歌的 Fuchsia，Rust 在其中扮演非常重要的角色。
• 区块链，如果 Rust 的份额说第二，应该没人敢稳说自己是第一吧？

类似的还有很多，我们就不一一列举。总之，现在有大量的项目正在被 Rust 重写，同时还有海量的项目在等待被重写，这些都是赚取github 星星和认可的好机会。在其它语言杀成一片红海时，Rust 还留了一大片蓝海等待大家的探索！

相比其他语言 Rust 的优势

由于篇幅有限，我们这里不会讲述详细的对比，就是简单介绍下 Rust 的优势，并不是说 Rust 优于这些语言，大家轻喷：)

Go

Rust 语言表达能力更强，性能更高。同时线程安全方面 Rust 也更强，不容易写出错误的代码。包管理 Rust 也更好，Go 虽然在 1.10 版本后提供了包管理，但是目前还比不上 Rust 。

C++

Rust 与 C++ 的性能旗鼓相当，但是在安全性方面 Rust 会更优，特别是使用第三方库时，Rust 的严格要求会让三方库的质量明显高很多。

语言本身的学习，Rust 的前中期学习曲线会更陡峭，但是在实际的项目开发过程中，C++ 会更难，代码也更难以维护。

Java

除了极少数纯粹的数字计算性能，Rust 的性能全面领先于 Java 。同时 Rust 占用内存小的多，因此实现同等规模的服务，Rust 所需的硬件成本会显著降低。

Python

性能自然是 Rust 完胜，同时 Rust 对运行环境要求较低，这两点差不多就足够抉择了。不过 Python 和 Rust 的彼此适用面其实也不太冲突。

使用现状

• AWS 从 2017 年开始就用 Rust 实现了无服务器计算平台： AWS Lambda 和 AWS Fargate，并且用 Rust 重写了 Bottlerocket OS 和 AWS Nitro 系统，这两个是弹性计算云 (EC2) 的重要服务
• Cloudflare 是 Rust 的重度用户，DNS、无服务计算、网络包监控等基础设施都与 Rust 密不可分
• Dropbox 的底层存储服务完全由 Rust 重写，达到了数万 PB 的规模
• Google 除了在安卓系统的部分模块中使用 Rust 外，还在它最新的操作系统 Fuchsia 中重度使用 Rust
• Facebook 使用 Rust 来增强自己的网页端、移动端和 API 服务的性能，同时还写了 Hack 编程语言的虚拟机
• Microsoft 使用 Rust 为 Azure 平台提供一些组件，其中包括 IoT 的核心服务
• GitHub 和 npmjs.com，使用 Rust 提供高达每天 13 亿次的 npm 包下载
• Rust 目前已经成为全世界区块链平台的首选开发语言
• TiDB，国内最有名的开源分布式数据库

尤其值得一提的是，AWS 实际上在押宝 Rust，内部对 Rust 的使用已经上升到头等公民 first-class 的地位。

Rust 语言版本更新

与其它语言相比，Rust 的更新迭代较为频繁（得益于精心设计过的发布流程以及 Rust 语言开发者团队的严格管理）：

• 每 6 周发布一个迭代版本
• 2-3 年发布一个新的大版本，例如 Rust 2018 edition，Rust 2021 edition

好处在于，可以满足不同的用户群体的需求：

• 对于活跃的 Rust 用户，他们总是能很快获取到新的语言内容，毕竟，尝鲜是技术爱好者的共同特点：)
• 对于一般的用户，edition 大版本的发布会告诉他们：Rust 语言相比上次大版本发布，有了重大的改进，值得一看
• 对于 Rust 语言开发者，可以让他们的工作成果更快的被世人所知，不必锦衣夜行

总结

连续 6 年最受欢迎的语言当然不是浪得虚名。 无 GC、效率高、工程性强、强安全性以及能同时得到工程派和学院派认可，这些令 Rust 拥有了自己的特色和生存空间。社区的友善，生态的快速发展，大公司的重仓跟进，一切的一切都在说明 Rust 的璀璨未来。

当然，语言毕竟只是工具，我们不能神话它，但是可以给它一个机会，也许，你最终能收获自己的真爱 ：)

相信大家听了这么多 Rust 的优点，已经迫不及待想要开始学习旅程，那么容我引用一句 CS（Counter-Strike：反恐精英） 的经典台词：Ok, Let's Rust.

引自：Rust语言圣经(Rust Course)

当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。

在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。

提示

如果想在代码 Push 后，或者 Merge request 后，自动部署，可以采用多种方案，以下介绍两种

不知道如何配置的同学，可以参考一下

1. 通过 Jenkins 提供的【触发远程构建】

1.1. 勾选【触发远程构建】并填入 token

1.2. 配置 API token

1. 打开 Jenkins 控制台。

2. 在顶部导航栏中，点击您的用户名，然后选择 "Configure" 选项。

3. 在配置页面中，向下滚动，找到 "API Token" 部分。

4. 如果您之前没有生成过 API Token，则点击 "Add new Token" 或 "Generate Token" 按钮。

5. 在生成或更改 Token 的过程中，您可能需要提供您的 Jenkins 用户密码进行身份验证。

6. 生成或更改成功后，您将看到新生成的 Token 值。请将其复制并妥善保存，因为在以后的访问中，您将无法再查看该 Token 的值。

1.3. 如何调用 Url

Jenkins 提供了便捷的远程触发功能，但是需要配置一个 token，然后在 push 后，通过 post 请求，调用 Jenkins 的 url 即可触发构建

调用 url 可以使用 python 脚本，或者 curl 命令，一般配合 git 提交，使用 curl 命令居多

下面以 GitLab CI/CD 为例进行举例

GitLab CI/CD 是一个简洁好用的的持续集成/持续交付的框架。通过为你的项目配置一个或者多个 GitLab Runner，然后撰写一个 .gitlab-ci.yml，你就可以很方便地利用 GitLab CI/CD 来为你的项目引入持续集成/交付的功能。比较类似之前介绍过的GitHubAction

GitLab CI/CD 是通过 GitLab Runner 来执行的

GitLab CI/CD 将按照 Stage 定义的顺序来执行，任何一个 Stage 失败，整个 CI/CD 将失败

每一个 Stage 可以被若干个 Job 关联。Stage 在执行的时候，关联到这个 Stage 的所有 Job 都将被执行，不过不同的 Job 可能是并行执行的。

每个 Job 在执行的时候，会先按照缓存策略加载缓存数据，然后按照顺序依次运行 before_script、script 和 after_script 中配置的脚本，运行完毕以后，会将生成的数据保存到缓存中。

1.4. 编写.gitlab-ci.yml

stages:
  - deploy

deploy_to_hyjk_open-x:
  stage: deploy
  only:
    - master
  script:
    - ./deploy.sh

大意是当 master 分支 deploy 时执行 ./deploy.sh 脚本
这里 script 调用了一个 shell 脚本，因为在 yml 文件中写脚本比较麻烦，个人比较习惯在 sh 文件中写脚本，然后在 yml 文件中调用这个脚本即可

1.5. deploy.sh

由于新版本的 Jenkins 安全机制，每次调用 API 前都需要先调用获取获取 CSRF crumb 值的接口

下面脚本演示了，如何先获取 crumb 的值，并在之后触发远程构建 API 的时候，携带这个值

#!/bin/bash

# Jenkins 服务器信息
JENKINS_URL="http://192.168.155.57:8080/"
JENKINS_USERNAME="admin"
JENKINS_API_TOKEN="11abf441f4db6e341ae65b660f74de6e02"

# 获取 CSRF crumb 值
CRUMB=$(curl -s -u "$JENKINS_USERNAME:$JENKINS_API_TOKEN" "$JENKINS_URL/crumbIssuer/api/xml?xpath=concat(//crumbRequestField,\":\",//crumb)")

# 提取 crumb 值
CRUMB_VALUE=$(echo "$CRUMB" | awk -F':' '{print $2}')

# 执行 Jenkins 远程构建
curl -X POST "$JENKINS_URL/job/projectName/build?token=xZ7Y3n9A" \
  --user "$JENKINS_USERNAME:$JENKINS_API_TOKEN" \
  --header "Jenkins-Crumb: $CRUMB_VALUE"

2. 通过 GitLab 的 webhook 触发远程构建

使用 gitlab 的 webhook 配合 Jenkins 实现自动化部署。
Jenkins 需要安装 GitLab Plugin 插件，然后配置 webhook 即可。

2.1. 勾选插件选项

2.2. 选择配置

插件有很多配置项，这里我们常用的就是过滤分支，可以选择，有以下选项

• Include
• Exclude
• 正则表达式
• tag

2.3. 将生成的 url 和 token 填入 GitLab 中

可以选择触发的 events

2.4. 查看运行结果

1. 前言

嘿~
🍰🍰🍰 播放器有了，撒花✿✿ヽ(°▽°)ノ✿🎉🎉🎉

文档👉🏻戳这里文档

介绍

借鉴了vuepress-plugin-sbaudio和vuepress-plugin-meting 在此表示感谢

借鉴MetingJS解析和使用APlayer作为播放组件

安装很方便

使用也很方便

plugins: [
    metingPlugin({
      metingOptions: {
        global:true, // 开启关闭全局播放器
        server: "tencent",
        api: "https://api.injahow.cn/meting/?server=:server&type=:type&id=:id&auth=:auth&r=:r",
        type: "playlist",
        mid: "851947617",
      },
    }),
];

可作为组件引入

GitHub Actions 是什么？

Github Actions 是 Github 官方出的持续集成服务, 挺早之前就推出了。类似的还有如微软的DevOps、GitLab CI、Circle CI、Travis CI等等。大家知道，持续集成由很多操作组成，比如抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。GitHub 把这些操作就称为 actions。

很多操作在不同项目里面是类似的，完全可以共享。GitHub 注意到了这一点，想出了一个很妙的点子，允许开发者把每个操作写成独立的脚本文件，存放到代码仓库，使得其他开发者可以引用。

如果你需要某个 action，不必自己写复杂的脚本，直接引用他人写好的 action 即可，整个持续集成过程，就变成了一个 actions 的组合。这就是 GitHub Actions 最特别的地方。

什么是CI/CD？

What is CI/CD? (redhat.com)

字面意思就是持续集成Continuous Intergation/持续分发Continuous Delivery持续部署Continuous Deployment，网上有太多同质的解释都太过于晦涩，

提到CI/CD就离不开一个词叫流水线。流水线上每个人的工作是分工明确的，而且工程是有先后顺序，就像造一台车，先造零件，然后组装、喷涂、内饰最后还要测试。软件开发同样如此，有前期的产品设计，UI设计、单元的开发，产品的测试，优化迭代等都由不同的人负责。

生成 SSH 密钥对

如果您还没有 SSH 密钥对，请首先生成一对密钥。在终端中执行以下命令：

ssh-keygen -t rsa -C "your.email@example.com" -b 4096

这将生成一个 RSA 类型的密钥对，并将私钥保存在 ~/.ssh/id_rsa，公钥保存在 ~/.ssh/id_rsa.pub。

复制公钥内容

打开公钥文件 ~/.ssh/id_rsa.pub，将其中的内容复制到剪贴板。您可以使用以下命令来完成：

macOS:

pbcopy < ~/.ssh/id_rsa.pub

GNU/Linux (requires the xclip package):

xclip -sel clip < ~/.ssh/id_rsa.pub

Windows Command Line:

type %userprofile%\.ssh\id_rsa.pub | clip

Git Bash on Windows / Windows PowerShell:

cat ~/.ssh/id_rsa.pub | clip

将您的SSH密钥添加到GitLab。

1. 登录到 GitLab

2. 打开您的 GitLab 帐户，在右上角点击个人头像，选择设置

3. 在左侧导航到 SSH 密钥设置

4. 在 "SSH Keys" 页面，粘贴之前复制的公钥内容到 "Key" 字段中，并为该密钥添加一个可识别的标题（如 "My SSH Key"）。然后点击 "Add Key" 按钮。

验证 SSH 密钥

GitLab 将验证并添加您提供的 SSH 密钥。如果一切顺利，您将在页面上看到成功的消息。

测试 SSH 连接

为了确保 SSH 密钥配置正确，您可以在终端中执行以下命令进行测试：

ssh -T git@gitlab.com

如果配置正确，您将看到与 GitLab 相关的欢迎消息。
现在，您已经成功在 GitLab 中配置了 SSH 密钥。这将允许您通过 SSH 协议进行与 GitLab 之间的安全通信，例如进行代码的克隆、推送和拉取操作。

ssh-add --apple-use-keychain ~/.ssh/id_rsa &> /dev/null

何为进程？

程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程

每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

何为线程？

有了进程后，就可以运行程序的代码了。

运行代码的「人」称之为「线程」。

一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。

如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。

浏览器有哪些进程和线程？

浏览器是一个多进程多线程的应用程序

浏览器内部工作极其复杂。

为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。

可以在浏览器的任务管理器中查看当前的所有进程

其中，最主要的进程有：

1. 浏览器进程

   主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。

2. 网络进程

   负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。

3. 渲染进程（本节课重点讲解的进程）

   渲染进程启动后，会开启一个渲染主线程，主线程负责执行 HTML、CSS、JS 代码。

   默认情况下，浏览器会为每个标签页开启一个新的渲染进程，以保证不同的标签页之间不相互影响。

   将来该默认模式可能会有所改变，有兴趣的同学可参见chrome官方说明文档

渲染主线程是如何工作的？

渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：

• 解析 HTML
• 解析 CSS
• 计算样式
• 布局
• 处理图层
• 每秒把页面画 60 次
• 执行全局 JS 代码
• 执行事件处理函数
• 执行计时器的回调函数
• ......

思考题：为什么渲染进程不适用多个线程来处理这些事情？

要处理这么多的任务，主线程遇到了一个前所未有的难题：如何调度任务？

比如：

• 我正在执行一个 JS 函数，执行到一半的时候用户点击了按钮，我该立即去执行点击事件的处理函数吗？
• 我正在执行一个 JS 函数，执行到一半的时候某个计时器到达了时间，我该立即去执行它的回调吗？
• 浏览器进程通知我“用户点击了按钮”，与此同时，某个计时器也到达了时间，我应该处理哪一个呢？
• ......

渲染主线程想出了一个绝妙的主意来处理这个问题：排队

1. 在最开始的时候，渲染主线程会进入一个无限循环
2. 每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。
3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务

这样一来，就可以让每个任务有条不紊的、持续的进行下去了。

整个过程，被称之为事件循环（消息循环）

若干解释

何为异步？

代码在执行过程中，会遇到一些无法立即处理的任务，比如：

• 计时完成后需要执行的任务 —— setTimeout、setInterval
• 网络通信完成后需要执行的任务 -- XHR、Fetch
• 用户操作后需要执行的任务 -- addEventListener

如果让渲染主线程等待这些任务的时机达到，就会导致主线程长期处于「阻塞」的状态，从而导致浏览器「卡死」

渲染主线程承担着极其重要的工作，无论如何都不能阻塞！

因此，浏览器选择异步来解决这个问题

使用异步的方式，渲染主线程永不阻塞

面试题：如何理解 JS 的异步？

参考答案：

JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。

而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。

如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。

所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。

在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

JS为何会阻碍渲染？

先看代码

<h1>Mr.Yuan is awesome!</h1>
<button>change</button>
<script>
  var h1 = document.querySelector('h1');
  var btn = document.querySelector('button');

  // 死循环指定的时间
  function delay(duration) {
    var start = Date.now();
    while (Date.now() - start < duration) {}
  }

  btn.onclick = function () {
    h1.textContent = '袁老师很帅！';
    delay(3000);
  };
</script>

点击按钮后，会发生什么呢？

任务有优先级吗？

任务没有优先级，在消息队列中先进先出

但消息队列是有优先级的

根据 W3C 的最新解释:

• 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。
  在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
• 浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行
  https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint

随着浏览器的复杂度急剧提升，W3C 不再使用宏队列的说法

在目前 chrome 的实现中，至少包含了下面的队列：

• 延时队列：用于存放计时器到达后的回调任务，优先级「中」
• 交互队列：用于存放用户操作后产生的事件处理任务，优先级「高」
• 微队列：用户存放需要最快执行的任务，优先级「最高」

// 立即把一个函数添加到微队列
Promise.resolve().then(函数)

浏览器还有很多其他的队列，由于和我们开发关系不大，不作考虑

面试题：阐述一下 JS 的事件循环

参考答案：

事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。

在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。

过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。

根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

面试题：JS 中的计时器能做到精确计时吗？为什么？

参考答案：

不行，因为：

1. 计算机硬件没有原子钟，无法做到精确计时
2. 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差
3. 按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差
4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差

有的同学可能会讲，CSS属性我倒是知道，例如：

p{
  color : red;
}

上面的 CSS 代码中，p 是元素选择器，color 就是其中的一个 CSS 属性。

但是要说 CSS 属性的计算过程，还真的不是很清楚。

没关系，通过此篇文章，能够让你彻底明白什么是 CSS 属性的计算流程。

首先，不知道你有没有考虑过这样的一个问题，假设在 HTML 中有这么一段代码：

<body>
  <h1>这是一个h1标题</h1>
</body>

上面的代码也非常简单，就是在 body 中有一个 h1 标题而已，该 h1 标题呈现出来的外观是如下：

目前我们没有设置该 h1 的任何样式，但是却能看到该 h1 有一定的默认样式，例如有默认的字体大小、默认的颜色。

那么问题来了，我们这个 h1 元素上面除了有默认字体大小、默认颜色等属性以外，究竟还有哪些属性呢？

答案是**该元素上面会有 CSS 所有的属性。**你可以打开浏览器的开发者面板，选择【元素】，切换到【计算样式】，之后勾选【全部显示】，此时你就能看到在此 h1 上面所有 CSS 属性对应的值。

换句话说，我们所书写的任何一个 HTML 元素，实际上都有完整的一整套 CSS 样式。这一点往往是让初学者比较意外的，因为我们平时在书写 CSS 样式时，往往只会书写必要的部分，例如前面的：

p{
  color : red;
}

这往往会给我们造成一种错觉，认为该 p 元素上面就只有 color 属性。而真实的情况确是，任何一个 HTML 元素，都有一套完整的 CSS 样式，只不过你没有书写的样式，大概率可能会使用其默认值。例如上图中 h1 一个样式都没有设置，全部都用的默认值。

但是注意，我这里强调的是“大概率可能”，难道还有我们“没有设置值，但是不使用默认值”的情况么？

嗯，确实有的，所以我才强调你要了解“CSS 属性的计算过程”。

总的来讲，属性值的计算过程，分为如下这么 4 个步骤：

• 确定声明值
• 层叠冲突
• 使用继承
• 使用默认值

确定声明值

首先第一步，是确定声明值。所谓声明值就是作者自己所书写的 CSS 样式，例如前面的：

p{
  color : red;
}

这里我们声明了 p 元素为红色，那么就会应用此属性设置。

当然，除了作者样式表，一般浏览器还会存在“用户代理样式表”，简单来讲就是浏览器内置了一套样式表。

在上面的示例中，作者样式表中设置了 color 属性，而用户代理样式表（浏览器提供的样式表）中设置了诸如 display、margin-block-start、margin-block-end、margin-inline-start、margin-inline-end 等属性对应的值。

这些值目前来讲也没有什么冲突，因此最终就会应用这些属性值。

层叠冲突

在确定声明值时，可能出现一种情况，那就是声明的样式规则发生了冲突。

此时会进入解决层叠冲突的流程。而这一步又可以细分为下面这三个步骤：

• 比较源的重要性
• 比较优先级
• 比较次序

来来来，我们一步一步来看。

比较源的重要性

当不同的 CSS 样式来源拥有相同的声明时，此时就会根据样式表来源的重要性来确定应用哪一条样式规则。

那么问题来了，咱们的样式表的源究竟有几种呢？

整体来讲有三种来源：

• 浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称用户代理样式。
• 网页的作者可以定义文档的样式，这是最常见的样式表，称之为页面作者样式。
• 浏览器的用户，可以使用自定义样式表定制使用体验，称之为用户样式。

对应的重要性顺序依次为：页面作者样式 > 用户样式 > 用户代理样式

更详细的来源重要性比较，可以参阅 MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Cascade

我们来看一个示例。

例如现在有页面作者样式表和用户代理样式表中存在属性的冲突，那么会以作者样式表优先。

p{
  color : red;
  display: inline-block;
}

可以明显的看到，作者样式表和用户代理样式表中同时存在的 display 属性的设置，最终作者样式表干掉了用户代理样式表中冲突的属性。这就是第一步，根据不同源的重要性来决定应用哪一个源的样式。

比较优先级

那么接下来，如果是在在同一个源中有样式声明冲突怎么办呢？此时就会进行样式声明的优先级比较。

例如：

<div class="test">
  <h1>test</h1>
</div>

.test h1{
  font-size: 50px;
}

h1 {
  font-size: 20px;
}

在上面的代码中，同属于页面作者样式，源的重要性是相同的，此时会以选择器的权重来比较重要性。

很明显，上面的选择器的权重要大于下面的选择器，因此最终标题呈现为 50px。

可以看到，落败的作者样式在 Elements>Styles 中会被划掉。

有关选择器权重的计算方式，不清楚的同学，可以进入此传送门：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

比较次序

经历了上面两个步骤，大多数的样式声明能够被确定下来。但是还剩下最后一种情况，那就是样式声明既是同源，权重也相同。

此时就会进入第三个步骤，比较样式声明的次序。

举个例子：

h1 {
  font-size: 50px;
}

h1 {
  font-size: 20px;
}

在上面的代码中，同样都是页面作者样式，选择器的权重也相同，此时位于下面的样式声明会层叠掉上面的那一条样式声明，最终会应用 20px 这一条属性值。

至此，样式声明中存在冲突的所有情况，就全部被解决了。

使用继承

层叠冲突这一步完成后，解决了相同元素被声明了多条样式规则究竟应用哪一条样式规则的问题。

那么如果没有声明的属性呢？此时就使用默认值么？

No、No、No，别急，此时还有第三个步骤，那就是使用继承而来的值。

例如：

<div>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

div {
  color: red;
}

在上面的代码中，我们针对 div 设置了 color 属性值为红色，而针对 p 元素我们没有声明任何的属性，但是由于 color 是可以继承的，因此 p 元素从最近的 div 身上继承到了 color 属性的值。

这里有两个点需要同学们注意一下。

首先第一个是我强调了是最近的 div 元素，看下面的例子：

<div class="test">
  <div>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

div {
  color: red;
}
.test{
  color: blue;
}

因为这里并不涉及到选中 p 元素声明 color 值，而是从父元素上面继承到 color 对应的值，因此这里是谁近就听谁的，初学者往往会产生混淆，又去比较权重，但是这里根本不会涉及到权重比较，因为压根儿就没有选中到 p 元素。

第二个就是哪些属性能够继承？

关于这一点的话，大家可以在 MDN 上面很轻松的查阅到。例如我们以 text-align 为例，如下图所示：

使用默认值

好了，目前走到这一步，如果属性值都还不能确定下来，那么就只能是使用默认值了。

如下图所示：

前面我们也说过，一个 HTML 元素要在浏览器中渲染出来，必须具备所有的 CSS 属性值，但是绝大部分我们是不会去设置的，用户代理样式表里面也不会去设置，也无法从继承拿到，因此最终都是用默认值。

好了，这就是关于 CSS 属性计算过程的所有知识了。

一道面试题

好了，学习了今天的内容，让我来用一道面试题测试测试大家的理解程度。

下面的代码，最终渲染出来的效果，a 元素是什么颜色？p 元素又是什么颜色？

<div>
  <a href="">test</a>
  <p>test</p>
</div>

div {
  color: red;
}

大家能说出为什么会呈现这样的结果么？

解答如下：

实际上原因很简单，因为 a 元素在用户代理样式表中已经设置了 color 属性对应的值，因此会应用此声明值。而在 p 元素中无论是作者样式表还是用户代理样式表，都没有对此属性进行声明，然而由于 color 属性是可以继承的，因此最终 p 元素的 color 属性值通过继承来自于父元素。

你答对了么？-）

但是一说到 CSS 包含块，有的小伙伴就懵圈了，什么是包含块？好像从来没有听说过这玩意儿。

好吧，如果你对包含块的知识一无所知，那么系好安全带，咱们准备出发了。

包含块英语全称为containing block，实际上平时你在书写 CSS 时，大多数情况下你是感受不到它的存在，因此你不知道这个知识点也是一件很正常的事情。但是这玩意儿是确确实实存在的，在 CSS 规范中也是明确书写了的：

https://drafts.csswg.org/css2/#containing-block-details

并且，如果你不了解它的运作机制，有时就会出现一些你认为的莫名其妙的现象。

那么，这个包含块究竟说了什么内容呢？

说起来也简单，就是元素的尺寸和位置，会受它的包含块所影响。对于一些属性，例如 width, height, padding, margin，绝对定位元素的偏移值（比如 position 被设置为 absolute 或 fixed），当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。

来吧，少年，让我们从最简单的 case 开始看。

<body>
  <div class="container">
    <div class="item"></div>
  </div>
</body>

.container{
  width: 500px;
  height: 300px;
  background-color: skyblue;
}
.item{
  width: 50%;
  height: 50%;
  background-color: red;
}

请仔细阅读上面的代码，然后你认为 div.item 这个盒子的宽高是多少？

相信你能够很自信的回答这个简单的问题，div.item 盒子的 width 为 250px，height 为 150px。

这个答案确实是没有问题的，但是如果我追问你是怎么得到这个答案的，我猜不了解包含块的你大概率会说，因为它的父元素 div.container 的 width 为 500px，50% 就是 250px，height 为 300px，因此 50% 就是 150px。

这个答案实际上是不准确的。正确的答案应该是，div.item 的宽高是根据它的包含块来计算的，而这里包含块的大小，正是这个元素最近的祖先块元素的内容区。

因此正如我前面所说，很多时候你都感受不到包含块的存在。

包含块分为两种，一种是根元素（HTML 元素）所在的包含块，被称之为初始包含块（initial containing block）。对于浏览器而言，初始包含块的的大小等于视口 viewport 的大小，基点在画布的原点（视口左上角）。它是作为元素绝对定位和固定定位的参照物。

另外一种是对于非根元素，对于非根元素的包含块判定就有几种不同的情况了。大致可以分为如下几种：

• 如果元素的 positiion 是 relative 或 static ，那么包含块由离它最近的块容器（block container）的内容区域（content area）的边缘建立。
• 如果 position 属性是 fixed，那么包含块由视口建立。
• 如果元素使用了 absolute 定位，则包含块由它的最近的 position 的值不是 static （也就是值为fixed、absolute、relative 或 sticky）的祖先元素的内边距区的边缘组成。

前面两条实际上都还比较好理解，第三条往往是初学者容易比较忽视的，我们来看一个示例：

<body>
    <div class="container">
      <div class="item">
        <div class="item2"></div>
      </div>
    </div>
  </body>

.container {
  width: 500px;
  height: 300px;
  background-color: skyblue;
  position: relative;
}
.item {
  width: 300px;
  height: 150px;
  border: 5px solid;
  margin-left: 100px;
}
.item2 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 10px;
  top: 10px;
}

首先阅读上面的代码，然后你能在脑海里面想出其大致的样子么？或者用笔和纸画一下也行。

公布正确答案：

怎么样？有没有和你所想象的对上？

其实原因也非常简单，根据上面的第三条规则，对于 div.item2 来讲，它的包含块应该是 div.container，而非 div.item。

如果你能把上面非根元素的包含块判定规则掌握，那么关于包含块的知识你就已经掌握 80% 了。

实际上对于非根元素来讲，包含块还有一种可能，那就是如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：

• transform 或 perspective 的值不是 none
• will-change 的值是 transform 或 perspective
• filter 的值不是 none 或 will-change 的值是 filter(只在 Firefox 下生效).
• contain 的值是 paint (例如: contain: paint;)

我们还是来看一个示例：

<body>
  <div class="container">
    <div class="item">
      <div class="item2"></div>
    </div>
  </div>
</body>

.container {
  width: 500px;
  height: 300px;
  background-color: skyblue;
  position: relative;
}
.item {
  width: 300px;
  height: 150px;
  border: 5px solid;
  margin-left: 100px;
  transform: rotate(0deg); /* 新增代码 */
}
.item2 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 10px;
  top: 10px;
}

我们对于上面的代码只新增了一条声明，那就是 transform: rotate(0deg)，此时的渲染效果却发生了改变，如下图所示：

可以看到，此时对于 div.item2 来讲，包含块就变成了 div.item。

好了，到这里，关于包含块的知识就基本讲完了。

我们再把 CSS 规范中所举的例子来看一下。

<html>
  <head>
    <title>Illustration of containing blocks</title>
  </head>
  <body id="body">
    <div id="div1">
      <p id="p1">This is text in the first paragraph...</p>
      <p id="p2">
        This is text
        <em id="em1">
          in the
          <strong id="strong1">second</strong>
          paragraph.
        </em>
      </p>
    </div>
  </body>
</html>

上面是一段简单的 HTML 代码，在没有添加任何 CSS 代码的情况下，你能说出各自的包含块么？

对应的结果如下：

| 元素 | 包含块 |
|

Here comes Module!

随着网站逐渐变成「互联网应用程序」，嵌入网页的 JavaScript 代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试……我们不得不使用软件工程的方法，来管理网页的业务逻辑。

于是，JavaScript 的模块化成为迫切需求。在 ES6 Module 来临之前，JavaScript 社区提供了强大支持，尝试在现有的运行环境下，实现模块的效果。

1995 年，它作为网景浏览器（Netscape Navigator）的一部分首次发布，网景给这个新语言命名为 LiveScript。一年后，为了搭上当时媒体热炒 Java 的顺风车，临时改名为了 JavaScript （当然，Java 和 JavaScript 的关系，就和雷锋和雷锋塔一样 —— 并没有什么关系）

歪果仁的笑话怎么一点都不好笑

译者注：wikipedia 的 JavaScript 词条 更详细的叙述了这段历史

1996 年，网景将 JavaScript 提交给 ECMA International（欧洲计算机制造商协会） 进行标准化，并最终确定出新的语言标准，它就是 ECMAScript。自此，ECMAScript 成为所有 JavaScript 实现的基础，不过，由于 JavaScript 名字的历史原因和市场原因（很显然 ECMAScript 这个名字并不令人喜欢……），现实中我们只用 ECMAScript 称呼标准，平时都还是使用 JavaScript 来称呼这个语言。

术语（译者注）：

• 标准（Standard）： 用于定义与其他事物区别的一套规则
• 实现（Implementation）： 某个标准的具体实施/真实实践

不过，JavaScript 开发者们并不怎么在乎这些，因为在诞生之后的 15 年里，ECMAScript 并没有多少变化，而且现实中的很多实现都已经和标准大相径庭。其实在第一版的 ECMAScript 发布后，很快又跟进发布了两个版本，但是自从 1999 年 ECMAScript 3 发布后，十年内都没有任何改动被成功添加到官方规范里。取而代之的，是各大浏览器厂商们争先进行自己的语言拓展，web 开发者们别无选择只能去尝试并且支持这些 API。即使是在 2009 年 ECMAScript 5 发布之后，仍然用了数年这些新规范才得到了浏览器的广泛支持，可是大部分开发者还是写着 ECMAScript 3 风格的代码，并不觉得有必要去了解这些规范。

译者注：ECMAScript 第四版草案由于太过激进而被抛弃，Adobe 的 ActionScript 3.0 是 ECMAScript edition 4 的唯一实现（ Flash 差点就统一 Web 了）

到了 2012 年，事情突然开始有了转变。大家开始推动停止对旧版本 IE 浏览器的支持，用 ECMAScript 5 (ES5) 风格来编写代码也变得更加可行。与此同时，一个新的 ECMAScript 规范也开始启动。到了这时，大家开始逐渐习惯以对 ECMAScript 规范的版本支持程度来形容各种 JavaScript 实现。在正式被指名为 ECMAScript 第 6 版 (ES6) 之前，这个新的标准原本被称为 ES.Harmony（和谐）。2015 年，负责制定 ECMAScript 规范草案的委员会 TC39 决定将定义新标准的制度改为一年一次，这意味着每个新特性一旦被批准就可以添加，而不像以往一样，规范只有在整个草案完成，所有特性都没问题后才能被定稿。因此，ECMAScript 第 6 版在六月份公布之前，又被重命名为了 ECMAScript 2015（ES2015）

目前，仍然有很多新的 JavaScript 特性或语法正在提议中，包括 decorators（装饰者），async-await（async-await 异步编程模型） 和 static class properties（静态类属性）。它们通常被称为 ES7，ES2016 或者 ES.Next 的特性，不过实际上它们只能被称作提案或者说可能性，毕竟 ES2016 的规范还没有完成，有可能全部都会引入，也有可能一个都没有。TC39 把一个提案分为 4 个阶段，你可以在 Babel 的官网 上查看各个提案目前都在哪个阶段了。

所以，我们该如何使用这一大堆术语呢？下面的列表或许能帮助到你：

• ECMAScript：一个由 ECMA International 进行标准化，TC39 委员会进行监督的语言。通常用于指代标准本身。
• JavaScript：ECMAScript 标准的各种实现的最常用称呼。这个术语并不局限于某个特定版本的 ECMAScript 规范，并且可能被用于任何不同程度的任意版本的 ECMAScript 的实现。
• ECMAScript 5 (ES5)：ECMAScript 的第五版修订，于 2009 年完成标准化。这个规范在所有现代浏览器中都相当完全的实现了。
• ECMAScript 6 (ES6) / ECMAScript 2015 (ES2015)：ECMAScript 的第六版修订，于 2015 年完成标准化。这个标准被部分实现于大部分现代浏览器。可以查阅这张兼容性表来查看不同浏览器和工具的实现情况。
• ECMAScript 2016：预计的第七版 ECMAScript 修订，计划于明年夏季发布。这份规范具体将包含哪些特性还没有最终确定
• ECMAScript Proposals：被考虑加入未来版本 ECMAScript 标准的特性与语法提案，他们需要经历五个阶段：Strawman（稻草人），Proposal（提议），Draft（草案），Candidate（候选）以及 Finished （完成）。

在这整个 Blog 中，我将把目前的 ECMAScript 版本称作 ES6（因为这是大部分开发者最习以为常的），把明年的规范称作 ES2016（因为，与 ES6/ES2015 不同，这个名字将在整个标准化过程中沿用）并且将那些还没有成为 ECMAScript 定稿或草案的未来语言概念称为 ECMAScript 提案或者 JavaScript 提案。我将尽我所能在任何可能引起困惑的场合沿用这篇文章。

一些资源

• TC39 的 Github 仓库上可以看到所有目前公开的提案
• 如果你还不熟悉 ES6，Babel 有一个很不错的特性概览
• 如果你希望深入 ES6，这里有两本很不错的书： Axel Rauschmayer 的 Exploring ES6和 Nicholas Zakas 的 Understanding ECMAScript 6。Axel 的博客 2ality 也是很不错的 ES6 资源

来学 JavaScript 吧！

著作权声明

本文译自 ES5, ES6, ES2016, ES.Next: What's going on with JavaScript versioning?
译者 黄玄，首次发布于 Hux Blog，转载请保留以上链接

通过 js 判断 moblie 端和 pc 端进而加载不同的 css 或者 js

废话不多说，上代码

<script type="text/javascript">
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
// document.writeln("您的浏览设备为：");
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {

// alert("手机浏览！");


} else {

// alert("PC浏览！");
document.write("<script type='text/javascript' size='150' alpha='0.8' zIndex='-10' src='../js/dist/ribbon.js'><\/script>");
document.write("<script type='text/javascript' color='0,188,212' opacity='0.7' zIndex='-2' count='99' src='http://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js'><\/script>");
	}
}
browserRedirect();
</script>

需要注意的是字符转义和引号嵌套的问题

相关信息

永远不要过早优化，优化也有相应的代价

• 开发时间变长
• 开发成本增加
• 代码难以阅读
• 增加维护成本

何时优化，因地制宜，是一门艺术，尽量把优化的思想带入写代码的过程中

本文章的优化手段基于vue2

服务端渲染 SSR or 预渲染

客户端渲染：使用 JavaScript 框架进行页面渲染
服务端渲染：服务端将HTML文本组装好，并返回给浏览器，这个HTML文本被浏览器解析之后，不需要经过 JavaScript 脚本的执行，即可直接构建出希望的 DOM 树并展示到页面中，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

优点：

更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。对客户端渲染的页面来说，简直无能为力，因为返回的HTML是一个空壳，它需要执行 JavaScript 脚本之后才会渲染真正的页面。
用户将会更快速地看到完整渲染的页面

缺点:

为了实现服务端渲染，应用代码中需要兼容服务端和客户端两种运行情况
由于服务器增加了渲染HTML的需求，使得原本只需要输出静态资源文件的nodejs服务，新增了数据获取的IO和渲染HTML的CPU占用，
服务器渲染应用程序，需要处于 Node.js server 运行环境。

如何实现？

想要在服务器端渲染，我们需要做什么呢？那就是同构我们的项目，Vue.js 是构建客户端应用程序的框架，服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行

当运行在不同环境中时，我们的代码将不会完全相同，同构就是让一份代码，既可以在服务端中执行，也可以在客户端中执行，并且执行的效果都是一样的，都是完成这个html的组装，正确的显示页面。
对于同构应用来说，我们必须实现客户端与服务端的路由、模型组件、数据模型的共享。

服务器端渲染注意事项

为避免造成交叉请求状态污染，每个请求应该都是全新的、独立的应用程序实例。
由于没有动态更新，所有的生命周期钩子函数中，只有 beforeCreate 和 created 会在服务器端渲染(SSR)过程中被调用。
通用代码不可接受像 window 或 document，这种仅浏览器可用的全局变量
浏览器可能会更改的一些特殊的 HTML 结构，例如，浏览器会在

内部自动注入 ，然而，由于 Vue 生成的虚拟 DOM(virtual DOM) 不包含 ，所以会导致无法匹配。

使用key

对于通过循环生成的列表，应给每个列表项一个稳定且唯一的key，这有利于在列表变动时，尽量少的删除、新增、改动元素

使用冻结的对象

冻结的对象不会被响应化，如果对象很多，嵌套结构很深，遍历过程需要花费很多时间，如果对象不需要动态更改，可以使用冻结对象，如：商品列表等纯展示页面，并不会通过用户交互来更改

var obj = {a:1,b:2}
// 冻结对象
Object.freeze(obj)
// 尝试更改
obj.a = 3
console.log(obj)
// 打印
{a:1,b:2}
// 验证
Object.isFrozen(obj)
// 结果
<.true

vue在处理过程中，如果发现对象是冻结对象，就不会去遍历对象，不会变成响应式

下面是1000000个对象的加载过程

vue

冻结对象

可见vue把对象深度遍历成为响应式，对于大量结构复杂的数据来说，是很耗时间的

使用函数式组件

函数式组件，设置functional:true，函数式组件没有data，这以为它无状态（没有响应式数据）

，也没用实例（没有this上下文），所以组件树中不存在函数式组件，一个函数式组件就像这样

Vue.component('my-component', {
  functional: true,
  // Props 是可选的
  props: {
    // ...
  },
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
    // ...
  }
})

注意：在 2.3.0 之前的版本中，如果一个函数式组件想要接收 prop，则 props 选项是必须的。在 2.3.0 或以上的版本中，你可以省略 props 选项，所有组件上的 attribute 都会被自动隐式解析为 prop。

当使用函数式组件时，该引用将会是 HTMLElement，因为他们是无状态的也是无实例的。

在 2.5.0 及以上版本中，如果你使用了单文件组件，那么基于模板的函数式组件可以这样声明：

<template functional>
</template>

组件需要的一切都是通过 context 参数传递，它是一个包括如下字段的对象：

• props：提供所有 prop 的对象
• children：VNode 子节点的数组
• slots：一个函数，返回了包含所有插槽的对象
• scopedSlots：(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
• data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件
• parent：对父组件的引用
• listeners：(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
• injections：(2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的 property。

在添加 functional: true 之后，需要更新我们的锚点标题组件的渲染函数，为其增加 context 参数，并将 this.$slots.default 更新为 context.children，然后将 this.level 更新为 context.props.level。

因为函数式组件只是函数，所以渲染开销(时间和内存)也低很多。

在作为包装组件时它们也同样非常有用。比如，当你需要做这些时：

• 程序化地在多个组件中选择一个来代为渲染；
• 在将 children、props、data 传递给子组件之前操作它们。

下面是一个 smart-list 组件的例子，它能根据传入 prop 的值来代为渲染更具体的组件：

var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }

Vue.component('smart-list', {
  functional: true,
  props: {
    items: {
      type: Array,
      required: true
    },
    isOrdered: Boolean
  },
  render: function (createElement, context) {
    function appropriateListComponent () {
      var items = context.props.items

      if (items.length === 0)           return EmptyList
      if (typeof items[0] === 'object') return TableList
      if (context.props.isOrdered)      return OrderedList

      return UnorderedList
    }

    return createElement(
      appropriateListComponent(),
      context.data,
      context.children
    )
  }
})

使用计算属性

如果模版中某个数据会使用多次，并且该数据是通过计算得到的，使用计算属性以缓存它们

非实时绑定的表单项

当使用v-model绑定一个表单项时，当用户改变表单项的状态时，也会随之改变数据，从而导致vue发生重新渲染（rerender），这会带来一些性能的开销。

我们可以通过使用lazy或不使用v-model的方式解决该问题，但要注意，这样可能会导致在某一个时间段内数据和表单项的值是不一致的。

vue设计思想是关注的是数据而不是界面，代码的可维护性和可阅读性也很重要，js执行线程和浏览器渲染线程是互斥的，所以运行动画时执行jS线程动画会卡顿

如双向绑定的文本框输入的内容改变，输入abcd，会进行4次重新渲染，可以使用v-model.lazy,监听@change，不使用监听的是@input

保持对象引用稳定

在绝大部分情况下，vue出发rerender的时机是其依赖的数据发生变化

若数据没有发生变化，哪怕给数据重新赋值了，vue也不会做出任何处理的

下面是vue判断数据没有变化的源码

function hasChanged(x,y) {
  if (x === y) {
    return x === 0 && 1 / x !== 1/y
  }else {
    return x === x || y === y
  }
}

因此，如果需要，只要能保证组件的依赖数据不发生变化，组件就不会重新渲染

对于原始数据类型，保持其值不变即可

对于对象类型，保持其引用不变即可

使用v-show替代v-if

对于频繁切换显示状态的元素，使用v-show可以保证虚拟的dom树的稳定，避免频繁的新增和删除元素，特别是对于那些内部包含大量dom元素的节点，这一点及其重要

使用延迟装载defer

首页白屏时间主要受到两个因素的影响：

• 打包体积过大

  巨型包需要消耗大量的传输时间，导致JS传输完成前页面只有一个<div>，没有可显示的内容

• 需要立即渲染的内容太多

JS传输完成后，浏览器开始执行JS构造页面

但可能一开始要渲染的组件太多，不仅JS的事件很长，而且执行完后浏览器要渲染的元素过多，从而导致页面白屏loading过久

一个可行的办法就是延迟装载组件，让组件按照指定的先后顺序依次一个一个渲染出来

告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

callback： 下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。该回调函数会被传入DOMHighResTimeStamp参数，该参数与performance.now()的返回值相同，它表示requestAnimationFrame() 开始去执行回调函数的时刻。

思路：浏览器渲染1s渲染60次，第一次渲染一部分，第二次一部分，隔开渲染,分批绘制

// defer.js
export default function(maxFrameCount) {
  return {
    data(){
      return{
        // 浏览器每重绘一次，计数
        frameCount:0,
      };
    },
    mounted() {
      const refreshFrameCount = () => {
        requestAnimationFrame(() => {
        	this.frameCount++;
          if(this.frameCount < maxFrameCount) {
            refreshFrameCount();
          }
        });
      };
      refreshFrameCount();
    },
    methods: {
      defer(showInFrameCount) {
        // 用于v-if 的判断条件，渲染次数大于showInFrameCount后继续下一次渲染
        return this.frameCount >= showInFrameCount
      },
    },
  };
}

<template>
  <div class="container">
    <!--vue3.0 v-if 优先级高 vue2.x v-for优先级高-->
    <div class="block" v-for="n in 20" v-if="defer(n)">
      <heavy-comp></heavy-comp>
    </div>
  </div>
</template>
<script>
import defer from "./mixin/defer";
export default {
  mixins: [defer(300)],
  components: { HeavyComp },
};
</script>

使用keep-alive

用于缓存内部组件实例，里面有include和exclude属性，max设置最大缓存数，超过后，自动删除最久没用的。

受到keep-alive影响，其内部的组件都具有两个生命周期，activated和deactivated ,分别再组件激活和失活时触发，第一次activated是在mounted之后。

一般用在需要多个页面频繁操作的场景（导航条）

长列表优化

一般用在app端下拉的时候，或者列表很长的时候，通过一个固定大小的渲染池来解决。通过滚动条等一些操作，减少页面渲染市场，有现成的库，vue-virtual-scroller

https://github.com/Akryum/vue-virtual-scroller

通过v-once创建低开销的静态组件，渲染一次后就缓存起来了，除非你非常留意渲染速度，不然最好不要用，因为有的开发者不知道这个属性或者看漏了，然后花费好几个小时来找为什么模板无法正确更新。

打包体积优化

• Webpack 对图片进行压缩
• 静态资源的优化使用对象存储加CDN
• 减少 ES6 转为 ES5 的冗余代码
• 提取公共代码
• 模板预编译
• 提取组件的 CSS
• 优化 SourceMap
• 构建结果输出分析
• Vue 项目的编译优化

基础优化

• 开启 gzip 压缩
• 浏览器缓存
• CDN 的使用
• 使用 Chrome Performance 查找性能瓶颈

前言

首先要知道vue2 是2013年 基于 ES5开发出来的，我们常说的重渲染就是重新运行render函数

vue2 的响应式原理是利⽤ES5 的⼀个 API ，Object.defineProperty()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。

1. 思路

带入作者的角度思考一下，想要达成响应式的特点应该是:属性更新，自动调用依赖^[1]的函数进行重新渲染

// euv.js
/**
 * 观察某个对象的所有属性
 * @param {Object} obj
 */
function observe(obj) {
  for (const key in obj) {
    let internalValue = obj[key];
    let funcs = [];
    Object.defineProperty(obj, key, {
      get: function () {
        //  依赖收集，记录：是哪个函数在用我
        if (window.__func && !funcs.includes(window.__func)) {
          funcs.push(window.__func);
        }
        return internalValue;
      },
      set: function (val) {
        internalValue = val;
        // 派发更新，运行：执行用我的函数
        for (var i = 0; i < funcs.length; i++) {
          funcs[i]();
        }
      },
    });
  }
}

function autorun(fn) {
  window.__func = fn;
  fn();
  window.__func = null;
}

// index.js
var user = {
  name: '有骨气',
  birth: '1998-4-7',
};

observe(user); // 观察

// 显示姓氏
function showFirstName() {
  document.querySelector('#firstName').textContent = '姓：' + user.name[0];
}

// 显示名字
function showLastName() {
  document.querySelector('#lastName').textContent = '名：' + user.name.slice(1);
}

// 显示年龄
function showAge() {
  var birthday = new Date(user.birth);
  var today = new Date();
  today.setHours(0), today.setMinutes(0), today.setMilliseconds(0);
  thisYearBirthday = new Date(
    today.getFullYear(),
    birthday.getMonth(),
    birthday.getDate()
  );
  var age = today.getFullYear() - birthday.getFullYear();
  if (today.getTime() < thisYearBirthday.getTime()) {
    age--;
  }
  document.querySelector('#age').textContent = '年龄：' + age;
}
autorun(showFirstName);
autorun(showLastName);
autorun(showAge);

2. 原理

vue2响应式原理简单来说就是vue官网上的这图片

通过 Object.defineProperty 遍历对象的每一个属性，把每一个属性变成一个 getter 和 setter 函数，读取属性的时候调用 getter，给属性赋值的时候就会调用 setter.

当运行 render 函数的时候,发现用到了响应式数据，这时候就会运行 getter 函数，然后 watcher（发布订阅）就会记录下来。当响应式数据发生变化的时候，就会调用 setter 函数，watcher 就会再记录下来这次的变化，然后通知 render 函数，数据发生了变化，然后就会重新运行 render 函数，重新生成虚拟 dom 树。

3. 深入了解

我们要明白，响应式的最终目标：是当对象本身或对象属性发生变化时，会运行一些函数，最常见的就是 render 函数。不是只有 render，只要数据发生了变化后运行了一些函数，就是响应式,比如 watch。

在具体实现上，vue 采用了几个核心部件:

1. Observer

2. Dep

3. Watcher

4. Scheduler

4. Observer

observer 要实现的目标非常简单，就是把一个普通的对象转换成响应式的对象

为了实现这一点，observer 把对象的每个属性通过 object.defineProperty 转换为带有 getter 和 setter 的属性，这样一来，当访问或者设置属性时，vue 就会有机会做一些别的事情。

在组件的生命周期中，这件事发生在 beforeCreate 之后，create 之前。

具体实现上，他会递归遍历对象的所有属性，以完成深度的属性转换。

但是由于遍历只能遍历到对象的当前属性，无法监测到将来动态添加或者删除的属性，因此 vue 提供了$set和$delete 两个实例方法，但是 vue 并不提倡这样使用，我讲到 dep 的时候我再说为什么。

对于数组的话，vue 会更改它的隐式原型，之所以这样做是因为 vue 需要监听那些可能改变数组内容的方法。

数组 --> vue 自定义的对象 --> Array.prototype

总之，observer 的目标，就是要让一个对象，它属性的读取，赋值，内部数组的变化都要能够被 vue 感知到。

4.1. 手动转换响应式对象

Vue提供了静态方法：Vue.observable() 手动将普通对象转为响应式对象。

var obj = {
    a: 1,
    b: 2,
    c: {
        d: 3,
        e: 4
    },
    f: [
        {
            a: 1,
            b: 2
        },
        3, 4, 5, 6
    ]
}

// 利用Vue提供的静态方法 .observable, 将一个普通对象转化为响应式对象
var reactiveObj = Vue.observable(obj)
console.log(reactiveObj)

4.2. data

Vue不允许动态添加根级响应式属性，所以需要在组件实例化之前通过配置中的 data 字段，声明所有根级响应式属性，哪怕属性值为 null。由此带来的好处有：

1. 更易于维护： data对象就像组件的状态结构（schema）, 提前声明所有响应式属性，后期有助于开发者理解和修改组件逻辑。
2. 消除了在依赖项跟踪系统中的一类边界情况。
3. 使Vue实例能够更好的配合类型检查系统工作。

4.3. 「动态添加或删除属性」

由于Vue会在初始化实例时，对所有属性（配置里 data 中存在的属性）执行 getter/setter 的转化。

那么对于 「动态添加或删除」 的属性，Vue是无法自动检查其变化。

因此，Vue提供了以下方式来手动完成响应式数据。

1. 添加：「Vue.set(target, key, val)」 或 「this.$set(target, key, val)」
2. 删除：「Vue.delete(target, key)」 或 「this.$delete(target, key)」
3. 批量操作：this.reactiveObj = Object.assign({}, this.reactiveObj, obj)

举个例子：

<template>
    <div class="demo-wrapper">
        <p>obj.a -> {{ obj.a }}， obj.b -> {{ obj.b }}</p>

        <!-- 非响应式式数据操作 -->
        <!-- 
            <button @click="obj.b = 2">add obj.b</button>
            <button @click="delete obj.a">delete obj.a</button>
        -->
        <!-- 响应式数据操作 -->
        <button @click="$set(obj, 'b', 2)">add obj.b</button>
        &nbsp;
        <button @click="$delete(obj, 'a')">delete obj.a</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            obj: {
                a: 1,
            },
        };
    },
};
</script>

4.4. 「关于数组」

由于js的限制， Vue不能检测到以下数组变动：

1. 当利用索引直接改变数组项时， 例如：vm.arr[idx] = newValue
2. 当修改数组长度时 ，例如： vm.arr.length = newLength

举个例子：

<script>
export default {
    data() {
        return {
            arr: [1, 2, 3, 4],
        };
    },
    created() {
        window.lesson4 = this;
    },
    mounted() {
        this.arr[0] = 8; // 不是响应式的
        this.arr.length = 2; //不是响应式的
    }
};
</script>

为了让上述数组操作具有响应式，采用以下方法处理：

<script>
export default {
    data() {
        return {
            arr: [1, 2, 3, 4],
        };
    },
    created() {
        window.lesson4 = this;
    },
    mounted() {
				// 操作一：通过索引修改数组项
        this.$set(arr, 0, 8); // 响应式的
        // 或
        Vue.set(arr, 0, 8);  // 响应式的
        // 或
        this.arr.splice(0, 1, 8) //响应式的
      
        // 操作二：修改数组长度为2
        this.arr.splice(2) // 响应式的
    }
};
</script>

除了可以通过静态方法 Vue.set() 和 实例方法 this.$set() 响应式的修改数组项的值。还可以使用数组方法 - splice() 。

因为，Vue对一些可以改变数组自身内容的操作API，如：splice()、sort()、push()、pop()、reverse()、shift()、unshift() 等进行了拦截和重写。从而在开发者使用这些API时，可以触发响应式数据，进而更新视图。

<script>
  export default{
    data() {
      return {
        arr: [1,2,3,4]
      }
    },
    mounted() {
      console.log(this.arr._proto_ === Array.prototype)  // => false
      console.log(this.arr._proto_._proto_ === Array.prototype)  //=> true
    }
  }
</script>

5. Dep

这里有两个问题没解决，就是读取属性时要做什么事，属性变化时又要做什么事，这个问题就得需要 dep 来解决

dep 的含义是 dependency 表示依赖的意思。

vue 会为响应式对象中的每一个属性，对象本身，数组本身创建一个 dep 实例，每个 dep 实例都可以做两件事情：

1，记录依赖：是谁在用我

2，派发更新：我变了，我要通知那些用我的人

当读取响应式对象的某一个属性时，他会进行依赖收集，有人用到了我

当改变某个属性时，他会派发更新，那些用我的人听好了，我变了

为什么尽量不要使用$set $delete ?

因为如果模板上没有用到值的话，你凭空加了一个数据,理论上来说应该不会重新运行render函数，但是上一级的dep发现自身发生改变了，所以也会导致重新运行render函数。

所以vue不建议使用$set 和$delete,最好提前先写上数据,哪怕先给数据赋值为 null;

6. watcher

这里又出现了一个问题，就是 dep 如何知道是谁在用我呢

watcher 就解决了这个问题

当函数执行的过程中，用到了响应式数据，响应式数据是无法知道是谁在用自己的

所以，我们不要直接执行函数，而是把函数交给一个 watcher 的东西去执行，watch 是一个对象，每个函数执行时都应该创建一个 watcher，通过 wacher 去执行

watcher 会创建一个全局变量，让全局变量记录当前负责执行的 watcher 等于自己，然后再去执行函数，在函数执行的过程中，如果发生了依赖记录，那么 dep 就会把这个全局变量记录下来，表示有一个 wathcer 用到了我这个属性。

当 dep 进行派发更行时，他会通知之前记录的所有 watcher，我变了。

7. Scheduler

现在还剩下最后一个问题啊，就是 dep 通知 watcher 之后，如果 wathcer 执行重新运行对应的函数，就有可能导致频繁运行，从而导致效率低下，试想，如果一个交给 watcher 的函数，它里面用到了属性 a,b,c,d,那么 a,b,c,d 都会记录依赖，然后这四个值都以此重新赋值，那么就会触发四次更新，这样显然不行啊，所以当 watcher 收到派发更新的通知后，实际上并不是立即执行，而是通过一个叫做 nextTick 的工具方法，把这些需要执行的 watcher 放到事件循环的微队列，nextTick 是通过 Promise then 来完成的。

也就是说，在响应式数据发生变化时，render 函数执行是异步的，并且在微队列中。

8. 异步更新队列

Vue侦听到数据变化，就会开启一个队列。但是组件不会立即重新渲染，而是先会缓冲在同一个事件循环中的发生的所有数据变化。此时如果同一个watcher被多次触发，只会被推入到队列中一次，这样可以**「避免不必要的计算和DOM更操作」**。
在下一个事件循环”tick“中， Vue刷新队列并执行实际（已去重的）工作（更新渲染）。
为此，Vue提供了异步更新的监听接口 —— Vue.nextTick(callback) 或 this.$nextTick(callback) 。当数据发生改变，异步DOM更新完成后，callback回调将被调用。开发者可以在回调中，操作更新后的DOM。

「举例1」

<script>
export default {
    data() {
        return {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
        };
    },
    methods: {
        changeAllData() {
            this.$nextTick(function () {
                var pre = document.querySelector("pre");
                console.log(pre.textContent);
            });

            this.a = this.b = this.c = this.d = 10;

            this.$nextTick(function () {
                var pre = document.querySelector("pre");
                console.log(pre.textContent);
            });
        },
    },
    render(h) {
        console.log('render function')
        return h('div', [
            h('pre', `${this.a}, ${this.b}, ${this.c}, ${this.d}`),
            h('button', {
                on: {
                    click: () => {
                        this.changeAllData()
                    }
                }
            }, 'change all data')
        ])
    }
};
</script>

上例，通过一个NextTick组件的渲染，了解下 的用法。为了方便查看组件渲染时，render函数被调用的过程，在组件定义时，直接给出render函数。当点击按钮后，会在数据修改前后，使用nextTick工具方法。分别写入两个读取界面Dom的函数。结果会发现，第一个 $nextTick 回调函数获取的数据为旧数据，第二个 $nextTick回调函数获取的数据为新数据。

分析一下：

按钮点击后，异步队列的添加步骤是：

1. 第一个 $nextTick ，会将自己的回调函数（fn1）加入到当前的异步队列中。
2. 修改数据后， 经过派发更新，Scheduler会将包含了watcher队列执行逻辑的函数（fn2）加入到当前的异步队列中。
3. 第二个 $nextTick， 已将自己的回调函数（fn3）加入到当前的异步队列中。

当异步队列执行时，会依次执行 fn1 ， fn2，fn3。而当fn2执行后，界面才会更新最新数据，所以fn1，fn3获取的界面数据前者为旧数据，后者为新数据。

「举例2」

<template>
  <span>{{a}}</span>
</template>
<script>
	export default {
    data() {
      return {
        a: 'hello'
      }
    },
    mounted() {
      this.a = 'world'
      console.log(this.$el.textContent)  // -> 'hello'
      this.$nextTick(function() {
        console.log(this.$el.textContent) // -> 'world'
      })
    }
  }
</script>

上面代码，当设置 this.a = 'world' 后，访问DOM元素内容，但完成未更新。此时，立即使用 this.$nextTick() 监听DOM更新，并在监听回调调用时，获取更新后的DOM内容。

另外， this.$nextTick() 其内部尝试使用原生的 Promise.then、MutationObserve、setImmediate，如果执行环境不支持，则会采用 setTimeout 替代。并且最终返回一个Promise对象，所以可以使用 async/await 语法替代 callback的写法。

<script>
	export default {
    data() {
      return {
        a: 'hello'
      }
    },
    // $nextTick 结合 async/await语法使用
    async mounted() {
      this.a = 'world'
      console.log(this.$el.textContent)  // -> 'hello'
      await this.$nextTick()
      console.log(this.$el.textContent) // -> 'world'
    }
  }
</script>

9. 总流程图

提示

前言： Waline 评论系统这个 bug 有几个月了，现象就是回复完其他人的评论后，评论内容会保留在顶部输入框中，而且不会自动清空。具体见 👉GitHub issuse #2173

许久未见修复，正好我有空，就看看这个问题，接下来跟我一起分析一下这个问题

1. 定位问题

问题现象上边已经描述过了，我们先来定位一下问题。

1.1. 关键

关键在于【不会清空】，即使刷新浏览器，也不会清空，由此可知必然保存在 localStorage 中，打开开发者工具，看看保存在 localStorage 中的数据结构。发现如下图所示

然后有了key就好办了

1.2. 源码

在 Waline 评论系统源码中，我们全局搜索 WALINE_COMMENT_BOX_EDITOR 结果如下

// walinejs/packages/client/src/composables/inputs.ts
import type { RemovableRef } from '@vueuse/core';
import { useStorage } from '@vueuse/core';

export interface UserMeta {
    nick: string;
    mail: string;
    link: string;
}

export const useUserMeta = (): RemovableRef<UserMeta> =>
useStorage<UserMeta>('WALINE_USER_META', {
    nick: '',
    mail: '',
    link: '',
});

export const useEditor = (): RemovableRef<string> =>
useStorage<string>('WALINE_COMMENT_BOX_EDITOR', '');

继续查找调用，找到CommentBox.vue关键组件，该组件将textarea评论框v-model与useEditor函数绑定，该函数返回一个RemovableRef，该类型为<string>。

const editor = useEditor();

<textarea
  id="wl-edit"
  ref="editorRef"
  v-model="editor"
  class="wl-editor"
  :placeholder="replyUser ? `@${replyUser}` : locale.placeholder"
  @keydown="onKeyDown"
  @drop="onDrop"
  @paste="onPaste"
/>

2. 调试

2.1. 准备工作

1. 已锁定问题文件为CommentBox.vue,接下来开始 debug，因为准备提 PR，所以先 fork 一份

2. 按照waline-贡献指南进行准备

3. 先执行pnpm i & pnpm build,本地调试依赖@waline/api 需要前置 build

4. 使用 pnpm client:dev 启动 @waline/client 本地开发,由于 waline 是 Client/Server 架构，在调试 client 时，你需要设置 SERVERURL 为调试服务器（可以直接使用 vercel 的服务器），或同时启动下面的 server 开发服务器并使用默认的 localhost:9090。

5. 使用 pnpm server:dev 启动 @waline/server 本地开发,配置必要的本地环境变量至 example/.env。（这里我配置了 leancloud 的环境变量，一直在报错）

2.2. 关键函数 CommentBox.vue的submitComment和watch

 const submitComment = async (): Promise<void> => {

     // 此处...省略若干

     try {
         if (recaptchaV3Key)
         comment.recaptchaV3 =
             await useReCaptcha(recaptchaV3Key).execute('social');

         if (turnstileKey)
         comment.turnstile = await useTurnstile(turnstileKey).execute('social');

         const options = {
         serverURL,
         lang,
         token: userInfo.value?.token,
         comment,
         };

         const response = await (props.edit
         ? updateComment({
             objectId: props.edit.objectId,
             ...options,
         })
         : addComment(options));

         isSubmitting.value = false;

         if (response.errmsg) return alert(response.errmsg);

         emit('submit', response.data!);

         editor.value = '';

         previewText.value = '';

         if (props.replyId) emit('cancelReply');
         if (props.edit?.objectId) emit('cancelEdit');
     } catch (err: unknown) {
         isSubmitting.value = false;

         alert((err as TypeError).message);
     }
 };

接下来看 watch

watch(
  () => editor.value,
  (value) => {
    const { highlighter, texRenderer } = config.value;
    content.value = value;
    previewText.value = parseMarkdown(value, {
      emojiMap: emoji.value.map,
      highlighter,
      texRenderer,
    });
    wordNumber.value = getWordNumber(value);

    if (value) autosize(editorRef.value!);
    else autosize.destroy(editorRef.value!);
  },
  {
    immediate: true,
  }
);

2.3. 断点测试，整体流程如下

1. 监听editor.value，并将editor和textarea绑定,用户输入的值自动保存在localStorage中

2. 点击提交按钮，将textarea中的值发送给后端，收到回调后将editor清空,如果抛出异常则不清空

3. 正常提交评论无异常，在submitComment函数中的editor.value = '';将localStorage存储的内容清空

4. 回复他人评论时，前置流程提交和步骤 3 一致，然后触发了watch,此时watch监听到的value为未被清空的值，既之前用户输入的内容

5. submitComment中的editor.value = '';和watch都打上了断点，先赋值为空，后触发watch，而此时watch的 value 为被清空之前的值，即用户输入的内容

2.4. 分析

问题已经定位到代码级别，接下来只需要找到 watch 被触发的原因即可，初步猜测可能原因：

submitComment是异步函数，其内部赋空值后，editor.value=''没有及时更新，导致watch触发取到旧值

遂添加 watch 的 bebug 函数加以验证

1. onTrack 将在响应属性或引用作为依赖项被跟踪时被调用。相当于 get
2. onTrigger 将在侦听器回调被依赖项的变更触发时被调用。相当于 set

watch(
  () => editor.value,
  (value) => {
    const { highlighter, texRenderer } = config.value;
    content.value = value;
    previewText.value = parseMarkdown(value, {
      emojiMap: emoji.value.map,
      highlighter,
      texRenderer,
    });
    wordNumber.value = getWordNumber(value);

    if (value) autosize(editorRef.value!);
    else autosize.destroy(editorRef.value!);
  },
  {
    immediate: true,
    onTrack(e) {
      // 当 editor.value 被追踪为依赖时触发
      debugger;
    },
    onTrigger(e) {
      // 当 editor.value 被更改时触发
      debugger;
    },
  }
);

结果为：

1. editor.value=''时，onTrigger触发，newValue 为''
2. 紧接着触发onTrackvalue 为旧值

调整回调的触发时机试试看：

• Post Watchers

  如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM，你需要指明 flush: 'post' 选项：

• 同步侦听器

  它会在 Vue 进行任何更新之前触发：

  注意

  同步侦听器不会进行批处理，每当检测到响应式数据发生变化时就会触发。可以使用它来监视简单的布尔值，但应避免在可能多次同步修改的数据源 (如数组) 上使用。

结果是没有作用，但在更改为 sync 后，发现了一件有趣的事情，因为 sync 不会进行批处理的特性，所以触发了两次onTrack,我们来看一下两次的堆栈信息

很明显第一次触发是editor.value=''时触发的，第二次触发异步的，在submitComment还未执行完成时就触发了，点击堆栈信息定位到了291行，很明显早于editor.value=''的297行。所以取到的是旧的值，虽然断点是editor.value=''先执行，但submitComment是异步的，watch 取到的是旧值，那接下来就需要看 watch是被什么触发了

由于源码中的watch是写在onMounted中的，断点确定二次走到watch中时，是触发了onMounted，那触发onMounted是组件重新加载了，查找后得知，整体逻辑是，评论区域，代码结构如下：

• 组件为WalineComment.vue,其中包含了评论列表组件 itemCommentCard.vue和顶部默认输入框CommentBox.vue

• 针对文章发布评论使用的是顶部的CommentBox.vue组件

• 针对评论回复时，使用的是CommentCard.vue-CommentBox.vue

• 回复完成后CommentCard.vue-CommentBox.vue销毁，顶部的CommentBox.vue组件重新渲染

顶部的CommentBox.vue组件重新渲染会触发 watch，此时取值是旧值， 经查看，submitComment中的editor.value=''执行完后， localStorage 中的值并未立即修改，所以重新渲染的顶部CommentBox.vue组件在初始化时取到的值仍为localStorage中的旧值。

3. 验证

上边已经基本确定问题出在这句上

editor.value = "";

const editor = useEditor();

而在 1.2 中可以看到useEditor()是@vueuse/core的导出函数,怀疑其内部实现有一些异步操作，导致的没有立即更新localStorage

// 更换`editor.value`为
localStorage.setItem('WALINE_COMMENT_BOX_EDITOR', '');
// 或
await nextTick()

3.1. 至此问题解决

function nextTick(callback?: () => void): Promise<void>

4. 思考

在vueusejs的文档中，其实useStorage应该是一个同步操作，它还有一个useStorageAsync的API，支持异步的响应式Storage，按理说里边不应该包含太多异步的或者延时性的代码，我也找到源码浅浅看了一下，目前还没找到问题在哪里，按照替换localStorage.setItem('WALINE_COMMENT_BOX_EDITOR', '');可行来看，问题就在useStorage身上无疑，后续有时间，会继续探索一下，给官方的PR#2524也已经提了

鉴于使用 ReactNative 时，会需要不同的 node 版本，提供一种版本切换方式

使用 n command 来进行 node 版本管理

概念

n Node version manager 提供了一个更简单的 CLI，用于在 Node 版本之间进行安装和切换。它仅在 Linux 或 Mac 操作系统上受到支持。

安装

如果你已经安装某个版本的 Node 和 npm ，则可以用 npm install -g n 来安装 n，就像安装其他 NPM 包一样。

如果你还没有安装 Node 或 npm，可以用 GitHub 中的 bash 脚本安装 n。这是它的样子：

curl -L https://git.io/n-install | bash
=== n successfully installed.
  The active Node.js version is: v10.16.0

  Run `n -h` for help.
  To update n later, run `n-update`.
  To uninstall, run `n-uninstall`.

  IMPORTANT: OPEN A NEW TERMINAL TAB/WINDOW or run `. /home/brian/.bashrc`
             before using n and Node.js.
===
~$ . /home/brian/.bashrc
~$ n
node/10.16.0

通过从 GitHub 下载并运行 n-install 脚本来安装 n。n 默认安装了一个版本的 Node。

安装版本 10.17.0

如果需要指定版本号，可以这样安装

sudo n 10.17.0

安装最新版本

安装最新版本使用如下命令

sudo n latest

切换版本

n

显示如下

Last login: Fri Apr  3 16:56:05 on ttys004

# huangkun @ huagnkundeMacBook-Pro in ~ [16:58:24]
$ n
  ο node/10.17.0
    node/13.12.0

Use up/down arrow keys to select a version, return key to install, d to delete, q to quit

可以使用上下方向键来选择版本，并回车。如果不想选择可以按q退出

直接使用 Node 二进制文件

n 提供了直接调用特定 Node 二进制文件的功能，而无需显式切换到该版本的 Node。 NVM 则没有类似的功能。

# huangkun @ huagnkundeMacBook-Pro in ~ [17:01:32]
$ node -v
v10.17.0
# huangkun @ huagnkundeMacBook-Pro in ~ [17:01:39]
$ n use 13.12.0 index.js
Node version: v13.12.0

请注意，n use 命令所请求的 Node 版本需要由 n 安装。

在某些情况下，这个功能非常有用。例如，有一个构建服务器，用于构建需要不同 Node 版本的程序。可以用 n use 命令触发每个构建，并能够指定该程序所需的 Node 版本。

差异化

NVM for Windows 和 n 有许多常见功能，也有一些独特的功能，这些功能会影响你使用每个工具的方式和位置。以下是一些主要差异的摘要：

| 能力 | NVM for Windows | n |
| :

在应用中，所有的 Dart 代码都在 isolate 中运行。每一个 Dart 的 isolate 都有独立的运行线程，它们无法与其他 isolate 共享可变对象。在需要进行通信的场景里，isolate 会使用消息机制。很多 Dart 应用都只使用一个 isolate，也就是 main isolate。你可以创建额外的 isolate 以便在多个处理器核心上执行并行代码。