-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
395 lines (285 loc) · 17 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
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
<!DOCTYPE html>
<html lang="z">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>周龙的博客</title>
<meta name="renderer" content="webkit">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="前端随手记">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="周龙的博客">
<meta name="twitter:description" content="前端随手记">
<meta property="og:type" content="article">
<meta property="og:title" content="周龙的博客">
<meta property="og:description" content="前端随手记">
<meta name="author" content="stallezhou">
<link rel="stylesheet" href="/css/vno.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="icon" href="/images/avatar-small.png">
<meta name="generator" content="hexo"/>
<link rel="canonical" href="http://www.stallezhou.cn"/>
</head>
<body class="home-template no-js">
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="/js/main.js"></script>
<span class="mobile btn-mobile-menu">
<i class="fa fa-list btn-mobile-menu__icon"></i>
<i class="fa fa-angle-up btn-mobile-close__icon hidden"></i>
</span>
<header class="panel-cover " style="background-image: url(/images/background-cover.jpg)">
<div class="panel-main">
<div class="panel-main__inner panel-inverted">
<div class="panel-main__content">
<a href="/" title="前往 周龙的博客 的主页"><img src="/images/avatar.jpg" width="80" alt="周龙的博客 logo" class="panel-cover__logo logo" /></a>
<h1 class="panel-cover__title panel-title"><a href="/" title="link to homepage for 周龙的博客">周龙的博客</a></h1>
<hr class="panel-cover__divider" />
<p class="panel-cover__description">前端随手记</p>
<hr class="panel-cover__divider panel-cover__divider--secondary" />
<div class="navigation-wrapper">
<div>
<nav class="cover-navigation cover-navigation--primary">
<ul class="navigation">
<li class="navigation__item"><a href="/#blog" title="Visit the blog" class="blog-button">Blog</a></li>
</ul>
</nav>
</div>
<div>
<nav class="cover-navigation navigation--social">
<ul class="navigation">
<!-- Weibo-->
<!-- Github -->
<li class="navigation__item">
<a href="https://github.com/stallezhou" title="GitHub" target="_blank">
<i class='social fa fa-github'></i>
<span class="label">Github</span>
</a>
</li>
<!-- Stack Overflow -->
<!-- Google Plus -->
<!-- Facebook -->
<!-- Twitter -->
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="panel-cover--overlay cover-purple"></div>
</div>
</header>
<div class="content-wrapper">
<div class="content-wrapper__inner">
<div class="main-post-list">
<ol class="post-list">
<li>
<h2 class="post-list__post-title post-title"><a href="/2021/01/21/react_fiber/" title="link to post.title">什么是React——Fiber</a></h2>
<p class="excerpt">
前言相信很多同学在学习React时，都会遇到说fiber。那么到底什么是fiber，我们将通过本票文章来进行详细的了解。
fiber的背景
react在进行组件渲染时，从setState开始到渲染完成整个过程是同步的(‘一气呵成’)。如果需要渲染的组件比较庞大，js执行会占据主线程时间较长，会导致页面响应
度变差，使得react在动画、手势等应用中效果比较差劲。
页面卡顿:Stack reco
…
</p>
<div class="post-list__meta"><time datetime="2021-01-20T16:00:00.000Z" class="post-list__meta--date date"
>2021-01-21</time
>
• <span class="post-list__meta--tags tags">于
<a class="-none-link" href="/tags/%E5%9B%9B%E5%B7%9D-%E6%88%90%E9%83%BD/" rel="tag">四川 成都</a>
</span><a class="btn-border-small" href="/2021/01/21/react_fiber/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2021/01/20/react组件通信/" title="link to post.title">React 组件通信</a></h2>
<p class="excerpt">
前言在我们日常的工作中，不管是使用vue，react或是其他组件。都会遇到组件通信的情况，那么在react中组件通信有那些方式呢？接下来我们就去一探究竟。
父组件向子组件通信
父组件向子组件通信:父组件通过props向子组件传递需要的信息
12345678//子组件:childconst child = props=&gt;&#123; return &lt;p&gt;&#123;props.n
…
</p>
<div class="post-list__meta"><time datetime="2021-01-19T16:00:00.000Z" class="post-list__meta--date date"
>2021-01-20</time
>
• <span class="post-list__meta--tags tags">于
<a class="-none-link" href="/tags/%E5%9B%9B%E5%B7%9D-%E6%88%90%E9%83%BD/" rel="tag">四川 成都</a>
</span><a class="btn-border-small" href="/2021/01/20/react组件通信/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2021/01/15/手写promise/" title="link to post.title">手写Promise</a></h2>
<p class="excerpt">
前言相信各位同学在平时的工作中，或多或少都会用到Promise。可是各位同学对其内部实现的原理知道多少？在本篇文章中，我们通过手写一个符合Promise/A+规范的Promise来深入理解它。在开始之前，推荐各位同学阅读一下Promise/A+规范，这样才能更好地理解这个章节的代码。
实现一个简易的Promise在完成符合Promise/A+规范的代码之前，我们可以先来实现一个简单版本的Promi
…
</p>
<div class="post-list__meta"><time datetime="2021-01-14T16:00:00.000Z" class="post-list__meta--date date"
>2021-01-15</time
>
• <span class="post-list__meta--tags tags">于
<a class="-none-link" href="/tags/%E5%9B%9B%E5%B7%9D-%E6%88%90%E9%83%BD/" rel="tag">四川 成都</a>
</span><a class="btn-border-small" href="/2021/01/15/手写promise/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2021/01/14/深拷贝与浅拷贝/" title="link to post.title">必须要会区别的浅拷贝与深拷贝</a></h2>
<p class="excerpt">
前言在我们日常的工作中，相信很多同学都有面临复制对象的问题。在js中有不同的方法来复制对象，但是很多同学都遇到过陷阱。今天，我们就来看看怎样才能正确地复制一个对象。
定义浅拷贝浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。
深拷贝深拷贝
…
</p>
<div class="post-list__meta"><time datetime="2021-01-13T16:00:00.000Z" class="post-list__meta--date date"
>2021-01-14</time
>
• <span class="post-list__meta--tags tags">于
<a class="-none-link" href="/tags/%E5%9B%9B%E5%B7%9D-%E6%88%90%E9%83%BD/" rel="tag">四川 成都</a>
</span><a class="btn-border-small" href="/2021/01/14/深拷贝与浅拷贝/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2021/01/08/HTTP以及TLS/" title="link to post.title">HTTP以及TLS</a></h2>
<p class="excerpt">
前言对于HTTP及TLS，相信很多同学都不陌生，但是我相信各位同学对于这一部分的知识都比较零散，不是很全面。今天我们就来详细的了解一下HTTP及TLS的内容。
HTTP请求中的内容首先，我们先来看看HTTP请求的构成，构成HTTP请求主要有三部分，分别是请求行、首部以及实体。
请求行大概是像 GET /images/logo.gif HTTP/1.1,基本请求由请求方法、URL、协议版本组成。这其
…
</p>
<div class="post-list__meta"><time datetime="2021-01-07T16:00:00.000Z" class="post-list__meta--date date"
>2021-01-08</time
>
• <span class="post-list__meta--tags tags">于
<a class="-none-link" href="/tags/%E5%9B%9B%E5%B7%9D-%E6%88%90%E9%83%BD/" rel="tag">四川 成都</a>
</span><a class="btn-border-small" href="/2021/01/08/HTTP以及TLS/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2021/01/07/event_loop/" title="link to post.title">Event Loop</a></h2>
<p class="excerpt">
前言相信很多同学无论是在工作中还是在生活中都遇到过一个问题，那就是setTimeout和Promise到底谁先执行，谁后执行。明明setTimeout写在前面,为啥在 Promise后执行。这其实有关于Event Loop相关的知识，在这篇文章中，我们会详细地来了解Event Loop相关知识，知道js异步运行代码的原理。
进程与线程相信大家在平时的工作中都会听到或者看到一句话，js是单线程执行的
…
</p>
<div class="post-list__meta"><time datetime="2021-01-06T16:00:00.000Z" class="post-list__meta--date date"
>2021-01-07</time
>
• <span class="post-list__meta--tags tags">于
<a class="-none-link" href="/tags/%E5%9B%9B%E5%B7%9D-%E6%88%90%E9%83%BD/" rel="tag">四川 成都</a>
</span><a class="btn-border-small" href="/2021/01/07/event_loop/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2021/01/06/跨域/" title="link to post.title">必须要知道的跨域</a></h2>
<p class="excerpt">
前言在前端开发中，跨域这个问题就像一张狗屁膏药一样黏在我们身上。无论是在工作中还是面试中，跨域这个问题一定是无法避免的。那么，接下来就让我们来看看这个狗皮膏药内部的原理。
为什么会出现跨域？相信大家对于这个问题都有一个统一的回答，同源策略。可是，我相信绝大多数人都不怎么了解为什么会有同源策略？我们都知道，同源策略是浏览器自己主动处理的，浏览器对于为什么要使用同源策略有一个统一的口径:同源策略限制了
…
</p>
<div class="post-list__meta"><time datetime="2021-01-05T16:00:00.000Z" class="post-list__meta--date date"
>2021-01-06</time
>
• <span class="post-list__meta--tags tags">于
<a class="-none-link" href="/tags/%E5%9B%9B%E5%B7%9D-%E6%88%90%E9%83%BD/" rel="tag">四川 成都</a>
</span><a class="btn-border-small" href="/2021/01/06/跨域/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2021/01/05/sort/" title="link to post.title">排序算法详解</a></h2>
<p class="excerpt">
前言在我们日常的开发中，排序是一个很普遍而且很常见的问题。今天，我们就来看一下各种排序算法的差异以及比较好的写法。
冒泡排序
冒泡排序:它重复地走访过要排序的元素列，依次比较两个相邻的元素，如果顺序（如从大到小、首字母从Z到A）错误就把他们交换过来。走访元素的工作是重复地进行直到没有相邻元素需要交换，也就是说该元素列已经排序完成。
算法原理冒泡排序原理如下:
相邻比较两个元素,如果前面的比后面
…
</p>
<div class="post-list__meta"><time datetime="2021-01-04T16:00:00.000Z" class="post-list__meta--date date"
>2021-01-05</time
>
• <span class="post-list__meta--tags tags">于
<a class="-none-link" href="/tags/%E5%9B%9B%E5%B7%9D-%E6%88%90%E9%83%BD/" rel="tag">四川 成都</a>
</span><a class="btn-border-small" href="/2021/01/05/sort/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2021/01/04/exception/" title="link to post.title">不得不了解的前端异常处理</a></h2>
<p class="excerpt">
前言在我们平时的开发中，总是会遇到各种各样的问题，然后去调试处理。而且我相信，在各位开发的过程中，调试占用的开发时间非常高，因为我们不仅要进行逻辑处理，还要处理相关的问题异常。所以，既然我们天天和异常打交道，就需要正确认识异常，并作出合适的异常处理就显得尤为重要了。
什么是异常用直白的话来说，就是 程序发生了意想不到的情况，这种情况影响到了程序的正确运行。
从根本上来说，异常就是一个 数据结构，其
…
</p>
<div class="post-list__meta"><time datetime="2021-01-03T16:00:00.000Z" class="post-list__meta--date date"
>2021-01-04</time
>
• <span class="post-list__meta--tags tags">于
<a class="-none-link" href="/tags/%E5%9B%9B%E5%B7%9D-%E6%88%90%E9%83%BD/" rel="tag">四川 成都</a>
</span><a class="btn-border-small" href="/2021/01/04/exception/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2020/12/30/webpack性能优化/" title="link to post.title">webpack性能优化</a></h2>
<p class="excerpt">
前言在框架流行的今天，前端打包越来越重要，也越来越复杂，今天，我们不会浪费篇幅给大家讲如何写配置文件。而是关注如何能优化我们的打包的时间，以及打包后的代码体积等。
分析打包速度优化webpack构建速度的第一步就是要知道将精力集中在哪里，首先，我们可以通过speed-measure-webpack-plugin测量你的webpack构建期间的各个阶段的花费时间。
12345import Speed
…
</p>
<div class="post-list__meta"><time datetime="2020-12-29T16:00:00.000Z" class="post-list__meta--date date"
>2020-12-30</time
>
• <span class="post-list__meta--tags tags">于
<a class="-none-link" href="/tags/%E5%9B%9B%E5%B7%9D-%E6%88%90%E9%83%BD/" rel="tag">四川 成都</a>
</span><a class="btn-border-small" href="/2020/12/30/webpack性能优化/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
</ol>
<nav class="pagination" role="navigation">
<span class="pagination__page-number" > 1 / 3 </span>
<a class="older-posts pagination__older btn btn-small btn-tertiary" href="/page/2/">Next →</a>
</nav>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"], linebreaks: { automatic:true }, EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50) },
tex2jax: { inlineMath: [ ["$", "$"], ["\\(","\\)"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno",skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']},
TeX: { noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } }, Macros: { href: "{}" } },
messageStyle: "none"
});
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for(i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-78918255-1', 'auto');
ga('send', 'pageview');
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?9cdad07c755fa23f6aced510c6760e87";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
</body>
</html>