-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
270 lines (235 loc) · 32.3 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
<!DOCTYPE html><html lang="en" 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.0,viewport-fit=cover"><title>hxm-blog</title><meta name="author" content="hxm"><meta name="copyright" content="hxm"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta property="og:type" content="website">
<meta property="og:title" content="hxm-blog">
<meta property="og:url" content="http://hxmhxm1.github.io/index.html">
<meta property="og:site_name" content="hxm-blog">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png">
<meta property="article:author" content="hxm">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://hxmhxm1.github.io/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: undefined,
translate: undefined,
noticeOutdate: undefined,
highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
copy: {
success: 'Copy successfully',
error: 'Copy error',
noSupport: 'The browser does not support'
},
relativeDate: {
homepage: false,
post: false
},
runtime: '',
dateSuffix: {
just: 'Just',
min: 'minutes ago',
hour: 'hours ago',
day: 'days ago',
month: 'months ago'
},
copyright: undefined,
lightbox: 'fancybox',
Snackbar: undefined,
source: {
justifiedGallery: {
js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
}
},
isPhotoFigcaption: false,
islazyload: false,
isAnchor: false,
percent: {
toc: true,
rightside: false,
},
autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: 'hxm-blog',
isPost: false,
isHome: true,
isHighlightShrink: false,
isToc: false,
postUpdate: '2024-12-30 15:40:51'
}</script><noscript><style type="text/css">
#nav {
opacity: 1
}
.justified-gallery img {
opacity: 1
}
#recent-posts time,
#post-meta time {
display: inline !important
}
</style></noscript><script>(win=>{
win.saveToLocal = {
set: function setWithExpiry(key, value, ttl) {
if (ttl === 0) return
const now = new Date()
const expiryDay = ttl * 86400000
const item = {
value: value,
expiry: now.getTime() + expiryDay,
}
localStorage.setItem(key, JSON.stringify(item))
},
get: function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = new Date()
if (now.getTime() > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}
win.getScript = url => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onerror = reject
script.onload = script.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
script.onload = script.onreadystatechange = null
resolve()
}
document.head.appendChild(script)
})
win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = url
if (id) link.id = id
link.onerror = reject
link.onload = link.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
link.onload = link.onreadystatechange = null
resolve()
}
document.head.appendChild(link)
})
win.activateDarkMode = function () {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
win.activateLightMode = function () {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
const t = saveToLocal.get('theme')
if (t === 'dark') activateDarkMode()
else if (t === 'light') activateLightMode()
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
if (asideStatus === 'hide') {
document.documentElement.classList.add('hide-aside')
} else {
document.documentElement.classList.remove('hide-aside')
}
}
const detectApple = () => {
if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
document.documentElement.classList.add('apple')
}
}
detectApple()
})(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">33</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">10</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">14</div></a></div><hr/></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header"><nav id="nav"><span id="blog-info"><a href="/" title="hxm-blog"><span class="site-name">hxm-blog</span></a></span><div id="menus"><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">hxm-blog</h1></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/30/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" title="性能优化">性能优化</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2024-12-30T07:02:54.537Z" title="Created 2024-12-30 15:02:54">2024-12-30</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/">性能优化</a></span></div><div class="content">常见的性能指标有哪些
LCP：页面的最大内容绘制
优化图片资源，比如说压缩图片，图片懒加载
使用defer\async\preload这些异步加载资源，避免js阻塞渲染
使用服务端渲染的方式优化首屏渲染时间，或者使用缓存等方式
CLS：累计布局偏移，通过计算布局移动的频率和距离来衡量页面稳定性
预留空间防止页面布局移动，在图片或者其他媒体加载前，使用heigh\width属性预留空间
使用灵活的容器尺寸等方式
FID：首次输入延迟时间
减少js执行时间：通过代码分割、延迟加载非关键js文件，或将非业务逻辑代码推迟到页面空闲时间执行减少主线程压力
优化dom时间处理程序：避免在dom元素上使用过度复杂的逻辑，考虑使用requestAnimationFrame优化滚动事件处理
使用web worker,将耗时任务移出主线程，确保页面渲染和响应不受影响
优化的方式有哪些
配置nginx中的gzip压缩代码，http2等优化配置
代码分割、异步加载、懒加载，加快应用启动时间
使用cdn、缓存等策略
服务端渲染
减少首屏空白时间
代码优化、减少不必要的渲染
例子：围棋局面渲染的 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/30/tapable/" title="tapable">tapable</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2024-12-30T06:56:19.676Z" title="Created 2024-12-30 14:56:19">2024-12-30</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E6%89%93%E5%8C%85%E5%B7%A5%E5%85%B7/">打包工具</a></span></div><div class="content">tapable是什么控制事件流中的一个库，也是webpack中plugin中使用的一个库，webpack中的plugin是在打包过程中的不同阶段去执行的一些钩子
如何使用 tap(注册时调用) call(调用时触发) syncHook举例
12345678910111213141516const { SyncHook } = require('tapable'); // 实例化同步钩子 const syncHook = new SyncHook(['name']); // 注册事件 syncHook.tap('A', (name) => { console.log('A:', name); }); syncHook.tap('B', (name) => { console.log('B:', name); }); // 触发事件 syncHook.call('breez ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/30/nodeJS/" title="nodeJS相关概念">nodeJS相关概念</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2024-12-30T06:50:28.902Z" title="Created 2024-12-30 14:50:28">2024-12-30</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/nodejs/">nodejs</a></span></div><div class="content">什么是中间件、有什么作用 网络请求过程中某环节处理事情的一个阶段、一般是一个函数，可以获取到请求对象和响应结果，以及应用程序的下一个中间函数；中间函数通常用于 执行一些处理逻辑、修改请求或响应对象，或者终止请求-响应循环
stream概念 是处理数据流的一种接口格式；包括读文件流、写文件流； 它运行逐块地数据或者写入数据，而不需要一次性将整个数据加载到内存中， 流具有以下特点： 实时性和高效性
buffer概念 是二进制存储单位，buffer类被引用于处理TCP流，文件系统操作、以及其他二进制数据场景 buffer数据有以下特点： 固定大小、快速读写、处理二进制数据（如图片、音频等
nodejs是单线程，如何处理并发请求 node.js使用单线程来处理请求，但通过事件驱动和非阻塞I/O操作特性，使其可以高效处理大量并发连接，而不会阻塞线程 主线程是单线程的，但是得益于事件循环，使得它可以处理大量的并发请求
对于服务端渲染会加大服务器压力，如何取处理大量并发请求呢
node.js虽然是单线程的，但是它通过事件循环机制和非阻塞的I/O端口操作特性，使其可 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/30/nextTick/" title="nextTick">nextTick</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2024-12-30T06:33:23.985Z" title="Created 2024-12-30 14:33:23">2024-12-30</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/vue%E4%B8%ADapi/">vue中api</a></span></div><div class="content">是什么，如何使用 在页面下一次渲染完成后执行的回调函数 nextTick((callBack)).then(() => {})
实现原理
背景：js是单线程的，但是存在任务队列机制可以去处理异步任务；任务队列中又分为宏任务和微任务，其中微任务优先级高于宏任务；当执行栈中的任务执行完了之后，会把任务队列中的微任务全部执行，然后再取宏任务放到执行栈中执行，执行完了之后再重新执行所有微任务，以此形成循环
nextTick也是利用了这个原理，具体实现是通过promise(微任务)，setTimeOut(宏任务)实现的
判断浏览器是不是支持promise,支持的话创建一个promise,把回调放到promise.then(() => {})中
判断是不是支持mutationObserve,这个方法会在页面dom元素发生更改后执行，这也可以保证在下一次页面渲染后立即执行
如果上面方法都不支持的话，就用setTimeOut(() => callBack(), 0)代替
</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/30/vue%E4%B8%AD%E7%BB%84%E5%90%88%E5%BC%8F%E5%92%8C%E9%80%89%E9%A1%B9%E6%97%B6api/" title="vue组合式和选项式api">vue组合式和选项式api</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2024-12-30T03:53:44.313Z" title="Created 2024-12-30 11:53:44">2024-12-30</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/vue/">vue</a></span></div><div class="content">如何区分哪个时组合式，哪个是选项式
选项式：vue2之前那套，data, mounted,methods；类对象模型
组合式：在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题，这种形式更自由灵活
选项式有什么优点
相同代码可以放到一起，提高代码可读性
公用逻辑可以抽离成hook,在不同组件中使用
对ts以及ts类型推导有更好支持
打包体积小
</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/30/vite/" title="vite介绍">vite介绍</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2024-12-30T02:56:25.687Z" title="Created 2024-12-30 10:56:25">2024-12-30</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E6%89%93%E5%8C%85%E5%B7%A5%E5%85%B7/">打包工具</a></span></div><div class="content">vite的优势
更快的启动和热更新
vite将代码分为“源码”和“依赖”，依赖使用esbuild进行打包，并使用强制缓存；源码依赖于浏览器支持ESM机制，直接通过http请求进行按需加载，并使用协商缓存
vite的缺点
首屏加载慢
因为没有对文件进行bundle操作，包括（tree-shaking等）会导致大量的http请求
dev服务期间会对文件进行转换操作，需要时间,尽管预构建很快，但是会阻塞首屏加载
vite需要把webpack dev启动完成的工作，移接到浏览器中，导致浏览器响应时间变长；但由于缓存的存在，在第一次加载完成后，再次reload的时候性能变好很多
懒加载慢
和首屏加载一样，动态加载文件需要对源文件进行转换操作，可能会出现大量的http情趣，懒加载性能受到影响
vite什么生产上仍需要打包因为源码如何存在多层依赖嵌套，会影响性能，相当于绕远路；还是需要进行tree-shaking、懒加载、chunk分割
为什么在生产构建时不使用esbuildvite现在的插件和esbuild存在不兼容的情况，后期会使用rolldowm、rollup_swc(speed ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/30/arrayBuffer%E5%92%8Cblob/" title="arrayBuffer和blob">arrayBuffer和blob</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2024-12-30T02:10:05.594Z" title="Created 2024-12-30 10:10:05">2024-12-30</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/">数据类型</a></span></div><div class="content">什么是arrayBuffer
arrayBuffer对象表示原始的二进制数据缓冲区
不能直接操作arrayBuffer,只能通过类型化数组或者DataView。它们会将缓存区中的数据表示为特定格式，并通过这些特定格式来读取缓冲区中的内容
是可以转移的对象，存储在内存中
什么是blob
blob表示不可变的、原始数据的类文件对象，存储在磁盘上
File接口继承blob的功能并将其扩展，应用到用户系统的文件上
是浏览器默认的二进制文件类型，常用于音频视频文件
arrayBuffer和blob关
都是处理二进制数据的对象
可以相互转化arrayBuffer -> blob new Blob([arrayBuffer], {type: ‘application/json’})blob -> arrayBuffer const reader = new FileReader() reader.addEventListener(‘loadend’, () => {// reader.result 包含被转化类型化数 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/02/serviceWorker%E4%B8%BA%E4%BB%80%E4%B9%88%E5%8F%AF%E4%BB%A5%E6%8F%90%E5%89%8D%E5%8A%A0%E8%BD%BD%E8%B5%84%E6%BA%90/" title="为什么serviceWorker可以提前加载资源">为什么serviceWorker可以提前加载资源</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2024-12-02T08:15:27.255Z" title="Created 2024-12-02 16:15:27">2024-12-02</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E7%BD%91%E7%BB%9C%E4%BB%A3%E7%90%86/">网络代理</a></span></div><div class="content">一、service worker 和 axios ajax都是异步请求，那为什么说service worker可以预加载资源，减少页面首屏空白时间* service worker是在浏览器中重新开启一个线程，拦截和处理网络请求、实现离线访问、资源缓存等功能
* ajax 或 axios用于发送异步请求，通常在页面主线程中执行，用户获取数据或与服务器进行通信
* service worker可以在页面加载时预先加载所需的资源（html\css\js文件等），这些资源可以在用户访问时从缓存中快速获取，减少首屏空白时间，相比之下，axios/ajax通常适用于页面加载后根据用户的动态获取数据，而无法像service worker这样提前缓存整个资源文件
二、service worker功能* 网络请求
* 离线访问
* 资源缓存、自定义资源缓存
* 后台同步
* 安全性
三、service worker如何使用</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/02/weakMap%E5%92%8CweakSet/" title="weakMap和weakSet">weakMap和weakSet</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2024-12-02T07:49:56.555Z" title="Created 2024-12-02 15:49:56">2024-12-02</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/js%E4%B8%AD%E7%9A%84api/">js中的api</a></span></div><div class="content">一、为什么要有weakMap和weakSet 帮助管理内存的数据结构
二、和map、set区别 1、weakMap和weakSet键只能是对象或者symbol,因此他们设计的初衷是为了解决对象引用导致的内存泄漏问题；在这两种数据结构中，键都是弱引用， 键值的引用不会阻止被引用对象被垃圾回收机制清除；如果键是基本数据类型，在weakMap和weakSet中会引发错误，因此基本数据类型不会被视为弱引用，也不会出发垃圾回收
三、什么场合下使用 需要弱引用的场合，比如键值是对象并且想在没有使用时自动被垃圾回收机制回收的数据，比如私有数据、缓存
四、垃圾回收机制 引用计数法 标记清除法（目前大部分使用，是对引用计数法的一个优化）
</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/02/babel/" title="babel\core.js使用">babel\core.js使用</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2024-12-02T07:29:43.011Z" title="Created 2024-12-02 15:29:43">2024-12-02</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%85%BC%E5%AE%B9%E6%80%A7/">兼容性</a></span></div><div class="content">一、babel、core.js是什么babel是js的编译器，主要是将ES6这些比较新的语法转成es5这种向后兼容的浏览器可以支持的语法，但是babel没法包含所有的新的api库，比如js比较新的api，因此需要在babel中增加polyfill贴片，core.js就是包含这种贴片的库二、如何配置(1)安装babel npm install –save-dev @babel/core @babel/cli npm install –save-dev @babel/preset-env npm install core-js(2)在项目根目录配置.babelrc文件{ “presets”: [ [“@babel/preset-env”, { “useBuiltIns”: “usage”, “corejs”: 3 }] ]， “plugins”: [ {
}
]}注：这里的presets是指已经预设的一组polyfill库
在需要转换的页面上面直接引入import “core-js&# ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/#content-inner">2</a><span class="space">…</span><a class="page-number" href="/page/4/#content-inner">4</a><a class="extend next" rel="next" href="/page/2/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">hxm</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">33</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">10</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">14</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>Announcement</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>Recent Post</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2024/12/30/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" title="性能优化">性能优化</a><time datetime="2024-12-30T07:02:54.537Z" title="Created 2024-12-30 15:02:54">2024-12-30</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2024/12/30/tapable/" title="tapable">tapable</a><time datetime="2024-12-30T06:56:19.676Z" title="Created 2024-12-30 14:56:19">2024-12-30</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2024/12/30/nodeJS/" title="nodeJS相关概念">nodeJS相关概念</a><time datetime="2024-12-30T06:50:28.902Z" title="Created 2024-12-30 14:50:28">2024-12-30</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2024/12/30/nextTick/" title="nextTick">nextTick</a><time datetime="2024-12-30T06:33:23.985Z" title="Created 2024-12-30 14:33:23">2024-12-30</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2024/12/30/vue%E4%B8%AD%E7%BB%84%E5%90%88%E5%BC%8F%E5%92%8C%E9%80%89%E9%A1%B9%E6%97%B6api/" title="vue组合式和选项式api">vue组合式和选项式api</a><time datetime="2024-12-30T03:53:44.313Z" title="Created 2024-12-30 11:53:44">2024-12-30</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
<i class="fas fa-folder-open"></i>
<span>Categories</span>
<a class="card-more-btn" href="/categories/" title="More">
<i class="fas fa-angle-right"></i></a>
</div>
<ul class="card-category-list" id="aside-cat-list">
<li class="card-category-list-item "><a class="card-category-list-link" href="/categories/UI%E7%BB%84%E4%BB%B6/"><span class="card-category-list-name">UI组件</span><span class="card-category-list-count">5</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/css/"><span class="card-category-list-name">css</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/js%E4%B8%AD%E7%9A%84api/"><span class="card-category-list-name">js中的api</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/nodejs/"><span class="card-category-list-name">nodejs</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/vue/"><span class="card-category-list-name">vue</span><span class="card-category-list-count">3</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/vue%E4%B8%ADapi/"><span class="card-category-list-name">vue中api</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83/"><span class="card-category-list-name">代码规范</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%85%BC%E5%AE%B9%E6%80%A7/"><span class="card-category-list-name">兼容性</span><span class="card-category-list-count">1</span></a></li>
</ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>Tags</span></div><div class="card-tag-cloud"><a href="/tags/arrayBuffer%E5%92%8Cblob/" style="font-size: 1.1em; color: #999">arrayBuffer和blob</a> <a href="/tags/loadsh/" style="font-size: 1.1em; color: #999">loadsh</a> <a href="/tags/nextTick/" style="font-size: 1.1em; color: #999">nextTick</a> <a href="/tags/vue%E4%B8%ADapi/" style="font-size: 1.1em; color: #999">vue中api</a> <a href="/tags/webpack%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86tapable/" style="font-size: 1.1em; color: #999">webpack实现原理tapable</a> <a href="/tags/dayjs/" style="font-size: 1.1em; color: #999">dayjs</a> <a href="/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/" style="font-size: 1.1em; color: #999">网络安全</a> <a href="/tags/vite%E4%BB%8B%E7%BB%8D/" style="font-size: 1.1em; color: #999">vite介绍</a> <a href="/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" style="font-size: 1.1em; color: #999">性能优化</a> <a href="/tags/nodejs/" style="font-size: 1.1em; color: #999">nodejs</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>Archives</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/12/"><span class="card-archive-list-date">December 2024</span><span class="card-archive-list-count">12</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/05/"><span class="card-archive-list-date">May 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/12/"><span class="card-archive-list-date">December 2023</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">August 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/07/"><span class="card-archive-list-date">July 2023</span><span class="card-archive-list-count">15</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/05/"><span class="card-archive-list-date">May 2023</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>Info</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">Article :</div><div class="item-count">33</div></div><div class="webinfo-item"><div class="item-name">UV :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">PV :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">Last Push :</div><div class="item-count" id="last-push-date" data-lastPushDate="2024-12-30T07:40:51.106Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">©2020 - 2024 By hxm</div><div class="framework-info"><span>Framework </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>Theme </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="Switch Between Light And Dark Mode"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="Toggle between single-column and double-column"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="Setting"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="Back To Top"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>