-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (128 loc) · 43.9 KB
/
index.html
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Derrick - blog</title><meta name="description" content="Derrick的博客, 不定期更新"><meta name="keywords" content="derrick, DerrickTel, blog, github"><meta name="author" content="Derrick"><meta name="copyright" content="Derrick"><meta name="format-detection" content="telephone=no"><link rel="shortcut icon" href="/img/favicon.ico"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="crossorigin"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Derrick"><meta name="twitter:description" content="Derrick的博客, 不定期更新"><meta name="twitter:image" content="http://derricktel.github.io/img/avatar.png"><meta property="og:type" content="website"><meta property="og:title" content="Derrick"><meta property="og:url" content="http://derricktel.github.io/"><meta property="og:site_name" content="Derrick"><meta property="og:description" content="Derrick的博客, 不定期更新"><meta property="og:image" content="http://derricktel.github.io/img/avatar.png"><script src="https://cdn.jsdelivr.net/npm/js-cookie/dist/js.cookie.min.js"></script><script>var autoChangeMode = '1'
var t = Cookies.get("theme")
if (autoChangeMode == '1'){
var isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
var isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches
var isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches
var hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
if (t === undefined){
if (isLightMode) activateLightMode()
else if (isDarkMode) activateDarkMode()
else if (isNotSpecified || hasNoSupport){
console.log('You specified no preference for a color scheme or your browser does not support it. I Schedule dark mode during night time.')
var now = new Date()
var hour = now.getHours()
var isNight = hour < 6 || hour >= 18
isNight ? activateDarkMode() : activateLightMode()
}
} else if (t == 'light') activateLightMode()
else activateDarkMode()
} else if (autoChangeMode == '2'){
now = new Date();
hour = now.getHours();
isNight = hour < 6 || hour >= 18
if(t === undefined) isNight? activateDarkMode() : activateLightMode()
else if (t === 'light') activateLightMode()
else activateDarkMode()
} else {
if ( t == 'dark' ) activateDarkMode()
else if ( t == 'light') activateLightMode()
}
function activateDarkMode(){
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null){
document.querySelector('meta[name="theme-color"]').setAttribute('content','#000')
}
}
function activateLightMode(){
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null){
document.querySelector('meta[name="theme-color"]').setAttribute('content','#fff')
}
}</script><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css"><link rel="canonical" href="http://derricktel.github.io/"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web"><script>var GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: undefined,
translate: {"defaultEncoding":2,"translateDelay":0,"cookieDomain":"https://xxx/","msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
bookmark: {
message_prev: '按',
message_next: '键将本页加入书签'
},
runtime_unit: '天',
runtime: true,
copyright: undefined,
ClickShowText: undefined,
medium_zoom: false,
fancybox: true,
Snackbar: undefined,
baiduPush: false,
highlightCopy: true,
highlightLang: true,
highlightShrink: 'false',
isFontAwesomeV5: false,
isPhotoFigcaption: false
}</script><script>var GLOBAL_CONFIG_SITE = {
isPost: false,
isHome: true,
isSidebar: false
}</script><noscript><style>
#page-header {
opacity: 1
}
.justified-gallery img{
opacity: 1
}
</style></noscript><meta name="generator" content="Hexo 4.2.0"></head><body><div id="mobile-sidebar"><div id="menu_mask"></div><div id="mobile-sidebar-menus"><div class="mobile_author_icon"><img class="avatar-img" src="/img/avatar.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="mobile_post_data"><div class="mobile_data_item is-center"><div class="mobile_data_link"><a href="/archives/"><div class="headline">文章</div><div class="length_num">41</div></a></div></div><div class="mobile_data_item is-center"> <div class="mobile_data_link"><a href="/tags/"><div class="headline">标签</div><div class="length_num">44</div></a></div></div><div class="mobile_data_item is-center"> <div class="mobile_data_link"><a href="/categories/"><div class="headline">分类</div><div class="length_num">19</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fa fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fa fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fa fa-about"></i><span> 关于我</span></a></div></div></div></div><div id="body-wrap"><div class="full_page" id="nav" style="background-image: url(/img/index.jpg)"><div id="page-header"><span class="pull_left" id="blog_name"><a class="blog_title" id="site-name" href="/">Derrick</a></span><span class="pull_right menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fa fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fa fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fa fa-about"></i><span> 关于我</span></a></div></div><span class="toggle-menu close"><a class="site-page"><i class="fa fa-bars fa-fw" aria-hidden="true"></i></a></span></span></div><div id="site-info"><h1 id="site_title">Derrick</h1><div id="site_subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/derricktel" target="_blank" title="Github"><i class="fa fa-github" aria-hidden="true"></i></a><a class="social-icon" href="[email protected]" target="_blank" title="Email"><i class="fa fa-envelope" aria-hidden="true"></i></a></div></div><div id="scroll_down"><i class="fa fa-angle-down scroll-down-effects"></i></div></div><main class="layout_page" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2023/03/07/%E6%96%B0%E6%9D%A5%E7%9A%84%E5%90%8C%E4%BA%8B%E9%97%AE%E6%88%91%E4%B8%BA%E4%BB%80%E4%B9%88canvas%E9%87%8C%E9%9D%A2%E6%98%8E%E6%98%8E%E4%BB%80%E4%B9%88%E9%83%BD%E6%B2%A1%E6%9C%89%EF%BC%8C%E5%8D%B4%E8%BF%99%E4%B9%88%E7%BB%9A%E7%83%82/" title="前端妹子问我为什么canvas里面明明什么都没有，却这么绚烂"> <img class="post_bg lazyload" data-src="/image/cover/canvas.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="前端妹子问我为什么canvas里面明明什么都没有，却这么绚烂"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/03/07/%E6%96%B0%E6%9D%A5%E7%9A%84%E5%90%8C%E4%BA%8B%E9%97%AE%E6%88%91%E4%B8%BA%E4%BB%80%E4%B9%88canvas%E9%87%8C%E9%9D%A2%E6%98%8E%E6%98%8E%E4%BB%80%E4%B9%88%E9%83%BD%E6%B2%A1%E6%9C%89%EF%BC%8C%E5%8D%B4%E8%BF%99%E4%B9%88%E7%BB%9A%E7%83%82/" title="前端妹子问我为什么canvas里面明明什么都没有，却这么绚烂">前端妹子问我为什么canvas里面明明什么都没有，却这么绚烂</a><div class="article-meta-wrap"><time class="post-meta__date" title="发表于 2023-03-07 10:22:37"><i class="fa fa-calendar" aria-hidden="true"></i>2023-03-07</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/categories/%E9%87%8D%E6%8B%BE%E5%89%8D%E7%AB%AF/">重拾前端</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/svg/">svg</a></span></div><div class="content">前端妹子问我为什么官网上面只有一个canvas标签，里面什么都没有….
我脸色一变”完了！官网挂了！“。走过去一看，原来是canvas的动画啊。
”这个你想学啊~我教你啊，到时候你可别说听不懂“。
基础知识使用 <canvas> 元素不是非常难，但你需要一些基本的HTML和JavaScr ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2023/03/01/%E9%87%8D%E7%94%9F%E4%B9%8B%E6%88%91%E6%98%AFSVG(2)-%E7%A5%9E%E4%B9%8B%E5%8F%B3%E6%89%8Bpath/" title="重生之我是SVG(2)-神之右手path"> <img class="post_bg lazyload" data-src="/image/cover/svg.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="重生之我是SVG(2)-神之右手path"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/03/01/%E9%87%8D%E7%94%9F%E4%B9%8B%E6%88%91%E6%98%AFSVG(2)-%E7%A5%9E%E4%B9%8B%E5%8F%B3%E6%89%8Bpath/" title="重生之我是SVG(2)-神之右手path">重生之我是SVG(2)-神之右手path</a><div class="article-meta-wrap"><time class="post-meta__date" title="发表于 2023-03-01 14:41:12"><i class="fa fa-calendar" aria-hidden="true"></i>2023-03-01</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/categories/%E9%87%8D%E6%8B%BE%E5%89%8D%E7%AB%AF/">重拾前端</a></span></div><div class="content">片头曲：重生之我……哔！~
前景提要之前说过path是功能强大且复杂所以单开一篇来学习。如果不知道之前的建议先看看之前的文章重生之我是SVG(1)-入门这样有助于后面的学习。
下面可能会用到但是不会详细介绍的2个标签
use
g
简介的省流助手
path是基本形状的基础，他可以做很多 amazi ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2023/02/27/%E9%87%8D%E7%94%9F%E4%B9%8B%E6%88%91%E6%98%AFSVG(1)-%E5%85%A5%E9%97%A8/" title="重生之我是SVG(1)-入门"> <img class="post_bg lazyload" data-src="/image/cover/svg.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="重生之我是SVG(1)-入门"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/02/27/%E9%87%8D%E7%94%9F%E4%B9%8B%E6%88%91%E6%98%AFSVG(1)-%E5%85%A5%E9%97%A8/" title="重生之我是SVG(1)-入门">重生之我是SVG(1)-入门</a><div class="article-meta-wrap"><time class="post-meta__date" title="发表于 2023-02-27 10:39:56"><i class="fa fa-calendar" aria-hidden="true"></i>2023-02-27</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/categories/%E9%87%8D%E6%8B%BE%E5%89%8D%E7%AB%AF/">重拾前端</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/svg/">svg</a></span></div><div class="content">概述引用一句来自MDN的一句话：
SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局。在这里，您可以找到每个 SVG 元素的参考文档。
SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。
123456789101 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2021/06/30/%E3%80%90%E9%87%8D%E8%AF%86%E5%89%8D%E7%AB%AF%E3%80%91React%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%EF%BC%88%E5%9B%9B%EF%BC%89/" title="【重识前端】React源码阅读（四）"> <img class="post_bg lazyload" data-src="/image/cover/react.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【重识前端】React源码阅读（四）"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/06/30/%E3%80%90%E9%87%8D%E8%AF%86%E5%89%8D%E7%AB%AF%E3%80%91React%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%EF%BC%88%E5%9B%9B%EF%BC%89/" title="【重识前端】React源码阅读（四）">【重识前端】React源码阅读（四）</a><div class="article-meta-wrap"><time class="post-meta__date" title="发表于 2021-06-30 14:08:31"><i class="fa fa-calendar" aria-hidden="true"></i>2021-06-30</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/categories/%E9%87%8D%E6%8B%BE%E5%89%8D%E7%AB%AF/">重拾前端</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/react/">react</a></span></div><div class="content">前言我将Fiber拆分成四块来讲
动机（或者说初衷
初始化-Fiber树的准备工作
render-Fiber树的构建
commit-Fiber树映射到DOM
render-Fiber树的构建
Fiber树的构建。Action！
一些废话，可以跳过距离上一篇文章也有2个多月的时间了。（确实搬砖比较 ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2021/06/24/%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%B0%8F%E4%BC%99%E5%AD%90canvas%E4%BD%A0%E7%9F%A5%E9%81%93%E5%A4%9A%E5%B0%91%E5%95%8A-%E5%A5%B8%E7%AC%91/" title="面试官：小伙子canvas你知道多少啊(奸笑)"> <img class="post_bg lazyload" data-src="/image/cover/webpack.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="面试官：小伙子canvas你知道多少啊(奸笑)"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/06/24/%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%B0%8F%E4%BC%99%E5%AD%90canvas%E4%BD%A0%E7%9F%A5%E9%81%93%E5%A4%9A%E5%B0%91%E5%95%8A-%E5%A5%B8%E7%AC%91/" title="面试官：小伙子canvas你知道多少啊(奸笑)">面试官：小伙子canvas你知道多少啊(奸笑)</a><div class="article-meta-wrap"><time class="post-meta__date" title="发表于 2021-06-24 10:59:42"><i class="fa fa-calendar" aria-hidden="true"></i>2021-06-24</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/categories/%E9%87%8D%E6%8B%BE%E5%89%8D%E7%AB%AF/">重拾前端</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a></span></div><div class="content">https://developer.mozilla.org/zh-CN/docs/Web/CSS/font
</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2021/06/22/%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%90%AC%E8%AF%B4%E4%BD%A0%E5%AF%B9package-json%E5%BE%88%E7%86%9F%EF%BC%9F/" title="面试官：听说你对package.json很熟？"> <img class="post_bg lazyload" data-src="/image/cover/web.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="面试官：听说你对package.json很熟？"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/06/22/%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%90%AC%E8%AF%B4%E4%BD%A0%E5%AF%B9package-json%E5%BE%88%E7%86%9F%EF%BC%9F/" title="面试官：听说你对package.json很熟？">面试官：听说你对package.json很熟？</a><div class="article-meta-wrap"><time class="post-meta__date" title="发表于 2021-06-22 20:11:07"><i class="fa fa-calendar" aria-hidden="true"></i>2021-06-22</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/categories/%E9%87%8D%E6%8B%BE%E5%89%8D%E7%AB%AF/">重拾前端</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a></span></div><div class="content">前言平常在工作中，对package.json这个文件的接触非常非常少。
一些同学可能还会看一下script里面有什么命令，执行了哪些方法。
又或者了解一下dependencies和devDependencies
其他大部分的同学可能直接就npm i和npm start就开始工作了。
但是pa ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2021/06/17/%E5%85%A8%E7%BD%91%E6%9C%80%E5%85%A8React%E6%BA%90%E7%A0%81%E8%B0%83%E8%AF%95%E6%95%99%E7%A8%8B/" title="全网最全React源码调试傻瓜式教程"> <img class="post_bg lazyload" data-src="/image/cover/react.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="全网最全React源码调试傻瓜式教程"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/06/17/%E5%85%A8%E7%BD%91%E6%9C%80%E5%85%A8React%E6%BA%90%E7%A0%81%E8%B0%83%E8%AF%95%E6%95%99%E7%A8%8B/" title="全网最全React源码调试傻瓜式教程">全网最全React源码调试傻瓜式教程</a><div class="article-meta-wrap"><time class="post-meta__date" title="发表于 2021-06-17 21:41:06"><i class="fa fa-calendar" aria-hidden="true"></i>2021-06-17</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/categories/react/">react</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/react/">react</a></span></div><div class="content">前言之前在阅读React源码的时候，想调试一下，然后debugger看看变量已经数据是怎么传递的，无奈。还要装这么多东西。踩了不少坑，记录一下。帮助大家少踩坑，也为自己做一个笔记。
准备工作
Node v8.0.0+、Yarn v1.2.0+。
已安装 JDK。
你已安装 gcc（或者你在有必要 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2021/04/06/%E3%80%90%E9%87%8D%E8%AF%86%E5%89%8D%E7%AB%AF%E3%80%91React%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%EF%BC%88%E4%B8%89%EF%BC%89Fiber%20%E5%88%9D%E5%A7%8B%E5%8C%96/" title="【重识前端】React源码阅读（三）4千字告诉你 Fiber 初始化"> <img class="post_bg lazyload" data-src="/image/cover/react.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【重识前端】React源码阅读（三）4千字告诉你 Fiber 初始化"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/04/06/%E3%80%90%E9%87%8D%E8%AF%86%E5%89%8D%E7%AB%AF%E3%80%91React%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%EF%BC%88%E4%B8%89%EF%BC%89Fiber%20%E5%88%9D%E5%A7%8B%E5%8C%96/" title="【重识前端】React源码阅读（三）4千字告诉你 Fiber 初始化">【重识前端】React源码阅读（三）4千字告诉你 Fiber 初始化</a><div class="article-meta-wrap"><time class="post-meta__date" title="发表于 2021-04-06 14:08:31"><i class="fa fa-calendar" aria-hidden="true"></i>2021-04-06</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/categories/%E9%87%8D%E6%8B%BE%E5%89%8D%E7%AB%AF/">重拾前端</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/react/">react</a></span></div><div class="content">前言在第一章中，我们解读到ReactDOM.render之后就没有继续了。因为我看了一下设计到了Fiber的一些知识，所以在第二章补充了Fiber的基础知识之后，我将Fiber拆分成四块来讲
动机（或者说初衷
初始化-Fiber树的准备工作
render-Fiber树的构建
commit-Fibe ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2021/04/05/%E3%80%90%E9%87%8D%E8%AF%86%E5%89%8D%E7%AB%AF%E3%80%91React%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%EF%BC%88%E4%BA%8C%EF%BC%892000%E5%AD%97%E5%91%8A%E8%AF%89%E4%BD%A0Fiber%E8%AE%BE%E8%AE%A1%E5%8A%A8%E6%9C%BA/" title="【重识前端】React源码阅读（二）2000字告诉你Fiber设计动机"> <img class="post_bg lazyload" data-src="/image/cover/react.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【重识前端】React源码阅读（二）2000字告诉你Fiber设计动机"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/04/05/%E3%80%90%E9%87%8D%E8%AF%86%E5%89%8D%E7%AB%AF%E3%80%91React%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%EF%BC%88%E4%BA%8C%EF%BC%892000%E5%AD%97%E5%91%8A%E8%AF%89%E4%BD%A0Fiber%E8%AE%BE%E8%AE%A1%E5%8A%A8%E6%9C%BA/" title="【重识前端】React源码阅读（二）2000字告诉你Fiber设计动机">【重识前端】React源码阅读（二）2000字告诉你Fiber设计动机</a><div class="article-meta-wrap"><time class="post-meta__date" title="发表于 2021-04-05 10:08:31"><i class="fa fa-calendar" aria-hidden="true"></i>2021-04-05</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/categories/%E9%87%8D%E6%8B%BE%E5%89%8D%E7%AB%AF/">重拾前端</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/react/">react</a></span></div><div class="content">前言上一篇挖的坑几乎都是Fiber有关的，本来想先学习一下Hooks，发现也和FIber密切相关了，决定先搞定一下Fiber。不了解的可以查看我的主页。Fiber架构React写了几年时间，一篇文章肯定是讲不完的，我决定分为四个阶段介绍。
动机（或者说初衷
初始化-Fiber树的准备工作
rend ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2021/03/29/%E3%80%90%E9%87%8D%E8%AF%86%E5%89%8D%E7%AB%AF%E3%80%91React%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%EF%BC%88%E4%B8%80%EF%BC%89jsx/" title="【重识前端】React源码阅读（一）jsx"> <img class="post_bg lazyload" data-src="/image/cover/react.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【重识前端】React源码阅读（一）jsx"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/03/29/%E3%80%90%E9%87%8D%E8%AF%86%E5%89%8D%E7%AB%AF%E3%80%91React%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%EF%BC%88%E4%B8%80%EF%BC%89jsx/" title="【重识前端】React源码阅读（一）jsx">【重识前端】React源码阅读（一）jsx</a><div class="article-meta-wrap"><time class="post-meta__date" title="发表于 2021-03-29 10:08:31"><i class="fa fa-calendar" aria-hidden="true"></i>2021-03-29</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/categories/%E9%87%8D%E6%8B%BE%E5%89%8D%E7%AB%AF/">重拾前端</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/react/">react</a></span></div><div class="content">前言一些废话和个人感悟，看干货的直接跳过….到jsx
重识前端断断续续也写了大半年了。里面基本上都是个人技术栈的积累，以及面试题的回答。感兴趣的伙伴可以点到我的主页去看。
说说今天的主角-React吧。React的源码之前一直想要去阅读学习的，也确确实实在看了，但是经常看着看着就发困。然后就开始偷懒 ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><span class="space">…</span><a class="page-number" href="/page/5/">5</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-fw fa-chevron-right" aria-hidden="true"></i></a></div></nav></div><div class="aside_content" id="aside_content"><div class="card-widget card-info"><div class="card-content"><div class="card-info-avatar is-center"><img class="avatar-img" src="/img/avatar.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">Derrick</div><div class="author-info__description">Derrick的博客, 不定期更新</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives"><div class="headline">文章</div><div class="length_num">41</div></a></div><div class="card-info-data-item is-center"> <a href="/tags"><div class="headline">标签</div><div class="length_num">44</div></a></div><div class="card-info-data-item is-center"> <a href="/categories"><div class="headline">分类</div><div class="length_num">19</div></a></div></div><div class="card-info-bookmark is-center"><a class="bookmark button--primary button--animated" id="bookmark-it" href="javascript:;" title="加入书签" target="_self"><i class="fa fa-bookmark" aria-hidden="true"></i><span>加入书签</span></a></div><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/derricktel" target="_blank" title="Github"><i class="fa fa-github" aria-hidden="true"></i></a><a class="social-icon" href="[email protected]" target="_blank" title="Email"><i class="fa fa-envelope" aria-hidden="true"></i></a></div></div></div><div class="card-widget card-announcement"><div class="card-content"><div class="item-headline"><i class="fa fa-bullhorn card-announcement-animation" aria-hidden="true"></i><span>公告</span></div><div class="announcement_content">感谢访问，若喜欢请收藏或者转发哦 ^_^</div></div></div><div class="card-widget card-recent-post"><div class="card-content"><div class="item-headline"><i class="fa fa-history" aria-hidden="true"></i><span>最新文章</span></div><div class="aside-recent-item"> <div class="aside-recent-post"><a href="/2023/03/07/%E6%96%B0%E6%9D%A5%E7%9A%84%E5%90%8C%E4%BA%8B%E9%97%AE%E6%88%91%E4%B8%BA%E4%BB%80%E4%B9%88canvas%E9%87%8C%E9%9D%A2%E6%98%8E%E6%98%8E%E4%BB%80%E4%B9%88%E9%83%BD%E6%B2%A1%E6%9C%89%EF%BC%8C%E5%8D%B4%E8%BF%99%E4%B9%88%E7%BB%9A%E7%83%82/"><div class="aside-post-cover"><img class="aside-post-bg lazyload" data-src="/image/cover/canvas.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" title="前端妹子问我为什么canvas里面明明什么都没有，却这么绚烂" alt="前端妹子问我为什么canvas里面明明什么都没有，却这么绚烂"/></div><div class="aside-post-title"><div class="aside-post_title" href="/2023/03/07/%E6%96%B0%E6%9D%A5%E7%9A%84%E5%90%8C%E4%BA%8B%E9%97%AE%E6%88%91%E4%B8%BA%E4%BB%80%E4%B9%88canvas%E9%87%8C%E9%9D%A2%E6%98%8E%E6%98%8E%E4%BB%80%E4%B9%88%E9%83%BD%E6%B2%A1%E6%9C%89%EF%BC%8C%E5%8D%B4%E8%BF%99%E4%B9%88%E7%BB%9A%E7%83%82/" title="前端妹子问我为什么canvas里面明明什么都没有，却这么绚烂">前端妹子问我为什么canvas里面明明什么都没有，却这么绚烂</div><time class="aside-post_meta post-meta__date" title="发表于 2023-03-07 10:22:37">2023-03-07</time></div></a></div><div class="aside-recent-post"><a href="/2023/03/01/%E9%87%8D%E7%94%9F%E4%B9%8B%E6%88%91%E6%98%AFSVG(2)-%E7%A5%9E%E4%B9%8B%E5%8F%B3%E6%89%8Bpath/"><div class="aside-post-cover"><img class="aside-post-bg lazyload" data-src="/image/cover/svg.png" onerror="this.onerror=null;this.src='/img/404.jpg'" title="重生之我是SVG(2)-神之右手path" alt="重生之我是SVG(2)-神之右手path"/></div><div class="aside-post-title"><div class="aside-post_title" href="/2023/03/01/%E9%87%8D%E7%94%9F%E4%B9%8B%E6%88%91%E6%98%AFSVG(2)-%E7%A5%9E%E4%B9%8B%E5%8F%B3%E6%89%8Bpath/" title="重生之我是SVG(2)-神之右手path">重生之我是SVG(2)-神之右手path</div><time class="aside-post_meta post-meta__date" title="发表于 2023-03-01 14:41:12">2023-03-01</time></div></a></div><div class="aside-recent-post"><a href="/2023/02/27/%E9%87%8D%E7%94%9F%E4%B9%8B%E6%88%91%E6%98%AFSVG(1)-%E5%85%A5%E9%97%A8/"><div class="aside-post-cover"><img class="aside-post-bg lazyload" data-src="/image/cover/svg.png" onerror="this.onerror=null;this.src='/img/404.jpg'" title="重生之我是SVG(1)-入门" alt="重生之我是SVG(1)-入门"/></div><div class="aside-post-title"><div class="aside-post_title" href="/2023/02/27/%E9%87%8D%E7%94%9F%E4%B9%8B%E6%88%91%E6%98%AFSVG(1)-%E5%85%A5%E9%97%A8/" title="重生之我是SVG(1)-入门">重生之我是SVG(1)-入门</div><time class="aside-post_meta post-meta__date" title="发表于 2023-02-27 10:39:56">2023-02-27</time></div></a></div><div class="aside-recent-post"><a href="/2021/06/30/%E3%80%90%E9%87%8D%E8%AF%86%E5%89%8D%E7%AB%AF%E3%80%91React%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%EF%BC%88%E5%9B%9B%EF%BC%89/"><div class="aside-post-cover"><img class="aside-post-bg lazyload" data-src="/image/cover/react.png" onerror="this.onerror=null;this.src='/img/404.jpg'" title="【重识前端】React源码阅读（四）" alt="【重识前端】React源码阅读（四）"/></div><div class="aside-post-title"><div class="aside-post_title" href="/2021/06/30/%E3%80%90%E9%87%8D%E8%AF%86%E5%89%8D%E7%AB%AF%E3%80%91React%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%EF%BC%88%E5%9B%9B%EF%BC%89/" title="【重识前端】React源码阅读（四）">【重识前端】React源码阅读（四）</div><time class="aside-post_meta post-meta__date" title="发表于 2021-06-30 14:08:31">2021-06-30</time></div></a></div><div class="aside-recent-post"><a href="/2021/06/24/%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%B0%8F%E4%BC%99%E5%AD%90canvas%E4%BD%A0%E7%9F%A5%E9%81%93%E5%A4%9A%E5%B0%91%E5%95%8A-%E5%A5%B8%E7%AC%91/"><div class="aside-post-cover"><img class="aside-post-bg lazyload" data-src="/image/cover/webpack.png" onerror="this.onerror=null;this.src='/img/404.jpg'" title="面试官：小伙子canvas你知道多少啊(奸笑)" alt="面试官：小伙子canvas你知道多少啊(奸笑)"/></div><div class="aside-post-title"><div class="aside-post_title" href="/2021/06/24/%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%B0%8F%E4%BC%99%E5%AD%90canvas%E4%BD%A0%E7%9F%A5%E9%81%93%E5%A4%9A%E5%B0%91%E5%95%8A-%E5%A5%B8%E7%AC%91/" title="面试官：小伙子canvas你知道多少啊(奸笑)">面试官：小伙子canvas你知道多少啊(奸笑)</div><time class="aside-post_meta post-meta__date" title="发表于 2021-06-24 10:59:42">2021-06-24</time></div></a></div></div></div></div><div class="card-widget card-categories"><div class="card-content"><div class="item-headline"><i class="fa fa-folder-open" aria-hidden="true"></i><span>分类</span></div><ul class="aside-category-item"> <li class="aside-category-list"><a class="aside-category-list_link" href="/categories/Ant-Design/"><span class="aside-category-list_name">Ant-Design</span><span class="aside-category-list_length">2</span></a></li><ul class="aside-category-item child"><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/Ant-Design/JavaScript/"><span class="aside-category-list_name">JavaScript</span><span class="aside-category-list_length">1</span></a></li></ul><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/Ant-Design-Pro/"><span class="aside-category-list_name">Ant-Design-Pro</span><span class="aside-category-list_length">1</span></a></li><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/CSS/"><span class="aside-category-list_name">CSS</span><span class="aside-category-list_length">1</span></a></li><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/ES6/"><span class="aside-category-list_name">ES6</span><span class="aside-category-list_length">1</span></a></li><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/HTTP/"><span class="aside-category-list_name">HTTP</span><span class="aside-category-list_length">2</span></a></li><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/Java/"><span class="aside-category-list_name">Java</span><span class="aside-category-list_length">2</span></a></li><ul class="aside-category-item child"><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/Java/Spring-Boot/"><span class="aside-category-list_name">Spring-Boot</span><span class="aside-category-list_length">2</span></a></li></ul><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/JavaScript/"><span class="aside-category-list_name">JavaScript</span><span class="aside-category-list_length">1</span></a></li><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/React/"><span class="aside-category-list_name">React</span><span class="aside-category-list_length">3</span></a></li><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/WebPack/"><span class="aside-category-list_name">WebPack</span><span class="aside-category-list_length">1</span></a></li><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/Webpack/"><span class="aside-category-list_name">Webpack</span><span class="aside-category-list_length">1</span></a></li><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/Web%E5%89%8D%E7%AB%AF/"><span class="aside-category-list_name">Web前端</span><span class="aside-category-list_length">2</span></a></li><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/github/"><span class="aside-category-list_name">github</span><span class="aside-category-list_length">1</span></a></li><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/react/"><span class="aside-category-list_name">react</span><span class="aside-category-list_length">1</span></a></li><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/%E5%89%8D%E7%AB%AF/"><span class="aside-category-list_name">前端</span><span class="aside-category-list_length">1</span></a></li><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/%E5%8D%9A%E5%AE%A2/"><span class="aside-category-list_name">博客</span><span class="aside-category-list_length">1</span></a></li><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/%E9%87%8D%E6%8B%BE%E5%89%8D%E7%AB%AF/"><span class="aside-category-list_name">重拾前端</span><span class="aside-category-list_length">19</span></a></li><li class="aside-category-list"><a class="aside-category-list_link" href="/categories/%E9%9D%A2%E7%BB%8F/"><span class="aside-category-list_name">面经</span><span class="aside-category-list_length">1</span></a></li></ul></div></div><div class="card-widget card-tags"><div class="card-content"><div class="item-headline"><i class="fa fa-tags" aria-hidden="true"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Ant-Design/" style="font-size: 16px; color: #999">Ant-Design</a> <a href="/tags/Ant-Design-Form/" style="font-size: 18px; color: #999da3">Ant-Design-Form</a> <a href="/tags/Ant-Design-Pro/" style="font-size: 16px; color: #999">Ant-Design-Pro</a> <a href="/tags/Ant-Design%E7%BB%84%E4%BB%B6%E5%90%88%E9%9B%86/" style="font-size: 16px; color: #999">Ant-Design组件合集</a> <a href="/tags/CSS/" style="font-size: 16px; color: #999">CSS</a> <a href="/tags/CSS-Module/" style="font-size: 16px; color: #999">CSS-Module</a> <a href="/tags/ES6/" style="font-size: 16px; color: #999">ES6</a> <a href="/tags/GitHub/" style="font-size: 16px; color: #999">GitHub</a> <a href="/tags/HTML/" style="font-size: 16px; color: #999">HTML</a> <a href="/tags/HTTP/" style="font-size: 18px; color: #999da3">HTTP</a> <a href="/tags/Hexo/" style="font-size: 16px; color: #999">Hexo</a> <a href="/tags/JWT/" style="font-size: 16px; color: #999">JWT</a> <a href="/tags/Java/" style="font-size: 18px; color: #999da3">Java</a> <a href="/tags/JavaScript/" style="font-size: 24px; color: #99a9bf">JavaScript</a> <a href="/tags/React/" style="font-size: 22px; color: #99a5b6">React</a> <a href="/tags/React-Router/" style="font-size: 16px; color: #999">React-Router</a> <a href="/tags/ReactHook/" style="font-size: 18px; color: #999da3">ReactHook</a> <a href="/tags/Spring-Boot/" style="font-size: 16px; color: #999">Spring-Boot</a> <a href="/tags/Spring-Boot-2-0/" style="font-size: 16px; color: #999">Spring-Boot-2.0</a> <a href="/tags/State/" style="font-size: 16px; color: #999">State</a> <a href="/tags/UMI/" style="font-size: 16px; color: #999">UMI</a> <a href="/tags/WebPack/" style="font-size: 16px; color: #999">WebPack</a> <a href="/tags/Webpack/" style="font-size: 16px; color: #999">Webpack</a> <a href="/tags/Web%E5%89%8D%E7%AB%AF/" style="font-size: 16px; color: #999">Web前端</a> <a href="/tags/clean-webpack-plugin/" style="font-size: 16px; color: #999">clean-webpack-plugin</a> <a href="/tags/github/" style="font-size: 16px; color: #999">github</a> <a href="/tags/react/" style="font-size: 20px; color: #99a1ac">react</a> <a href="/tags/svg/" style="font-size: 18px; color: #999da3">svg</a> <a href="/tags/this/" style="font-size: 16px; color: #999">this</a> <a href="/tags/%E5%80%92%E8%AE%A1%E6%97%B6/" style="font-size: 16px; color: #999">倒计时</a> <a href="/tags/%E5%8E%9F%E5%9E%8B-%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size: 16px; color: #999">原型/原型链</a> <a href="/tags/%E5%AD%A6%E4%B9%A0%E6%A1%86%E6%9E%B6/" style="font-size: 16px; color: #999">学习框架</a> <a href="/tags/%E5%AD%A6%E4%B9%A0%E7%9B%AE%E5%BD%95/" style="font-size: 16px; color: #999">学习目录</a> <a href="/tags/%E6%A8%A1%E5%9D%97/" style="font-size: 16px; color: #999">模块</a> <a href="/tags/%E6%B5%85%E6%8B%B7%E8%B4%9D/" style="font-size: 16px; color: #999">浅拷贝</a> <a href="/tags/%E6%B5%8F%E8%A7%88%E5%99%A8/" style="font-size: 16px; color: #999">浏览器</a> <a href="/tags/%E6%B7%B1%E6%8B%B7%E8%B4%9D/" style="font-size: 16px; color: #999">深拷贝</a> <a href="/tags/%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB/" style="font-size: 18px; color: #999da3">源码阅读</a> <a href="/tags/%E7%B3%BB%E7%BB%9F%E6%80%A7%E7%9A%84%E5%AD%A6%E4%B9%A0/" style="font-size: 16px; color: #999">系统性的学习</a> <a href="/tags/%E7%BB%A7%E6%89%BF/" style="font-size: 16px; color: #999">继承</a> <a href="/tags/%E8%84%9A%E6%89%8B%E6%9E%B6/" style="font-size: 16px; color: #999">脚手架</a> <a href="/tags/%E8%B7%A8%E5%9F%9F/" style="font-size: 16px; color: #999">跨域</a> <a href="/tags/%E9%97%AD%E5%8C%85/" style="font-size: 16px; color: #999">闭包</a> <a href="/tags/%E9%9D%A2%E7%BB%8F/" style="font-size: 16px; color: #999">面经</a></div></div></div><div class="card-widget card-archives"><div class="card-content"><div class="item-headline"><i class="fa fa-archive" aria-hidden="true"></i><span>归档</span></div><ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/03/"><span class="archive-list-date">2023年03月</span><span class="archive-list-count">2</span></a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/02/"><span class="archive-list-date">2023年02月</span><span class="archive-list-count">1</span></a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/06/"><span class="archive-list-date">2021年06月</span><span class="archive-list-count">4</span></a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/04/"><span class="archive-list-date">2021年04月</span><span class="archive-list-count">2</span></a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/03/"><span class="archive-list-date">2021年03月</span><span class="archive-list-count">1</span></a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/01/"><span class="archive-list-date">2021年01月</span><span class="archive-list-count">1</span></a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/11/"><span class="archive-list-date">2020年11月</span><span class="archive-list-count">1</span></a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/10/"><span class="archive-list-date">2020年10月</span><span class="archive-list-count">2</span></a></li><li class="archive-list-item is-center"><a class="archive-list-link-more" href="/archives" >查看更多</a></li></ul></div></div><div class="card-widget card-webinfo"><div class="card-content"><div class="item-headline"><i class="fa fa-line-chart" aria-hidden="true"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="webinfo-article-name">文章数目 :</div><div class="webinfo-article-count">41</div></div><div class="webinfo-item"><div class="webinfo-runtime-name">已运行时间 :</div><div class="webinfo-runtime-count" id="webinfo-runtime-count" start_date="6/7/2018 00:00:00"> </div></div><div class="webinfo-item"> <div class="webinfo-site-uv-name">本站访客数 :</div><div class="webinfo-site-uv-count" id="busuanzi_value_site_uv"></div></div><div class="webinfo-item"><div class="webinfo-site-name">本站总访问量 :</div><div class="webinfo-site-pv-count" id="busuanzi_value_site_pv"></div></div></div></div></div></div></main><footer id="footer" data-type="color"><div id="footer-wrap"><div class="copyright">©2020 - 2023 By Derrick</div><div class="framework-info"><span>驱动 </span><a href="https://hexo.io" target="_blank" rel="noopener"><span>Hexo</span></a><span class="footer-separator">|</span><span>主题 </span><a href="https://github.com/jerryc127/hexo-theme-butterfly" target="_blank" rel="noopener"><span>Butterfly</span></a></div></div></footer></div><section class="rightside" id="rightside"><div id="rightside-config-hide"><a class="translate_chn_to_cht" id="translateLink" href="javascript:translatePage();" title="简繁转换" target="_self">繁</a><i class="darkmode fa fa-moon-o" id="darkmode" title="夜间模式"></i></div><div id="rightside-config-show"><div id="rightside_config" title="设置"><i class="fa fa-cog" aria-hidden="true"></i></div><i class="fa fa-arrow-up" id="go-up" title="回到顶部" aria-hidden="true"></i></div></section><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page@latest/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/lazysizes@latest/lazysizes.min.js" async=""></script><script src="https://cdn.jsdelivr.net/npm/typed.js"></script><script>var subtitleEffect = true
if (subtitleEffect){
var typed = new Typed("#subtitle", {
strings: '今日事,今日畢,Never put off till tomorrow what you can do today'.split(","),
startDelay: 300,
typeSpeed: 150,
loop: true,
backSpeed: 50
})
}else{
document.getElementById("subtitle").innerHTML = '今日事,今日畢'
}</script></body></html>