-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1662 lines (822 loc) · 60.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
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
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html class="theme-next pisces use-motion" lang="zh-Hans">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=FangSong_GB2312:300,300italic,400,400italic,700,700italic|Courier New:300,300italic,400,400italic,700,700italic|LiSong Pro Light:300,300italic,400,400italic,700,700italic|华文琥珀:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />
<meta name="keywords" content="程序员，web开发" />
<link rel="alternate" href="/atom.xml" title="风的影子" type="application/atom+xml" />
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico?v=5.1.0" />
<meta name="description" content="个人学习总结">
<meta property="og:type" content="website">
<meta property="og:title" content="风的影子">
<meta property="og:url" content="https://muleimulei.github.io/index.html">
<meta property="og:site_name" content="风的影子">
<meta property="og:description" content="个人学习总结">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="风的影子">
<meta name="twitter:description" content="个人学习总结">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Pisces',
sidebar: {"position":"left","display":"post","offset":12,"offset_float":0,"b2t":false,"scrollpercent":false},
fancybox: true,
motion: true,
duoshuo: {
userId: '0',
author: '博主'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="https://muleimulei.github.io/"/>
<title>
程序员，web开发 - 风的影子 - 个人学习总结
</title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container one-collumn sidebar-position-left
page-home
">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">风的影子</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle">小站</p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
首页
</a>
</li>
<li class="menu-item menu-item-categories">
<a href="/categories" rel="section">
<i class="menu-item-icon fa fa-fw fa-th"></i> <br />
分类
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
归档
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
标签
</a>
</li>
<li class="menu-item menu-item-music">
<a href="/music" rel="section">
<i class="menu-item-icon fa fa-fw fa-music"></i> <br />
音乐
</a>
</li>
<li class="menu-item menu-item-image">
<a href="/images" rel="section">
<i class="menu-item-icon fa fa-fw fa-image"></i> <br />
美图
</a>
</li>
<li class="menu-item menu-item-resume">
<a href="/resume" rel="section">
<i class="menu-item-icon fa fa-fw fa-address-card"></i> <br />
简历
</a>
</li>
<li class="menu-item menu-item-search">
<a href="javascript:;" class="popup-trigger">
<i class="menu-item-icon fa fa-search fa-fw"></i> <br />
搜索
</a>
</li>
</ul>
<div class="site-search">
<div class="popup search-popup local-search-popup">
<div class="local-search-header clearfix">
<span class="search-icon">
<i class="fa fa-search"></i>
</span>
<span class="popup-btn-close">
<i class="fa fa-times-circle"></i>
</span>
<div class="local-search-input-wrapper">
<input autocapitalize="off" autocomplete="off" autocorrect="off"
placeholder="搜索..." spellcheck="false"
type="text" id="local-search-input">
</div>
</div>
<div id="local-search-result"></div>
</div>
</div>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="https://muleimulei.github.io/2017/09/05/c与c++/string常用函数/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="穆蕾">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="风的影子">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/09/05/c与c++/string常用函数/" itemprop="url">
string常用函数
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-09-05T10:18:35+08:00">
2017-09-05
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/C/" itemprop="url" rel="index">
<span itemprop="name">C++</span>
</a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<blockquote class="blockquote-center"><p>string常用函数</p>
</blockquote>
<!--noindex-->
<div class="post-button text-center">
<a class="btn" href="/2017/09/05/c与c++/string常用函数/#more" rel="contents">
阅读全文 »
</a>
</div>
<!--/noindex-->
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="https://muleimulei.github.io/2017/09/04/CSS3/滚动的球/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="穆蕾">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="风的影子">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/09/04/CSS3/滚动的球/" itemprop="url">
CSS实现滚动的球
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-09-04T22:46:38+08:00">
2017-09-04
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/CSS3/" itemprop="url" rel="index">
<span itemprop="name">CSS3</span>
</a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<iframe src="/assets/ball.html" width="600px" height="600px" frameborder="0" allowfullscreen></iframe>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div></pre></td><td class="code"><pre><div class="line"><span class="meta"><!DOCTYPE html></span></div><div class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></div><div class="line"><span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></div><div class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></div><div class="line"><span class="tag"></<span class="name">head</span>></span></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span>{</div><div class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid black;</div><div class="line"> <span class="attribute">width</span>: <span class="number">300px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">300px</span>;</div><div class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span>;</div><div class="line"> <span class="attribute">margin</span>: <span class="number">90px</span> auto;</div><div class="line"> <span class="comment">/* animation: ballRotate 2s linear 0s infinite; */</span></div><div class="line"> <span class="attribute">perspective</span>: <span class="number">3000px</span>;</div><div class="line"> <span class="attribute">transform-style</span>: preserve-<span class="number">3</span>d;</div><div class="line"> <span class="attribute">position</span>: relative;</div><div class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateX</span>(-30deg) <span class="built_in">rotateZ</span>(-30deg);</div><div class="line"> <span class="attribute">background</span>: chocolate;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.wrapper</span><span class="selector-pseudo">::after</span>{</div><div class="line"> <span class="attribute">content</span>: <span class="string">''</span>;</div><div class="line"> <span class="attribute">position</span>: absolute;</div><div class="line"> <span class="attribute">width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">500px</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">149px</span>;</div><div class="line"> <span class="attribute">background</span>: <span class="number">#a94c4c</span>;</div><div class="line"> <span class="attribute">top</span>: -<span class="number">100px</span>;</div><div class="line"> <span class="attribute">border-radius</span>: <span class="number">5px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.inner1</span>{</div><div class="line"> <span class="attribute">width</span>: <span class="number">300px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">300px</span>;</div><div class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</div><div class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span>;</div><div class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(36deg);</div><div class="line"> <span class="attribute">position</span>: absolute;</div><div class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">background</span>: antiquewhite;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.f1</span>{</div><div class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid blue;</div><div class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(72deg);</div><div class="line"> <span class="attribute">background</span>: aqua;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.f2</span>{</div><div class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid green;</div><div class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(108deg);</div><div class="line"> <span class="attribute">background</span>: brown;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.f3</span>{</div><div class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#464646</span>;</div><div class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(144deg);</div><div class="line"> <span class="attribute">background</span>: blueviolet;</div><div class="line"> }</div><div class="line"> @<span class="keyword">keyframes</span> ballRotate{</div><div class="line"> <span class="selector-tag">from</span> {</div><div class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateX</span>(-30deg) <span class="built_in">rotateZ</span>(-30deg) <span class="built_in">rotateY</span>(0);</div><div class="line"> }</div><div class="line"> <span class="selector-tag">to</span>{</div><div class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateX</span>(-30deg) <span class="built_in">rotateZ</span>(-30deg) <span class="built_in">rotateY</span>(360deg);</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"><span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"inner1"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"inner1 f1"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"inner1 f2"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"inner1 f3"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">body</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="https://muleimulei.github.io/2017/08/26/CSS3/CSS中的单位/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="穆蕾">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="风的影子">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/08/26/CSS3/CSS中的单位/" itemprop="url">
CSS中的单位
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-08-26T20:31:04+08:00">
2017-08-26
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/CSS3/" itemprop="url" rel="index">
<span itemprop="name">CSS3</span>
</a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<blockquote class="blockquote-center"><p>CSS中的单位</p>
</blockquote>
<!--noindex-->
<div class="post-button text-center">
<a class="btn" href="/2017/08/26/CSS3/CSS中的单位/#more" rel="contents">
阅读全文 »
</a>
</div>
<!--/noindex-->
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="https://muleimulei.github.io/2017/08/26/JavaScript/JavaScript工作机制2/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="穆蕾">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="风的影子">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/08/26/JavaScript/JavaScript工作机制2/" itemprop="url">
JavaScript工作机制（二）
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-08-26T09:35:13+08:00">
2017-08-26
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/JavaScript/" itemprop="url" rel="index">
<span itemprop="name">JavaScript</span>
</a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<blockquote class="blockquote-center"><p>JavaScript工作机制（二）</p>
</blockquote>
<h2 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h2><p>JavaScript引擎是一个执行JavaScript代码的程序或解释器。JavaScript引擎可以被实现为标准解释器，或者实现为以某种形式将JavaScript编译为字节码的即时编译器。</p>
<p>下面是实现了JavaScript引擎的一个热门项目列表：</p>
<blockquote>
<p>V8 — 开源，由Google开发，用C++编写的<br>Rhino — 由Mozilla基金所管理，开源，完全用Java开发<br>SpiderMonkey —第一个JavaScript引擎，最早用在Netscape Navigator上，现在用在Firefox上。<br>JavaScriptCore — 开源，以Nitro销售，由苹果公司为Safari开发<br>KJS —KDE的引擎最初由Harri Porten开发，用于KDE项目的Konqueror浏览器<br>Chakra (JScript9) — Internet Explorer<br>Chakra (JavaScript) — Microsoft Edge<br>Nashorn— 开源为OpenJDK的一部分，由Oracle的Java语言和工具组开发<br>JerryScript — 是用于物联网的轻量级引擎</p>
</blockquote>
<h2 id="创建V8引擎的由来"><a href="#创建V8引擎的由来" class="headerlink" title="创建V8引擎的由来"></a>创建V8引擎的由来</h2><p>Google构建的V8引擎是开源的，是用C++编写的。该引擎被用在Google Chrome中。不过，与其它引擎不同的是，V8还被用作Node.js的运行时。V8最初是设计用来提升Web浏览器中JavaScript执行的性能。为了获得速度，V8将JavaScript代码转化为更高效的机器码，而不是使用解释器。它通过实现像很多现代JavaScript引擎（spiderMonkey或Rhino）所用的JIT编译器，从而将JavaScript代码编译成机器码。<strong>这里主要区别在于V8不会产生字节码或任何中间代码</strong></p>
<h2 id="V8曾经有两个编译器"><a href="#V8曾经有两个编译器" class="headerlink" title="V8曾经有两个编译器"></a>V8曾经有两个编译器</h2><p>在V8的5.9版出现之前，V8引擎用了两个编译器：</p>
<ul>
<li>full-codegen：一个简单而超快的编译器，可以生成简单而相对较慢的机器码</li>
<li>Crankshaft：一个更复杂（即时）的优化的编译器，可以生成高度优化的代码</li>
</ul>
<p>V8引擎还在内部使用多个线程：</p>
<ul>
<li>主线程执行我们想让他干的活：获取代码，编译然后执行它</li>
<li>还有一个单独的线程用于编译，这样在主线程继续执行的同时，单独的线程能同时在优化代码</li>
<li>一个Profiler线程，用于让运行时知道哪些方法花了大量时间，这样Crankshaft就可以对它进行优化</li>
<li>几个线程用于处理垃圾收集器扫描</li>
</ul>
<p>第一次执行JavaScript代码时，V8会利用<strong>full-codegen</strong>直接将解析的JavaScript翻译为机器码，而无需任何转换。这就让它能非常快的开始执行机器码。<strong>请注意，由于V8不会使用中间字节码表示，这就无需解释器。</strong></p>
<p>代码运行了一段时间后，Profiler线程已经收集了足够多的数据来判断应该优化哪个方法。</p>
<p>接下来，Crankshaft优化从另一个线程开始。它将JavaScript抽象语法树翻译为称为<strong>Hydrogen</strong>的高级静态单赋值（SSA）表示，并尝试优化Hydrogen图。大多数优化都在这一级完成的。</p>
<h2 id="内联"><a href="#内联" class="headerlink" title="内联"></a>内联</h2><p>第一个优化是提前内联尽可能多的代码。内联是被调用的函数体替换调用位置（调用函数所在的代码行）的过程。这个简单的步骤让以下优化变得更有意义。</p>
<img src="/assets/segment/JavaScript引擎2.jpg">
<h2 id="隐藏类"><a href="#隐藏类" class="headerlink" title="隐藏类"></a>隐藏类</h2><p>JavaScript是一种基于原型的语言：它没有类，对象是用一种克隆过程创建的。<br>JavaScript也是一种动态编程语言，就是说在对象实例化之后，可以随意给对象添加或删除属性。</p>
<p>大多数JavaScript解释器都使用类似字典的结构（基于哈希函数），将对象属性值的位置存储在内存中。这种结构使得在JavaScript中获取属性的值比在Java或C#这样的非动态编程语言中更昂贵。在Java中，所有对象属性都是由编译前的固定对象布局确定的，并且不能在运行时动态添加或删除。因此，属性的值（或指向这些属性的指针）可以在内存中存为连续缓冲区，每个缓冲区之间有固定偏移量。偏移量的长度可以很容易根据属性类型来确定。而在JavaScript中，这是不可能的，因为属性类型可能会在运行期间发生变化。</p>
<p>由于用字典来查找内存中对象属性的位置是非常低效的，所以V8使用了不同的方法来替代：<strong>隐藏类</strong>。隐藏类的工作机制类似于像Java这样的语言中使用的固定对象布局（类），只不过隐藏类是在运行时创建的。</p>
<p>例子：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Point</span>(<span class="params">x, y</span>) </span>{</div><div class="line"> <span class="keyword">this</span>.x = x;</div><div class="line"> <span class="keyword">this</span>.y = y;</div><div class="line">}</div><div class="line"><span class="keyword">var</span> p1 = <span class="keyword">new</span> Point(<span class="number">1</span>, <span class="number">2</span>)</div></pre></td></tr></table></figure></p>
<p>一旦<code>new Point(1, 2)</code>调用发生了，V8就会创建一个称为C0的隐藏类。</p>
<img src="/assets/segment/JavaScript引擎3.jpg">
<p>因为还没有给Point定义属性，所以CO为空。</p>
<p>一旦执行了第一条语句<code>this.x = x </code>(在Point函数中)，V8就会创建一个基于C0的第二个隐藏类C1。C1描述了内存中的位置（相对于对象指针），属性X在这个位置可以找到。此时，x存储在偏移0处，就是说，当将内存中的point对象作为连续缓存器来查看时，第一个偏移就对应属性x。V8也会用“类转换”来更新C0，指出如果将一个属性X添加到点对象，那么隐藏类应该从C0切换到C1。下面的point对象的隐藏类现在是C1</p>
<img src="/assets/segment/JavaScript引擎4.jpg">
<p>每当向对象添加一个新属性时，旧的隐藏类就被用一个转换路径更新为新的隐藏类。隐藏类转换很重要，因为它们可以让隐藏类在以相同方式创建的对象之间共享。如果两个对象共享一个隐藏类，并且将相同的属性添加到这两个对象中，那么转换会确保两个对象都收到相同的新隐藏类和它附带的所以优化过的代码。</p>
<p>当执行语句this.y = y时，会重复此过程。<br>这时，又创建一个名为C2的新隐藏类，类转换被添加到C1，表示如果将属性y添加到Point对象（已包含属性x）,那么隐藏类应更改为C2，同时point对象的隐藏类被更新为C2。</p>
<img src="/assets/segment/JavaScript引擎5.jpg">
<p>隐藏类转化取决于将属性添加到对象的顺序。如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Point</span> (<span class="params">x, y</span>) </span>{</div><div class="line"> <span class="keyword">this</span>.x = x;</div><div class="line"> <span class="keyword">this</span>.y = y;</div><div class="line">}</div><div class="line"><span class="keyword">var</span> p1 = <span class="keyword">new</span> Point(<span class="number">1</span>, <span class="number">2</span>);</div><div class="line">p1.a = <span class="number">5</span>;</div><div class="line">p1.b = <span class="number">6</span>;</div><div class="line"></div><div class="line"><span class="keyword">var</span> p2 = <span class="keyword">new</span> Point(<span class="number">3</span>, <span class="number">4</span>);</div><div class="line">p2.a = <span class="number">7</span>;</div><div class="line">p2.b = <span class="number">8</span>;</div></pre></td></tr></table></figure>
<p>现在，你可能会认为p1和p2会使用相同的隐藏类和转换。但这是错的。对于p1，首先是添加属性a，然后是属性b。不过，对于p2，先是给b赋值，然后才是a。因此，由于转换路径不同，p1和p2最终会有不同的隐藏类。在这种情况下，以相同的顺序初始化动态属性要更好，这样隐藏类才可以被重用。</p>
<h2 id="内联缓存"><a href="#内联缓存" class="headerlink" title="内联缓存"></a>内联缓存</h2><p>V8利用另一种称为内联缓存的技术来优化动态类型语言。内联缓存来自于观察的结果：<strong>对同一方法的重复调用往往发生在同一类型的对象上。</strong></p>
<p>下面我们打算谈谈内联缓存的一般概念:</p>
<p>V8维护在最近的方法调用中作为参数传递的对象类型的缓存，并使用该信息对将来作为参数传递的对象类型做出假设。如果V8能够对传递给方法的对象类型做出一个很好的假设，那么它可以绕过算出如何访问对象的属性的过程，转而使用先前查找对象的隐藏类时所存储的信息。</p>
<p>那么隐藏类和内联缓存的概念是如何关联的呢？无论何时在特定对象上调用方法，V8引擎必须对该对象的隐藏类执行查找，以确定访问特定属性的偏移量。在对同一个隐藏类的同一方法进行了两次成功的调用之后，V8就省略掉了隐藏类的查找，只将属性的偏移量添加到对象指针本身上。对于所以将来对该方法的调用，V8引擎都会假设隐藏类没有改变，并使用先前查找中存储的偏移量直接转到特定属性的内存地址。这会大大提高执行速度。</p>
<p>内联缓存也是为什么同一类型的对象共享隐藏类非常重要的原因。如果您创建相同类型的两个对象，但是用的是不同的隐藏类，那么V8将无法使用内联缓存，因为即使两个对象的类型相同，但是它们的对应隐藏类也会为其属性分配不同的偏移量。</p>
<h2 id="编译到机器码"><a href="#编译到机器码" class="headerlink" title="编译到机器码"></a>编译到机器码</h2><p>一旦Hydrogen图被优化，Crankshaft将其降低到一个称为Lithium的较低级别表示。大多数Lithium实现都是针对架构的。寄存器分配发生在这一级。</p>
<p>最后，Lithium被编译成机器码。然后其它事情，也就是OSR发生了。在我们开始编译和优化一个明显要长期运行的方法之前，我们可能会运行它。V8不会蠢到忘记它刚刚慢慢执行的代码，所以它不会再用优化版本又执行一遍，而是将转换所有已有的上下文（栈，寄存器），以便我们可以在执行过程中间就切换到优化版本。这是一个非常复杂的任务，请记住，除了其它优化之外，V8最开始时已经内联了代码。V8并非唯一能做到这一点的引擎。<br>有一种称为去优化的保护措施，会做出相反的转换，并恢复为非优化的代码，以防止引擎的假设不在成立。</p>
<h2 id="垃圾回收"><a href="#垃圾回收" class="headerlink" title="垃圾回收"></a>垃圾回收</h2><p>对于垃圾回收来说，V8采用的是标记，清扫这种传统方式来清除旧一代。标记阶段应该停止执行JavaScript。为了控制GC成本，并使执行更加稳定，V8使用增量式标记：不是遍历整个堆，尝试标记每一个可能的对象，而是只遍历一部分堆，然后恢复正常执行。下一个GC停止会从之前的堆遍历停止的地方继续。这就允许在正常执行期间有非常短的暂停。如前所述，清扫阶段是由单独的线程处理。</p>
<h2 id="如何编写优化的JavaScript"><a href="#如何编写优化的JavaScript" class="headerlink" title="如何编写优化的JavaScript"></a>如何编写优化的JavaScript</h2><ol>
<li><strong>对象属性的顺序</strong>：始终以相同的顺序实例化对象属性，以便可以共享隐藏类和随后的优化的代码。</li>
<li><strong>动态属性</strong>：在实例化后向对象添加属性会强制修改隐藏类，减慢为之前的隐藏类优化了的方法。所以应该在构造函数中指定对象的所以属性。</li>
<li><strong>方法</strong>：重复执行相同方法的代码将比只执行一次的代码（由于内联缓存）运行的快。</li>
<li><strong>数组</strong>：避免键不是增量数字的稀疏数组。元素不全的稀疏数组是一个<strong>哈希表</strong>，而访问这种数组中的元素更昂贵。另外，尽量避免预分配大数组。最好随着发展而增长。最后，不要删除数组中的元素。它会让键变得稀疏。</li>
<li><strong>标记值</strong>：V8用32位表示对象和数字。它用一位来判断是对象（flag=1）还是整数（flag=0）。然后，如果一个数值大于31位，V8将会对数字装箱，将其转化为double，并创建为一个新对象将该数字放到里面。所以要尽可能使用31有符号数字，从而避免昂贵的转化为js对象的装箱操作。</li>
</ol>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="https://muleimulei.github.io/2017/08/26/JavaScript/JavaScript工作机制/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="穆蕾">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="风的影子">