-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
178 lines (162 loc) · 30.1 KB
/
index.html
File metadata and controls
178 lines (162 loc) · 30.1 KB
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
<!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.0,viewport-fit=cover"><title>前端技术 - 前端技术</title><meta name="author" content="pz"><meta name="copyright" content="pz"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="前端技术">
<meta property="og:type" content="website">
<meta property="og:title" content="前端技术">
<meta property="og:url" content="http://example.com/index.html">
<meta property="og:site_name" content="前端技术">
<meta property="og:description" content="前端技术">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://example.com/img/tx2.jpg">
<meta property="article:author" content="pz">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/img/tx2.jpg"><link rel="shortcut icon" href="/img/tx2.jpg"><link rel="canonical" href="http://example.com/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"><script>
(() => {
const saveToLocal = {
set: (key, value, ttl) => {
if (!ttl) return
const expiry = Date.now() + ttl * 86400000
localStorage.setItem(key, JSON.stringify({ value, expiry }))
},
get: key => {
const itemStr = localStorage.getItem(key)
if (!itemStr) return undefined
const { value, expiry } = JSON.parse(itemStr)
if (Date.now() > expiry) {
localStorage.removeItem(key)
return undefined
}
return value
}
}
window.btf = {
saveToLocal,
getScript: (url, attr = {}) => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
Object.entries(attr).forEach(([key, val]) => script.setAttribute(key, val))
script.onload = script.onreadystatechange = () => {
if (!script.readyState || /loaded|complete/.test(script.readyState)) resolve()
}
script.onerror = reject
document.head.appendChild(script)
}),
getCSS: (url, id) => new Promise((resolve, reject) => {
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = url
if (id) link.id = id
link.onload = link.onreadystatechange = () => {
if (!link.readyState || /loaded|complete/.test(link.readyState)) resolve()
}
link.onerror = reject
document.head.appendChild(link)
}),
addGlobalFn: (key, fn, name = false, parent = window) => {
if (!false && key.startsWith('pjax')) return
const globalFn = parent.globalFn || {}
globalFn[key] = globalFn[key] || {}
globalFn[key][name || Object.keys(globalFn[key]).length] = fn
parent.globalFn = globalFn
}
}
const activateDarkMode = () => {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
const activateLightMode = () => {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
btf.activateDarkMode = activateDarkMode
btf.activateLightMode = activateLightMode
const theme = saveToLocal.get('theme')
theme === 'dark' ? activateDarkMode() : theme === 'light' ? activateLightMode() : null
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
document.documentElement.classList.toggle('hide-aside', asideStatus === 'hide')
}
const detectApple = () => {
if (/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)) {
document.documentElement.classList.add('apple')
}
}
detectApple()
})()
</script><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: undefined,
translate: undefined,
highlight: {"plugin":"highlight.js","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false,"highlightFullpage":false,"highlightMacStyle":false},
copy: {
success: '复制成功',
error: '复制失败',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: false,
post: false
},
runtime: '',
dateSuffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: undefined,
lightbox: 'null',
Snackbar: undefined,
infinitegrid: {
js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid/dist/infinitegrid.min.js',
buttonText: '加载更多'
},
isPhotoFigcaption: false,
islazyload: false,
isAnchor: false,
percent: {
toc: true,
rightside: false,
},
autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: '前端技术',
isPost: false,
isHome: true,
isHighlightShrink: false,
isToc: false,
isShuoshuo: false
}</script><meta name="generator" content="Hexo 7.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img text-center"><img src="/img/tx2.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data text-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">10</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">7</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">5</div></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 目录</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url(/img/city-1.png);"><nav id="nav"><span id="blog-info"><a class="nav-site-title" href="/"><span class="site-name">前端技术</span></a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 目录</span></a></div></div><div id="toggle-menu"><span class="site-page"><i class="fas fa-bars fa-fw"></i></span></div></div></nav><div id="site-info"><h1 id="site-title">前端技术</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 nc" id="recent-posts"><div class="recent-post-items"><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2025/01/01/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-Performance%20API%E5%9F%BA%E7%A1%80/" title="性能优化-Performance API基础">性能优化-Performance API基础</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2025-01-01T05:46:10.000Z" title="发表于 2025-01-01 13:46:10">2025-01-01</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">前言Performance API 是一组在浏览器平台测量和收集性能数据的接口，它允许开发者访问页面加载、资源获取、用户交互、JavaScript执行等性能相关的数据。灵活运用 Performance API 有助于我们将用户的主观体验量化为客观指标，建立以用户为中心的数据监控，更是我们后续开展众多优化后，评估优化效果的主要手段。 常用的接口包括： performance.now()：获取一个高精度的时间戳，单位为毫秒，精度可达微秒。 performance.mark() 和 performance.measure()：用于标记和测量特定代码段的执行时间。 performance.timing：提供详细的页面加载阶段的时间数据。 performance.getEntriesByType()：获取资源加载的详细信息，例如图片、脚本等文件的加载时间。 获取性能记录的方法常用的方法有.getEntries()和 new PerformanceObserver() 1. 回调监听式持续获取这类方法具体指(new...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/31/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-%E8%B5%84%E6%BA%90%E4%BC%98%E5%85%88%E7%BA%A7%E6%8F%90%E7%A4%BA/" title="性能优化-资源优先级提示">性能优化-资源优先级提示</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-12-31T05:46:10.000Z" title="发表于 2024-12-31 13:46:10">2024-12-31</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">预取回 Prefetch预取回提示用于提示浏览器在CPU和网络带宽空闲时，预先下载指定URL的JS，图片等各类资源，存储到浏览器本地缓存中，从而减少该资源文件后续加载的耗时，从而优化用户体验。 具体使用方式是将link标签的rel属性设为prefetch，并将href属性设为目标资源URL，例如 <link rel="prefetch" href="https://github.com/JuniorTour/juniortour.js" />。该标签插入DOM后，将触发一次href属性值对应URL的HTTP请求，并将响应保存到本地的prefetch cache中，但是并不会进一步解析、运行该资源。可以预取回的资源有很多：JS、CSS、各种格式的图片、音频、WASM文件、字体文件、甚至HTML文档本身都可实施 prefetch，预先缓存。 预加载...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/30/vue-vuex%E4%B8%ADmutation%E4%B8%BA%E4%BB%80%E4%B9%88%E4%B8%8D%E8%83%BD%E5%BC%82%E6%AD%A5/" title="vue-vuex中mutation为什么不能异步">vue-vuex中mutation为什么不能异步</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-12-30T05:46:10.000Z" title="发表于 2024-12-30 13:46:10">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">介绍在Vue.js的状态管理库Vuex中，我们经常听到关于为什么在mutation中不应该执行异步操作的建议。今天，让我们深入探讨这个话题，揭示其中的奥秘，为什么异步操作应该交给Action，而mutation保持同步执行。 Why：Mutation要同步状态的追踪与DevTools 在Vuex中，mutation是唯一用于更改状态的途径。每个mutation执行完成后，都会对应到一个新的状态变更。这种同步的特性使得Vue DevTools能够轻松地追踪每一个状态的变化。它能够在每次mutation被调用时打个快照，形成一个状态变更的历史记录。这种机制对于调试和性能优化都非常有帮助。 实现Time-Travel的便利性 由于mutation是同步执行的，状态变更是可预测的，可以准确地知道何时发生了变化。这为实现时光旅行（time-travel）提供了便利。通过DevTools，我们能够回溯到应用的不同状态，轻松地跳转到过去的状态，帮助我们更好地理解应用程序的运行过程。 Reason:...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/29/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-%E8%99%9A%E6%8B%9F%E5%88%97%E8%A1%A8/" title="性能优化-虚拟列表">性能优化-虚拟列表</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-12-29T04:46:10.000Z" title="发表于 2024-12-29 12:46:10">2024-12-29</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">...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/28/Vue-%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B0%81%E8%A3%85-%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/" title="Vue2-数组方法响应式封装-源码分析">Vue2-数组方法响应式封装-源码分析</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-12-28T04:46:10.000Z" title="发表于 2024-12-28 12:46:10">2024-12-28</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/Vue2/">Vue2</a></span></div><div class="content">为什么对数组方法进行封装？在vue中，对响应式处理的是Object.defineProperty对数据进行拦截，而这个方法并不能监听到数组内部变化，数组长度变化，数组截取变化等，所以需要对这些操作进行hack，让Vue能监听到其中变化Vue被监听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。 源码分析核心思想1.重写数组的变异方法Vue 重写了数组的变异方法（例如 push、pop、shift、unshift、splice、sort 和 reverse），在这些方法执行时，会触发通知机制，告知 Vue 数据发生了变化。 2.使用proto或者prototypeVue...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/27/Vue2-Keep-Alive%E7%9A%84%E7%90%86%E8%A7%A3/" title="Vue2-KeepAlive-源码分析">Vue2-KeepAlive-源码分析</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-12-27T12:01:10.000Z" title="发表于 2024-12-27 20:01:10">2024-12-27</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/Vue2/">Vue2</a></span></div><div class="content">Keep-alive是什么？keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们 keep-alive可以设置以下props属性： include - 字符串或正则表达式。只有名称匹配的组件会被缓存 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存 max - 数字。最多可以缓存多少组件实例 12345678910111213<keep-alive include="a,b"> <component :is="view"></component></keep-alive><!-- 正则表达式 (使用 `v-bind`) --><keep-alive :include="/a|b/"> <component...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/27/arcgis-viewModel%E8%AF%A6%E8%A7%A3/" title="详解Arcgis js-SketchViewModel对象">详解Arcgis js-SketchViewModel对象</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-12-27T12:01:10.000Z" title="发表于 2024-12-27 20:01:10">2024-12-27</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/Arcgis-js/">Arcgis js</a></span></div><div class="content">定义sketch.viewModel 是 ArcGIS JS API 中的一个核心对象，负责处理地图上的绘制、编辑、删除和取消等操作。它为用户提供了创建、更新和删除图形的功能，并能够处理用户与地图的交互，特别是在地图上绘制点、线、面等图形时。 SketchViewModel（通常通过 sketch.viewModel 实例化）是一个视图模型类，用于管理用户在地图上进行的绘制操作，提供了高度抽象的 API，能够简化用户绘制和编辑图形的过程。 基本功能 绘制图形：允许用户绘制各种图形（如点、线、多边形、矩形等）。 编辑图形：可以让用户修改已绘制的图形。 删除图形：支持删除地图上的图形。 取消操作：允许用户取消当前绘制或编辑的操作。 主要属性和方法基本属性 **view**：必需的属性，指定 SketchViewModel 所关联的地图视图（MapView 或 SceneView）。 **layer**：指定 SketchViewModel 使用的图层，通常是...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/25/JS-%E4%BA%8B%E4%BB%B6%E6%9C%BA%E5%88%B6/" title="JS-事件机制">JS-事件机制</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-12-25T14:04:25.000Z" title="发表于 2024-12-25 22:04:25">2024-12-25</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/JavaScript/">JavaScript</a></span></div><div class="content">事件JavaScript和html之间的交互是通过事件实现的。事件就是用户或者浏览器自身执行的某种动作。响应某个事件的函数就叫做事件处理函数。 事件对象当事件被触发时，浏览器会创建一个事件对象，这个对象包含了与事件相关的信息，比如事件的类型，事件发生的位置等。事件对象会在事件处理函数中作为参数传递。常见的属性 event.target：事件源，即触发事件的元素。 event.type：事件类型（例如 “click”, “keydown” 等）。 event.preventDefault()：阻止事件的默认行为（例如，阻止表单提交、链接跳转等）。 event.stopPropagation()：阻止事件的冒泡，防止事件传递到父元素。 事件绑定内联绑定：内联绑定就是在DOM元素中直接绑定事件。 12<!-- 在HTML中直接绑定点击事件 --><button...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/25/JS-async%E4%B8%8Edefer/" title="async与defer的区别">async与defer的区别</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-12-25T12:01:10.000Z" title="发表于 2024-12-25 20:01:10">2024-12-25</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/JavaScript/">JavaScript</a></span></div><div class="content">1. 浏览器的解析和渲染过程浏览器在加载网页时，会按照以下步骤解析和渲染内容： HTML解析: 浏览器从顶部开始逐行解析HTML文件，生成DOM树，代表页面的结构。 CSS解析: 同时，浏览器会解析CSS文件和内联样式，生成CSSOM树，代表页面的样式。 JavaScript执行: 当解析器遇到script标签时，默认会暂停HTML的解析和渲染，去执行脚本中的JavaScript代码。 页面渲染: 解析完所有内容并执行完所有脚本后，浏览器根据DOM树和CSSOM树渲染出页面。 2.为什么JavaScript脚本会阻塞解析JavaScript脚本可能会操作DOM或者改变页面内容，比如添加或删除元素、改变样式等。为了确保这些操作的正确性，浏览器在遇到script标签时会暂停HTML的解析。这样可以保证： 顺序执行: 浏览器会严格按照脚本在HTML中的顺序来执行JavaScript代码，确保脚本间的依赖关系。 页面一致性:...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2024/12/18/hello-world/" title="Hello World">Hello World</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-12-18T14:23:47.674Z" title="发表于 2024-12-18 22:23:47">2024-12-18</time></span></div><div class="content">Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new "My New Post" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment </div></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info text-center"><div class="avatar-img"><img src="/img/tx2.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info-name">pz</div><div class="author-info-description">前端技术</div><div class="site-data"><a href="/archives/"><div class="headline">文章</div><div class="length-num">10</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">7</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">5</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>公告</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>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2025/01/01/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-Performance%20API%E5%9F%BA%E7%A1%80/" title="性能优化-Performance API基础">性能优化-Performance API基础</a><time datetime="2025-01-01T05:46:10.000Z" title="发表于 2025-01-01 13:46:10">2025-01-01</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2024/12/31/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-%E8%B5%84%E6%BA%90%E4%BC%98%E5%85%88%E7%BA%A7%E6%8F%90%E7%A4%BA/" title="性能优化-资源优先级提示">性能优化-资源优先级提示</a><time datetime="2024-12-31T05:46:10.000Z" title="发表于 2024-12-31 13:46:10">2024-12-31</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2024/12/30/vue-vuex%E4%B8%ADmutation%E4%B8%BA%E4%BB%80%E4%B9%88%E4%B8%8D%E8%83%BD%E5%BC%82%E6%AD%A5/" title="vue-vuex中mutation为什么不能异步">vue-vuex中mutation为什么不能异步</a><time datetime="2024-12-30T05:46:10.000Z" title="发表于 2024-12-30 13:46:10">2024-12-30</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2024/12/29/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-%E8%99%9A%E6%8B%9F%E5%88%97%E8%A1%A8/" title="性能优化-虚拟列表">性能优化-虚拟列表</a><time datetime="2024-12-29T04:46:10.000Z" title="发表于 2024-12-29 12:46:10">2024-12-29</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2024/12/28/Vue-%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B0%81%E8%A3%85-%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/" title="Vue2-数组方法响应式封装-源码分析">Vue2-数组方法响应式封装-源码分析</a><time datetime="2024-12-28T04:46:10.000Z" title="发表于 2024-12-28 12:46:10">2024-12-28</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
<i class="fas fa-folder-open"></i>
<span>分类</span>
</div>
<ul class="card-category-list" id="aside-cat-list">
<li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Arcgis-js/"><span class="card-category-list-name">Arcgis js</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/JavaScript/"><span class="card-category-list-name">JavaScript</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/Vue2/"><span class="card-category-list-name">Vue2</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/vue/"><span class="card-category-list-name">vue</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/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"><span class="card-category-list-name">性能优化</span><span class="card-category-list-count">3</span></a></li>
</ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" style="font-size: 1.5em; color: #99a9bf">性能优化</a> <a href="/tags/vue/" style="font-size: 1.1em; color: #999">vue</a> <a href="/tags/defer/" style="font-size: 1.1em; color: #999">defer</a> <a href="/tags/Vue2/" style="font-size: 1.3em; color: #99a1ac">Vue2</a> <a href="/tags/Arcgis/" style="font-size: 1.1em; color: #999">Arcgis</a> <a href="/tags/%E4%BA%8B%E4%BB%B6%E6%9C%BA%E5%88%B6/" style="font-size: 1.1em; color: #999">事件机制</a> <a href="/tags/async/" style="font-size: 1.1em; color: #999">async</a></div></div><div class="card-widget card-archives">
<div class="item-headline">
<i class="fas fa-archive"></i>
<span>归档</span>
</div>
<ul class="card-archive-list">
<li class="card-archive-list-item">
<a class="card-archive-list-link" href="/archives/2025/01/">
<span class="card-archive-list-date">一月 2025</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/2024/12/">
<span class="card-archive-list-date">十二月 2024</span>
<span class="card-archive-list-count">9</span>
</a>
</li>
</ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站信息</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">10</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">10.8k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</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">本站总浏览量 :</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">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2025-01-01T06:59:20.209Z"><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">©2019 - 2025 By pz</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </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="日间和夜间模式切换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><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><div class="js-pjax"></div><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>