-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
652 lines (398 loc) · 25.4 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
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Finish</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="个人技术博客,向大家推荐一些不错的入门文章、以及一些个人总结分享,欢迎大家一起交流">
<meta property="og:type" content="website">
<meta property="og:title" content="Finish">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Finish">
<meta property="og:description" content="个人技术博客,向大家推荐一些不错的入门文章、以及一些个人总结分享,欢迎大家一起交流">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Finish">
<meta name="twitter:description" content="个人技术博客,向大家推荐一些不错的入门文章、以及一些个人总结分享,欢迎大家一起交流">
<link rel="alternative" href="/atom.xml" title="Finish" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link rel="stylesheet" href="/css/style.css">
<!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->
</head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">Finish</a>
</h1>
<h2 id="subtitle-wrap">
<a href="/" id="subtitle">Keep Calm and Carry On</a>
</h2>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<a class="main-nav-link" href="/">Home</a>
<a class="main-nav-link" href="/archives">Archives</a>
</nav>
<nav id="sub-nav">
<a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
<a id="nav-search-btn" class="nav-icon" title="Search"></a>
</nav>
<div id="search-form-wrap">
<form action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" class="search-form">
<input type="search" name="word" maxlength="20" class="search-form-input" placeholder="Search">
<input type="submit" value="" class="search-form-submit">
<input name=tn type=hidden value="bds">
<input name=cl type=hidden value="3">
<input name=ct type=hidden value="2097152">
<input type="hidden" name="si" value="yoursite.com">
</form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-gzip 压缩" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/07/12/gzip 压缩/" class="article-date">
<time datetime="2016-07-12T08:30:30.000Z" itemprop="datePublished">2016-07-12</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/07/12/gzip 压缩/">GZIP压缩</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="HTTP-协议之压缩"><a href="#HTTP-协议之压缩" class="headerlink" title="HTTP 协议之压缩"></a>HTTP 协议之压缩</h1><p>HTTP压缩是指: Web服务器和浏览器之间压缩传输的”文本内容“的方法。 HTTP采用通用的压缩算法，比如gzip来压缩HTML,Javascript, CSS文件。能大大减少网络传输的数据量，提高了用户显示网页的速度。当然，同时会增加一点点服务器的开销。</p>
<p>本文从HTTP协议的角度，来理解HTTP压缩这个概念。 </p>
<h2 id="HTTP内容编码和HTTP压缩的区别"><a href="#HTTP内容编码和HTTP压缩的区别" class="headerlink" title="HTTP内容编码和HTTP压缩的区别"></a>HTTP内容编码和HTTP压缩的区别</h2><p>HTTP压缩，在HTTP协议中，其实是内容编码的一种。</p>
<p>在http协议中，可以对内容（也就是body部分）进行编码， 可以采用gzip这样的编码。 从而达到压缩的目的。也可以使用其他的编码把内容搅乱或加密，以此来防止未授权的第三方看到文档的内容。<br>
<p class="article-more-link">
<a href="/2016/07/12/gzip 压缩/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2016/07/12/gzip 压缩/" data-id="ciucdaz47000npjfyieoh2u1e" class="article-share-link">分享到</a>
<a href="http://yoursite.com/2016/07/12/gzip 压缩/#ds-thread" class="article-comment-link">评论</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/通信协议/">通信协议</a></li></ul>
</footer>
</div>
</article>
<article id="post-页面优化" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/07/10/页面优化/" class="article-date">
<time datetime="2016-07-10T10:30:11.000Z" itemprop="datePublished">2016-07-10</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/07/10/页面优化/">页面性能优化</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="页面性能优化"><a href="#页面性能优化" class="headerlink" title="页面性能优化"></a>页面性能优化</h1><p>前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ?</p>
<ol>
<li>从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。</li>
<li>从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。</li>
</ol>
<p>总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。<br>
<p class="article-more-link">
<a href="/2016/07/10/页面优化/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2016/07/10/页面优化/" data-id="ciucdaz4s001fpjfynpsiq3bi" class="article-share-link">分享到</a>
<a href="http://yoursite.com/2016/07/10/页面优化/#ds-thread" class="article-comment-link">评论</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/性能优化/">性能优化</a></li></ul>
</footer>
</div>
</article>
<article id="post-express 模拟" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/07/05/express 模拟/" class="article-date">
<time datetime="2016-07-05T11:25:25.000Z" itemprop="datePublished">2016-07-05</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/07/05/express 模拟/">express 框架模拟</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>express为一个函数，执行后返回另一个函数app</p>
<p>app上面存在许多属性和方法。</p>
<ul>
<li>app.router 为一个数组，存储需要进行匹配处理的路由。</li>
<li>app.use 增加中间件路由</li>
<li>app.all 增加匹配所有方法的路由</li>
<li>app.get/post等均增加匹配指定方法指定路由的</li>
</ul>
<p>app函数为真正用来匹配路由处理事务的函数~<br>
<p class="article-more-link">
<a href="/2016/07/05/express 模拟/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2016/07/05/express 模拟/" data-id="ciucdaz4a000spjfyn84q5piy" class="article-share-link">分享到</a>
<a href="http://yoursite.com/2016/07/05/express 模拟/#ds-thread" class="article-comment-link">评论</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/node/">node</a></li></ul>
</footer>
</div>
</article>
<article id="post-跨域" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/07/01/跨域/" class="article-date">
<time datetime="2016-07-01T11:30:30.000Z" itemprop="datePublished">2016-07-01</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/07/01/跨域/">js中几种使用的跨域方法原理详解</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="js中几种实用的跨域方法原理详解"><a href="#js中几种实用的跨域方法原理详解" class="headerlink" title="js中几种实用的跨域方法原理详解"></a>js中几种实用的跨域方法原理详解</h1><p>这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。</p>
<p>下表给出了相对<a href="http://store.company.com/dir/page.html同源检测的结果">http://store.company.com/dir/page.html同源检测的结果</a>:</p>
<p><img src="/img/ajax/1.png" alt=""></p>
<p>要解决跨域的问题，我们可以使用以下几种方法：<br>
<p class="article-more-link">
<a href="/2016/07/01/跨域/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2016/07/01/跨域/" data-id="ciucdaz4w001kpjfyh4z0k4th" class="article-share-link">分享到</a>
<a href="http://yoursite.com/2016/07/01/跨域/#ds-thread" class="article-comment-link">评论</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/通信协议/">通信协议</a></li></ul>
</footer>
</div>
</article>
<article id="post-看完让你彻底搞懂Websocket原理" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/06/30/看完让你彻底搞懂Websocket原理/" class="article-date">
<time datetime="2016-06-30T11:30:30.000Z" itemprop="datePublished">2016-06-30</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/06/30/看完让你彻底搞懂Websocket原理/">看完让你彻底搞懂Websocket原理</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="一、websocket与http"><a href="#一、websocket与http" class="headerlink" title="一、websocket与http"></a>一、websocket与http</h2><p>WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）</p>
<p>首先HTTP有 1.1 和 1.0 之说，也就是所谓的 keep-alive ，把多个HTTP请求合并为一个，但是 Websocket 其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，也就是说它是HTTP协议上的一种补充可以通过这样一张图理解</p>
<p>有交集，但是并不是全部。<br>
<p class="article-more-link">
<a href="/2016/06/30/看完让你彻底搞懂Websocket原理/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2016/06/30/看完让你彻底搞懂Websocket原理/" data-id="ciucdaz4m001apjfyi2pk3798" class="article-share-link">分享到</a>
<a href="http://yoursite.com/2016/06/30/看完让你彻底搞懂Websocket原理/#ds-thread" class="article-comment-link">评论</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/通信协议/">通信协议</a></li></ul>
</footer>
</div>
</article>
<article id="post-Socket.io" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/06/30/Socket.io/" class="article-date">
<time datetime="2016-06-30T11:30:30.000Z" itemprop="datePublished">2016-06-30</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/06/30/Socket.io/">Socket.io 简明实践</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="1-socket-io"><a href="#1-socket-io" class="headerlink" title="1. socket.io"></a>1. socket.io</h2><p>Socket.IO是一个WebSocket库，包括了客户端的js和服务器端的nodejs，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。</p>
<h2 id="2-socket-io的特点"><a href="#2-socket-io的特点" class="headerlink" title="2. socket.io的特点"></a>2. socket.io的特点</h2><ul>
<li>易用性：socket.io封装了服务端和客户端，使用起来非常简单方便。</li>
<li>跨平台：socket.io支持跨平台，这就意味着你有了更多的选择，可以在自己喜欢的平台下开发实时应用。</li>
<li>自适应：它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化，而且支持的浏览器最低达IE5.5。
<p class="article-more-link">
<a href="/2016/06/30/Socket.io/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2016/06/30/Socket.io/" data-id="ciucdaz3y000hpjfyquvnl9f9" class="article-share-link">分享到</a>
<a href="http://yoursite.com/2016/06/30/Socket.io/#ds-thread" class="article-comment-link">评论</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/通信协议/">通信协议</a></li></ul>
</footer>
</div>
</article>
<article id="post-前后端交互指南" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/06/30/前后端交互指南/" class="article-date">
<time datetime="2016-06-30T11:30:30.000Z" itemprop="datePublished">2016-06-30</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/06/30/前后端交互指南/">前后端交互指南</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="写给刚入门的前端工程师的前后端交互指南"><a href="#写给刚入门的前端工程师的前后端交互指南" class="headerlink" title="写给刚入门的前端工程师的前后端交互指南"></a>写给刚入门的前端工程师的前后端交互指南</h1><p>作为刚接触前端的不久的童鞋，大家都会兴奋于CSS和JS所带来漂亮界面，然而，前端工程师除了UI重构外，还有非常重要的职责在正确的区域渲染出服务端的数据。</p>
<p>毕竟，我们要构建一个大的web应用，必然不是普普通通的静态页面构成。</p>
<p>下文将罗列将来前端工程师应该必备的同后端打交道的常用技能。<br>
<p class="article-more-link">
<a href="/2016/06/30/前后端交互指南/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2016/06/30/前后端交互指南/" data-id="ciucdaz49000qpjfyyy87ri5t" class="article-share-link">分享到</a>
<a href="http://yoursite.com/2016/06/30/前后端交互指南/#ds-thread" class="article-comment-link">评论</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/通信协议/">通信协议</a></li></ul>
</footer>
</div>
</article>
<article id="post-栅格系统" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/06/28/栅格系统/" class="article-date">
<time datetime="2016-06-28T11:30:30.000Z" itemprop="datePublished">2016-06-28</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/06/28/栅格系统/">Bootstrap 栅格系统</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>#Bootstrap 栅格系统</p>
<p><strong>目录</strong></p>
<ol>
<li>简介</li>
<li>栅格选项</li>
<li>列偏移</li>
<li>嵌套列</li>
<li>列排序</li>
</ol>
<h2 id="1、简介"><a href="#1、简介" class="headerlink" title="1、简介"></a>1、简介</h2><p>Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。</p>
<p class="article-more-link">
<a href="/2016/06/28/栅格系统/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2016/06/28/栅格系统/" data-id="ciucdaz4l0017pjfyzhnlwdjm" class="article-share-link">分享到</a>
<a href="http://yoursite.com/2016/06/28/栅格系统/#ds-thread" class="article-comment-link">评论</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Bootstrap/">Bootstrap</a></li></ul>
</footer>
</div>
</article>
<nav id="page-nav">
<span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><a class="page-number" href="/page/4/">4</a><a class="extend next" rel="next" href="/page/2/">下一页 »</a>
</nav>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">标签</h3>
<div class="widget">
<ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Bootstrap/">Bootstrap</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS3/">CSS3</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ES6/">ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML/">HTML</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/app/">app</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/">javascript</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/node/">node</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/代码管理/">代码管理</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端工程化/">前端工程化</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能优化/">性能优化</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/总结/">总结</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/计算机基础/">计算机基础</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/通信协议/">通信协议</a><span class="tag-list-count">5</span></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">标签云</h3>
<div class="widget tagcloud">
<a href="/tags/Bootstrap/" style="font-size: 10px;">Bootstrap</a> <a href="/tags/CSS3/" style="font-size: 10px;">CSS3</a> <a href="/tags/ES6/" style="font-size: 10px;">ES6</a> <a href="/tags/HTML/" style="font-size: 12px;">HTML</a> <a href="/tags/React/" style="font-size: 10px;">React</a> <a href="/tags/app/" style="font-size: 10px;">app</a> <a href="/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/tags/node/" style="font-size: 10px;">node</a> <a href="/tags/代码管理/" style="font-size: 10px;">代码管理</a> <a href="/tags/前端工程化/" style="font-size: 10px;">前端工程化</a> <a href="/tags/性能优化/" style="font-size: 14px;">性能优化</a> <a href="/tags/总结/" style="font-size: 16px;">总结</a> <a href="/tags/计算机基础/" style="font-size: 10px;">计算机基础</a> <a href="/tags/通信协议/" style="font-size: 18px;">通信协议</a>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">归档</h3>
<div class="widget">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/07/">七月 2016</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/06/">六月 2016</a><span class="archive-list-count">12</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/05/">五月 2016</a><span class="archive-list-count">12</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/04/">四月 2016</a><span class="archive-list-count">1</span></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">近期文章</h3>
<div class="widget">
<ul>
<li>
<a href="/2016/07/12/gzip 压缩/">GZIP压缩</a>
</li>
<li>
<a href="/2016/07/10/页面优化/">页面性能优化</a>
</li>
<li>
<a href="/2016/07/05/express 模拟/">express 框架模拟</a>
</li>
<li>
<a href="/2016/07/01/跨域/">js中几种使用的跨域方法原理详解</a>
</li>
<li>
<a href="/2016/06/30/看完让你彻底搞懂Websocket原理/">看完让你彻底搞懂Websocket原理</a>
</li>
</ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">友情链接</h3>
<div class="widget">
<ul>
<li>
<a href="http://arvinxiang.com" target="_blank">主题作者</a>
</li>
<li>
<a href="http://reqianduan.com" target="_blank">热前端</a>
</li>
<li>
<a href="http://yuancheng.work" target="_blank">远程.work</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2016 Luo Liang<br>
Powered by <a href="//hexo.io/" target="_blank">Hexo</a>
.
Theme by <a href="https://github.com/xiangming/landscape-plus" target="_blank">Landscape-plus</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/archives" class="mobile-nav-link">Archives</a>
</nav>
<!-- totop start -->
<div id="totop">
<a title="返回顶部"><img src="/img/scrollup.png"/></a>
</div>
<!-- totop end -->
<!-- 多说公共js代码 start -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"reqianduan"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多说公共js代码 end -->
<!-- 百度分享 start -->
<!-- 百度分享 end -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/script.js"></script>
</div>
</body>
</html>