-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1270 lines (738 loc) · 166 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>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link rel="dns-prefetch" href="http://yoursite.com">
<title>Naraku的博客</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="WebCoder">
<meta property="og:type" content="website">
<meta property="og:title" content="Naraku的博客">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Naraku的博客">
<meta property="og:description" content="WebCoder">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="Ji Yin Liu">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="js">
<meta property="article:tag" content="jquery">
<meta property="article:tag" content="javascript">
<meta property="article:tag" content="html5">
<meta property="article:tag" content="开发者">
<meta property="article:tag" content="程序猿">
<meta property="article:tag" content="程序媛">
<meta property="article:tag" content="极客">
<meta property="article:tag" content="编程">
<meta property="article:tag" content="代码">
<meta property="article:tag" content="开源">
<meta property="article:tag" content="IT网站">
<meta property="article:tag" content="Developer">
<meta property="article:tag" content="Programmer">
<meta property="article:tag" content="Coder">
<meta property="article:tag" content="Geek">
<meta property="article:tag" content="html">
<meta name="twitter:card" content="summary">
<link rel="alternative" href="/atom.xml" title="Naraku的博客" type="application/atom+xml">
<link rel="icon" href="/assets/566842.gif">
<link rel="stylesheet" type="text/css" href="/./main.0cf68a.css">
<style type="text/css">
#container.show {
background: linear-gradient(200deg,#a0cfe4,#e8c37e);
}
</style>
<!-- <script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?20cbae7c199ec2c6084d8955e7330649";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script> -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?ef9d8cbd87249b470331d68e40e0c2a7";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<meta name="generator" content="Hexo 4.2.0"></head>
<body>
<div id="container" q-class="show:isCtnShow">
<canvas id="anm-canvas" class="anm-canvas"></canvas>
<div class="left-col" q-class="show:isShow">
<div class="overlay" style="background: #4285F4"></div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="/" class="profilepic">
<img src="/assets/vxll.jpg" class="js-avatar">
</a>
<hgroup>
<h1 class="header-author"><a href="/">Ji Yin Liu</a></h1>
</hgroup>
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
<li><a href="/">Browser work</a></li>
<li><a href="/">JavaScript</a></li>
<li><a href="/">HTML</a></li>
<li><a href="/">CSS</a></li>
<li><a href="/">Node.js</a></li>
<li><a href="/">Shell</a></li>
</ul>
</nav>
<nav class="header-smart-menu">
<a q-on="click: openSlider(e, 'innerArchive')" href="javascript:void(0)">所有文章</a>
<a q-on="click: openSlider(e, 'friends')" href="javascript:void(0)">友链</a>
<a q-on="click: openSlider(e, 'aboutme')" href="javascript:void(0)">关于我</a>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/AOORJGCS" title="github"><i class="icon-github"></i></a>
<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/atstan-suo/posts" title="zhihu"><i class="icon-zhihu"></i></a>
<a class="twitter" target="_blank" href="https://twitter.com/Decade09752636" title="twitter"><i class="icon-twitter"></i></a>
</div>
</nav>
</header>
</div>
</div>
<div class="mid-col" q-class="show:isShow,hide:isShow|isFalse">
<nav id="mobile-nav">
<div class="overlay js-overlay" style="background: #4285F4"></div>
<div class="btnctn js-mobile-btnctn">
<div class="slider-trigger list" q-on="click: openSlider(e)"><i class="icon icon-sort"></i></div>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<div class="profilepic">
<img src="/assets/vxll.jpg" class="js-avatar">
</div>
<hgroup>
<h1 class="header-author js-header-author">Ji Yin Liu</h1>
</hgroup>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/AOORJGCS" title="github"><i class="icon-github"></i></a>
<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/atstan-suo/posts" title="zhihu"><i class="icon-zhihu"></i></a>
<a class="twitter" target="_blank" href="https://twitter.com/Decade09752636" title="twitter"><i class="icon-twitter"></i></a>
</div>
</nav>
<nav class="header-menu js-header-menu">
<ul style="width: 70%">
<li style="width: 14.285714285714286%"><a href="/">主页</a></li>
<li style="width: 14.285714285714286%"><a href="/">Browser work</a></li>
<li style="width: 14.285714285714286%"><a href="/">JavaScript</a></li>
<li style="width: 14.285714285714286%"><a href="/">HTML</a></li>
<li style="width: 14.285714285714286%"><a href="/">CSS</a></li>
<li style="width: 14.285714285714286%"><a href="/">Node.js</a></li>
<li style="width: 14.285714285714286%"><a href="/">Shell</a></li>
</ul>
</nav>
</header>
</div>
<div class="mobile-mask" style="display:none" q-show="isShow"></div>
</nav>
<div id="wrapper" class="body-wrap">
<div class="menu-l">
<div class="canvas-wrap">
<canvas data-colors="#eaeaea" data-sectionHeight="100" data-contentId="js-content" id="myCanvas1" class="anm-canvas"></canvas>
</div>
<div id="js-content" class="content-ll">
<article id="post-webDevmodel" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/05/03/webDevmodel/">webDevmodel</a>
</h1>
<a href="/2020/05/03/webDevmodel/" class="archive-article-date">
<time datetime="2020-05-03T02:47:21.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-05-03</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
</div>
<div class="article-info article-info-index">
<p class="article-more-link">
<a class="article-more-a" href="/2020/05/03/webDevmodel/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-V8work" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/04/24/V8work/">V8编译流水线</a>
</h1>
<a href="/2020/04/24/V8work/" class="archive-article-date">
<time datetime="2020-04-24T08:39:13.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-04-24</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="V8编译流水线"><a href="#V8编译流水线" class="headerlink" title="V8编译流水线"></a>V8编译流水线</h1><p><img src="/2020/04/24/V8work/a89d747fb614a17e08b1a6b7dce62b54.jpg" alt><br><img src="/2020/04/24/V8work/9ad5d32bce98aad219c9f73513ac6349.jpg" alt><br><img src="/2020/04/24/V8work/V8work1.png" alt><br><img src="/2020/04/24/V8work/V8work2.png" alt><br><img src="/2020/04/24/V8work/V8work3.png" alt><br><img src="/2020/04/24/V8work/V8work4.png" alt><br><img src="/2020/04/24/V8work/V8work5.png" alt></p>
</div>
<div class="article-info article-info-index">
<p class="article-more-link">
<a class="article-more-a" href="/2020/04/24/V8work/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-Renderer" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/04/24/Renderer/">Renderer</a>
</h1>
<a href="/2020/04/24/Renderer/" class="archive-article-date">
<time datetime="2020-04-24T02:16:06.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-04-24</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="渲染流程"><a href="#渲染流程" class="headerlink" title="渲染流程"></a>渲染流程</h1><h4 id="默认情况下，Chrome-会为每个页面分配一个渲染进程，也就是说，每打开一个新页面就会配套创建一个新的渲染进程。"><a href="#默认情况下，Chrome-会为每个页面分配一个渲染进程，也就是说，每打开一个新页面就会配套创建一个新的渲染进程。" class="headerlink" title="默认情况下，Chrome 会为每个页面分配一个渲染进程，也就是说，每打开一个新页面就会配套创建一个新的渲染进程。"></a>默认情况下，Chrome 会为每个页面分配一个渲染进程，也就是说，每打开一个新页面就会配套创建一个新的渲染进程。</h4><p>Chrome 的默认策略是，每个标签对应一个渲染进程。但如果从一个页面打开了另一个新页面，而新页面和当前页面属于同一站点的话，那么新页面会复用父页面的渲染进程。官方把这个默认策略叫 process-per-site-instance。</p>
<p>浏览器进程发出资源请求，等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程。<br>浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面。渲染进程便开始页面解析和子资源加载了</p>
<h2 id="构建-DOM-树"><a href="#构建-DOM-树" class="headerlink" title="构建 DOM 树"></a>构建 DOM 树</h2><h2 id="样式计算（Recalculate-Style）"><a href="#样式计算（Recalculate-Style）" class="headerlink" title="样式计算（Recalculate Style）"></a>样式计算（Recalculate Style）</h2><p> 1.CSS 文本转换为浏览器可以理解的结构——styleSheets。<br> 2. 转换样式表中的属性值，使其标准化<br> 3. 计算出 DOM 树中每个节点的具体样式</p>
<h2 id="布局阶段"><a href="#布局阶段" class="headerlink" title="布局阶段"></a>布局阶段</h2><pre><code>1. 创建布局树
2. 布局计算</code></pre><h2 id="分层"><a href="#分层" class="headerlink" title="分层"></a>分层</h2><p> 页面中有很多复杂的效果，如一些复杂的 3D 变换、页面滚动，或者使用 z-indexing 做 z 轴排序等，为了更加方便地实现这些效果，渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree）。</p>
<p><img src="/2020/04/24/Renderer/tucen.png" alt="渲染流水线"></p>
<h2 id="图层绘制"><a href="#图层绘制" class="headerlink" title="图层绘制"></a>图层绘制</h2><pre><code>渲染引擎实现图层的绘制与之类似，会把一个图层的绘制拆分成很多小的绘制指令，然后再把这些指令按照顺序组成一个待绘制列表，</code></pre><h2 id="栅格化（raster）操作"><a href="#栅格化（raster）操作" class="headerlink" title="栅格化（raster）操作"></a>栅格化（raster）操作</h2><h3 id="分块、光栅化"><a href="#分块、光栅化" class="headerlink" title="分块、光栅化"></a>分块、光栅化</h3><p> 有的图层可以很大，通过视口，用户只能看到页面的很小一部分，所以在这种情况下，要绘制出所有图层内容的话，就会产生太大的开销，而且也没有必要。合成线程会将图层划分为图块（tile）然后合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执行的。所谓栅格化，是指将图块转换为位图。</p>
<p> 通常，栅格化过程都会使用 GPU 来加速生成，使用 GPU 生成位图的过程叫快速栅格化，或者 GPU 栅格化，生成的位图被保存在 GPU 内存中。</p>
<h2 id="合成和显示"><a href="#合成和显示" class="headerlink" title="合成和显示"></a>合成和显示</h2><p>一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程。</p>
<p>浏览器进程里面有一个叫 viz 的组件，用来接收合成线程发过来的 DrawQuad 命令，然后根据 DrawQuad 命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上。</p>
<p>到这里，经过这一系列的阶段，编写好的 HTML、CSS、JavaScript 等文件，经过浏览器就会显示出漂亮的页面了。</p>
<h2 id="渲染流程总结"><a href="#渲染流程总结" class="headerlink" title="渲染流程总结"></a>渲染流程总结</h2><p>一个完整的渲染流程大致可总结为如下：</p>
<p>渲染进程将 HTML 内容转换为能够读懂的DOM 树结构。<br>渲染引擎将 CSS 样式表转化为浏览器可以理解的styleSheets，计算出 DOM 节点的样式。<br>创建布局树，并计算元素的布局信息。<br>对布局树进行分层，并生成分层树。<br>为每个图层生成绘制列表，并将其提交到合成线程。<br>合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。<br>合成线程发送绘制图块命令DrawQuad给浏览器进程。<br>浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。</p>
<p><img src="/2020/04/24/Renderer/Renderer3.png" alt="渲染流水线"></p>
<h2 id="更新了元素的几何属性（重排）"><a href="#更新了元素的几何属性（重排）" class="headerlink" title="更新了元素的几何属性（重排）"></a>更新了元素的几何属性（重排）</h2><p> 通过 JavaScript 或者 CSS 修改元素的几何位置属性，例如改变元素的宽度、高度等，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫重排。重排需要更新完整的渲染流水线，所以开销也是最大的。</p>
<h2 id="更新元素的绘制属性（重绘）"><a href="#更新元素的绘制属性（重绘）" class="headerlink" title="更新元素的绘制属性（重绘）"></a>更新元素的绘制属性（重绘）</h2><p> 果修改了元素的背景颜色，那么布局阶段将不会被执行，因为并没有引起几何位置的变换，所以就直接进入了绘制阶段，然后执行之后的一系列子阶段，这个过程就叫重绘。相较于重排操作，重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。</p>
<h2 id="直接合成阶段"><a href="#直接合成阶段" class="headerlink" title="直接合成阶段"></a>直接合成阶段</h2><p>我们使用了 CSS 的 transform 来实现动画效果，这可以避开重排和重绘阶段，直接在非主线程上执行合成动画操作。这样的效率是最高的，因为是在非主线程上合成，并没有占用主线程的资源，另外也避开了布局和绘制两个子阶段，所以相对于重绘和重排，合成能大大提升绘制效率。</p>
</div>
<div class="article-info article-info-index">
<p class="article-more-link">
<a class="article-more-a" href="/2020/04/24/Renderer/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-Runtime" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/04/24/Runtime/">运行时环境</a>
</h1>
<a href="/2020/04/24/Runtime/" class="archive-article-date">
<time datetime="2020-04-24T02:16:06.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-04-24</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="运行时环境"><a href="#运行时环境" class="headerlink" title="运行时环境"></a>运行时环境</h1><p>在 Chrome 中，只要打开一个渲染进程，渲染进程便会初始化 V8，同时初始化堆空间和栈空间。</p>
<h2 id="JavaScript-代码的执行流程"><a href="#JavaScript-代码的执行流程" class="headerlink" title="JavaScript 代码的执行流程"></a>JavaScript 代码的执行流程</h2><p><strong>JavaScript 代码在执行之前需要被 JavaScript 引擎编译，编译完成之后，才会进入执行阶段。</strong><br>JavaScript 代码执行过程中，需要先做变量提升，是因为 JavaScript 代码在执行之前需要先编译。<br>在编译阶段，变量和函数会被存放到变量环境中，变量的默认值会被设置为 undefined；<br>在代码执行阶段，JavaScript 引擎会从变量环境中去查找自定义的变量和函数。<br>如果在编译阶段，存在两个相同的函数，那么最终存放在变量环境中的是最后定义的那个，这是因为后定义的会覆盖掉之前定义的。</p>
<p><strong>经过编译后，会生成两部分内容：执行上下文（Execution context）和可执行代码。</strong><br><img src="/2020/04/24/Runtime/callstack.png" alt><br>当 JavaScript 执行全局代码的时候，会编译全局代码并创建全局执行上下文，而且在整个页面的生存周期内，全局执行上下文只有一份。<br>当调用一个函数的时候，函数体内的代码会被编译，并创建函数执行上下文，一般情况下，函数执行结束之后，函数执行上下文会被销毁。<br>当使用 eval 函数的时候，eval 的代码也会被编译，并创建执行上下文。</p>
<h2 id="调用栈：管理函数调用关系的数据结构"><a href="#调用栈：管理函数调用关系的数据结构" class="headerlink" title="调用栈：管理函数调用关系的数据结构"></a>调用栈：管理函数调用关系的数据结构</h2><p><img src="/2020/04/24/Runtime/stack.png" alt><br>栈是一种非常重要的数据结构，其他的编程语言，如 C/C++、Java、Python 等语言，<br>在执行过程中也都使用了栈来管理函数之间的调用关系。</p>
<p>JavaScript 引擎正是利用栈的这种结构来管理执行上下文的。<br>在执行上下文创建好后，JavaScript 引擎会将执行上下文压入栈中，通常把这种用来管理执行上下文的栈称为执行上下文栈，又称调用栈。<br><img src="/2020/04/24/Runtime/callstack1.png" alt><br><img src="/2020/04/24/Runtime/callstack2.png" alt><br><img src="/2020/04/24/Runtime/callstack3.png" alt></p>
<h2 id="执行上下文：执行的基础设施"><a href="#执行上下文：执行的基础设施" class="headerlink" title="执行上下文：执行的基础设施"></a>执行上下文：执行的基础设施</h2><p><img src="/2020/04/24/Runtime/AO.png" alt><br>在编译阶段，会生成执行上下文,执行上下文中包含了变量环境、词法环境、外部环境。</p>
<p>执行上下文是 JavaScript 执行一段代码时的运行环境，比如调用一个函数，就会进入这个函数的执行上下文，确定该函数在执行期间用到的诸如 this、变量、对象以及函数等。</p>
<p>闭包与普通函数的区别是，它携带了执行的环境，就像人在外星中需要自带吸氧的装备一样，这个函数也带有在程序中生存的环境。</p>
<p><strong>执行上下文在 ES3 中</strong><br>scope：作用域，也常常被叫做作用域链。<br>variable object：变量对象，用于存储变量的对象。<br>this value：this 值。<br><strong>在 ES5 中</strong><br>把执行上下文最初的三个部分改为下面这个样子。<br>lexical environment：词法环境，当获取变量时使用。<br>variable environment：变量环境，当声明变量时使用。<br>this value：this 值。</p>
<p><strong>在 ES2018 中</strong><br>this 值被归入 lexical environment，但是增加了不少内容。<br>lexical environment：词法环境，当获取变量或者 this 值时使用。<br>variable environment：变量环境，当声明变量时使用。<br>code evaluation state：用于恢复代码执行位置。<br>Function：执行的任务是函数时使用，表示正在被执行的函数。<br>ScriptOrModule：执行的任务是脚本或者模块时使用，表示正在被执行的代码。<br>Realm：使用的基础库和内置对象实例。Generator：仅生成器上下文有这个属性，表示当前生成器。<br><img src="/2020/04/24/Runtime/FN.png" alt></p>
<h2 id="作用域（scope）"><a href="#作用域（scope）" class="headerlink" title="作用域（scope）"></a>作用域（scope）</h2><p>作用域是指在程序中定义变量的区域，该位置决定了变量的生命周期。通俗地理解，作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期。</p>
<h2 id="作用域链"><a href="#作用域链" class="headerlink" title="作用域链"></a>作用域链</h2><p>每个执行上下文的变量环境中，都包含了一个外部引用，用来指向外部的执行上下文，我们把这个外部引用称为outer。函数的 outer 都是指向全局上下文的，这也就意味着如果在 bar 函数或者 foo 函数中使用了外部变量，那么 JavaScript 引擎会去全局执行上下文中查找。我们把这个查找的链条就称为作用域链。</p>
<p><img src="/2020/04/24/Runtime/outer1.png" alt></p>
<p><img src="/2020/04/24/Runtime/outer2.png" alt></p>
<h2 id="词法作用域"><a href="#词法作用域" class="headerlink" title="词法作用域"></a>词法作用域</h2><p>词法作用域就是指作用域是由代码中函数声明的位置来决定的，所以词法作用域是静态的作用域，通过它就能够预测代码在执行过程中如何查找标识符。</p>
</div>
<div class="article-info article-info-index">
<p class="article-more-link">
<a class="article-more-a" href="/2020/04/24/Runtime/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-ExecutionContext" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/04/23/ExecutionContext/">宿主环境</a>
</h1>
<a href="/2020/04/23/ExecutionContext/" class="archive-article-date">
<time datetime="2020-04-23T08:38:59.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-04-23</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="宿主环境"><a href="#宿主环境" class="headerlink" title="宿主环境"></a>宿主环境</h1><p>浏览器为 V8 提供基础的消息循环系统、全局变量、Web API<br><img src="/2020/04/23/ExecutionContext/EC1.jpg" alt><br>V8 提供了 ECMAScript 定义的一些对象和一些核心的函数，这包括了 Object、Function、String。<br>除此之外，V8 还提供了垃圾回收器、协程等基础内容，不过这些功能依然需要宿主环境的配合才能完整执行。<br><img src="/2020/04/23/ExecutionContext/EC2.jpg" alt></p>
<p>包括了堆空间和栈空间、全局执行上下文、全局作用域、内置的内建函数、宿主环境提供的扩展函数和对象，还有消息循环系统。</p>
<p>准备好运行时环境之后，V8 才可以执行 JavaScript 代码，这包括解析源码、生成字节码、解释执行或者编译执行这一系列操作。</p>
<h2 id="数据存储空间：堆空间和栈空间"><a href="#数据存储空间：堆空间和栈空间" class="headerlink" title="数据存储空间：堆空间和栈空间"></a>数据存储空间：堆空间和栈空间</h2><p><img src="/2020/04/23/ExecutionContext/stack0.png" alt><br>在 JavaScript 的执行过程中， 主要有三种类型内存空间，分别是代码空间、栈空间和堆空间。</p>
<p><img src="/2020/04/23/ExecutionContext/stack1.png" alt><br>栈空间主要是用来管理 JavaScript 函数调用的，栈是内存中连续的一块空间，同时栈结构是“先进后出”的策略。<br>栈空间的最大的特点是空间连续，所以在栈中每个元素的地址都是固定的，因此栈空间的查找效率非常高，但是通常在内存中，很难分配到一块很大的连续空间，如果函数调用层过深，那么 V8 就有可能抛出栈溢出的错误。</p>
<p>堆空间是一种树形的存储结构，用来存储对象类型的离散的数据，在前面的课程中我们也讲过，JavaScript 中除了原生类型的数据，其他的都是对象类型，诸如函数、数组，在浏览器中还有 window 对象、document 对象等，这些都是存在堆空间的。</p>
<p>在 Chrome 中，只要打开一个渲染进程，渲染进程便会初始化 V8，同时初始化堆空间和栈空间。<br>在函数调用过程中，涉及到上下文相关的内容都会存放在栈上，比如原生类型、引用到的对象的地址、函数的执行状态、this 值等都会存在在栈上。当一个函数执行结束，那么该函数的执行上下文便会被销毁掉。</p>
</div>
<div class="article-info article-info-index">
<p class="article-more-link">
<a class="article-more-a" href="/2020/04/23/ExecutionContext/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-BrowserWork" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/04/23/BrowserWork/">BrowserWork</a>
</h1>
<a href="/2020/04/23/BrowserWork/" class="archive-article-date">
<time datetime="2020-04-23T02:16:05.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-04-23</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<p><strong>Chrome架构</strong><br><img src="/2020/04/23/BrowserWork/chrome2.png" alt="早期 Chrome 进程架构图"><br>为了解决这些问题，在 2016 年，Chrome 官方团队使用“面向服务的架构”（Services Oriented Architecture，简称SOA）的思想设计了新的 Chrome 架构。也就是说 Chrome 整体架构会朝向现代操作系统所采用的“面向服务的架构” 方向发展，原来的各种模块会被重构成独立的服务（Service），每个服务（Service）都可以在独立的进程中运行，访问服务（Service）必须使用定义好的接口，通过 IPC 来通信，从而构建一个更内聚、松耦合、易于维护和扩展的系统<br><img src="/2020/04/23/BrowserWork/chrome.png" alt="最新的 Chrome 进程架构图"><br>Chrome 最终要把 UI、数据库、文件、设备、网络等模块重构为基础服务，类似操作系统底层服务，下面是 Chrome“面向服务的架构”的进程模型图：<br><img src="/2020/04/23/BrowserWork/chrome1.png" alt="Chrome面向服务的架构进程模型图"></p>
<h2 id="sequential-process"><a href="#sequential-process" class="headerlink" title="sequential process"></a>sequential process</h2><p>一个<a href="https://baike.baidu.com/item/进程" target="_blank" rel="noopener">进程</a>就是一个程序的运行实例， 在传统的操作系统中，进程既是基本的分配单元，也是基本的执行单元。<br><img src="/2020/04/23/BrowserWork/browser.png" alt="Chrome进程管理"></p>
<h2 id="浏览器进程。"><a href="#浏览器进程。" class="headerlink" title="浏览器进程。"></a>浏览器进程。</h2><p>主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。<br><img src="/2020/04/23/BrowserWork/browser.png" alt="浏览器进程"></p>
<h2 id="渲染进程。"><a href="#渲染进程。" class="headerlink" title="渲染进程。"></a>渲染进程。</h2><p>核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。<br><img src="/2020/04/23/BrowserWork/Renderer.png" alt="渲染进程"></p>
<h2 id="GPU-进程。"><a href="#GPU-进程。" class="headerlink" title="GPU 进程。"></a>GPU 进程。</h2><p>其实，Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。</p>
<h2 id="网络进程。"><a href="#网络进程。" class="headerlink" title="网络进程。"></a>网络进程。</h2><p>主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程。</p>
<h2 id="插件进程。"><a href="#插件进程。" class="headerlink" title="插件进程。"></a>插件进程。</h2><p>主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。</p>
</div>
<div class="article-info article-info-index">
<p class="article-more-link">
<a class="article-more-a" href="/2020/04/23/BrowserWork/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-Template-Engine" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/04/23/Template-Engine/">Template_Engine</a>
</h1>
<a href="/2020/04/23/Template-Engine/" class="archive-article-date">
<time datetime="2020-04-23T02:00:33.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-04-23</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="服务端模版引擎"><a href="#服务端模版引擎" class="headerlink" title="服务端模版引擎"></a>服务端模版引擎</h2><p>ExpressJS<br>Nunjucks<br>Velocity<br>Enjoy<br>Jsp<br>freemarker<br>velocity<br>thymeleaf<br>Enjoy</p>
<h2 id="客户端模版引擎"><a href="#客户端模版引擎" class="headerlink" title="客户端模版引擎"></a>客户端模版引擎</h2><p>BaiduTemplate<br>EJS<br>Mustache<br>Handlebars<br>Nunjucks<br>Underscore<br>Pug<br>Marko<br>Jade<br>JsRender<br>Squirrelly<br>jQuery Templating<br>ECT<br>Template7<br>Art-template</p>
<h2 id="模版加载框架"><a href="#模版加载框架" class="headerlink" title="模版加载框架"></a>模版加载框架</h2><p>SeaJS</p>
</div>
<div class="article-info article-info-index">
<p class="article-more-link">
<a class="article-more-a" href="/2020/04/23/Template-Engine/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-Node-Frameworks" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/04/23/Node-Frameworks/">Node_Frameworks</a>
</h1>
<a href="/2020/04/23/Node-Frameworks/" class="archive-article-date">
<time datetime="2020-04-23T01:59:40.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-04-23</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="Express-js"><a href="#Express-js" class="headerlink" title="Express.js"></a>Express.js</h2><p>如果您搜索Node.js Web框架，您肯定会经常看到Express.js。Express.js是***Node.js框架之一，并非没有理由 - 许多开发人员喜欢它来创建一个有效的平台来构建健壮的应用程序和API。它是众所周知的MEAN堆栈（MongoDB，Express，Angular和Node.js）的四个组件之一，它是一个经常用于构建Web应用程序的工具集。<br>Express.js是Node.js的Web框架之一，拥有一套出色的文档，并享有很好的社区支持。这意味着您可以轻松找到Express.js的可重用组件和库。此外，它不需要使用特定的开发实践或特定工具，因此JavaScript开发人员可以获得的自由。</p>
<h2 id="Koa2"><a href="#Koa2" class="headerlink" title="Koa2"></a>Koa2</h2><p>Koa2是Koa框架的第二个版本。Koa是创建Express.js的同一团队的产品; 然而，它与Express.js有很大的不同，并没有那么受欢迎。它现在正处于大量开发的过程中，版本2是该框架的稳定版本。<br>Koa2属于Node.js MVC框架系列，其中MVC代表模型 - 视图 - 控制器。MVC的三个组件是作为应用程序数据的模型，视图是通过app UI的数据表示，控制器在模型和视图之间传递请求和更新。<br>国内有很多框架是基于Koa2开发的，比如阿里的Egg.js。ThinkJS等</p>
<h2 id="Sails-js"><a href="#Sails-js" class="headerlink" title="Sails.js"></a>Sails.js</h2><p>Sails.js是Node.js的另一个MVC框架，它也是由Express.js背后的团队创建的。框架默认支持Socket.io，这使其成为社交媒体应用，消息传递工具和协作软件解决方案的***选择之一。</p>
<h2 id="NestJS"><a href="#NestJS" class="headerlink" title="NestJS"></a>NestJS</h2><p>NestJS是Node.js框架中的新手。它专注于服务器端脚本，旨在构建服务器端应用程序。NestJS与其他Node.js Web应用程序框架的不同之处在于它使用TypeScript，TypeScript是JavaScript的特殊超集作为其编程语言。如果您熟悉Angular，它也使用TypeScript，那么使用NestJS构建后端没有问题，因为组件和语法看起来非常熟悉。<br>有开发服务器渲染的同学应该对这个很熟悉。</p>
<h2 id="LoopBack"><a href="#LoopBack" class="headerlink" title="LoopBack"></a>LoopBack</h2><p>LoopBack是Express.js团队的另一个创建，基于Express.js开发。Loopback是API框架，允许您构建适用于任何客户端的API，并且可以连接各种设备。</p>
<h2 id="Meteor-js"><a href="#Meteor-js" class="headerlink" title="Meteor.js"></a>Meteor.js</h2><p>***的全栈框架之一，可以轻松，直接地创建实时应用程序。优点在于它在服务器端和客户端使用相同的API，从而提高了整体应用程序性能。</p>
<h2 id="Derby-js"><a href="#Derby-js" class="headerlink" title="Derby.js"></a>Derby.js</h2><p>Derby.js属于MVC框架，可用于客户端和服务器端脚本开发。</p>
<h2 id="Hapi-js"><a href="#Hapi-js" class="headerlink" title="Hapi.js"></a>Hapi.js</h2><p>与我们在这里提到的许多其他框架不同，Hapi.js与Express.js无关，因此可能被认为是其竞争对手之一。Hapi.js最初是为了支持大型分布式团队的工作而创建的，该框架被认为是由大型分布式团队构建的企业级应用程序的***选择。<br>Hapi.js通过专注于插件来实现出色的协作可能性，这些插件允许在不影响应用程序其余部分的情况下处理单独的组件。该框架非常适合创建可重用的组件，以帮助企业缩短开发时间。<br>Hapi.js框架被用于为沃尔玛 零售连锁店，雅虎 网络服务提供商构建网络应用程序和网站，以及英国政府，信不信由你。</p>
<h2 id="Mean-io"><a href="#Mean-io" class="headerlink" title="Mean.io"></a>Mean.io</h2><p>Mean.io是另一个全栈框架，从它的名字可以看出它使用的是哪个堆栈。它提供了开箱即用的开始应用程序开发所需的一切，因此使用Mean.io可以立即开始工作。由于它是一个完整的开发堆栈，因此无需选择单独的组件并进行实验。此外，此框架中使用的所有工具都可以立即配置为一起使用。</p>
<h2 id="Total-js"><a href="#Total-js" class="headerlink" title="Total.js"></a>Total.js</h2><p>一个MVC服务器端框架，非常适合创建Web应用程序。它在与支持MongoDB，MySQL，PostgreSQL的各种数据库的兼容性方面非常灵活，并且适用于许多前端网络，例如Angular，React和Ember。<br>Total.js非常适合以相对较低的维护成本创建响应式应用程序，并且可以依赖它来提供足够的可伸缩性和性能。</p>
</div>
<div class="article-info article-info-index">
<p class="article-more-link">
<a class="article-more-a" href="/2020/04/23/Node-Frameworks/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-parsing" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/04/19/parsing/">parsing</a>
</h1>
<a href="/2020/04/19/parsing/" class="archive-article-date">
<time datetime="2020-04-19T11:25:25.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-04-19</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="JS变量声明是由在tokenizer和parser之间的preparser处理的"><a href="#JS变量声明是由在tokenizer和parser之间的preparser处理的" class="headerlink" title="JS变量声明是由在tokenizer和parser之间的preparser处理的"></a>JS变量声明是由在tokenizer和parser之间的preparser处理的</h2><p><a href="https://github.com/v8/v8/blob/4b9b23521e6fd42373ebbcb20ebe03bf445494f9/src/parsing/preparser.cc" target="_blank" rel="noopener">V8</a></p>
</div>
<div class="article-info article-info-index">
<p class="article-more-link">
<a class="article-more-a" href="/2020/04/19/parsing/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-Interview" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/04/15/Interview/">Interview</a>
</h1>
<a href="/2020/04/15/Interview/" class="archive-article-date">
<time datetime="2020-04-15T06:53:35.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-04-15</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="数学"><a href="#数学" class="headerlink" title="数学"></a>数学</h2><p><strong>01 请叙述如何求得平面上任一线直线 f (x) = a． x + b 与任一点 P ( x_p, y_p) 的垂直距离?</strong></p>
<p><strong>02 请叙述如何计算两矢量: vector A = (x_a, y_a) , vector B = ( x_b, y_b) 之间的夹角 θ?</strong></p>
<p><strong>03 请叙述如何判断一个点是否在一个凸多边形里面?</strong><br> “Ray-casting Algorithm”，叫“光线投射算法”，简单地说可以这么判断：<br> 从这个点引出一根“射线”，与多边形的任意若干条边相交，累计相交的边的数目，<br> 如果是奇数，那么点就在多边形内，否则点就在多边形外。</p>
<h2 id="JavaScript-jQuery"><a href="#JavaScript-jQuery" class="headerlink" title="JavaScript / jQuery"></a>JavaScript / jQuery</h2><p><strong>04 下方图片为一段动态新增列表项目的 code，请问被动态新增出来的 .js-list-item 为什么不会触发 click event？要怎么样修改才能正常执行？</strong><br><img src="/2020/04/15/Interview/Interview1.png" alt></p>
<p><strong>05 请说明以下例子的 console.log 会印出什么？请说明为何同样是印 this.name 却有不同的输出结果？</strong><br><img src="/2020/04/15/Interview/Interview2.jpg" alt></p>
<p><strong>06 请描述你对 AJAX 的理解？</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p><strong>07 请比较 CSS 动画与 JavaScript 动画之间的差异，并举出你选择使用 CSS 动画与 JS 动画的例子与原因。</strong></p>
<p><strong>08 请写出下方程式码的结果？</strong><br><img src="/2020/04/15/Interview/Interview3.jpg" alt></p>
<p><strong>09 请写出打印出来的结果?</strong><br><img src="/2020/04/15/Interview/Interview4.jpg" alt></p>
<h2 id="研发相关"><a href="#研发相关" class="headerlink" title="研发相关"></a>研发相关</h2><p><strong>10 当一个事件被频繁触发，例如滑鼠移动、scrollbar拉动等，造成画面的不顺畅，请问该如何做优化处理呢?</strong></p>
<p>函数防抖和节流</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">throttle2</span>(<span class="params">fn, threshold, scope</span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> timer;</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> context = scope || <span class="keyword">this</span>, args = <span class="built_in">arguments</span>;</span><br><span class="line"> <span class="keyword">if</span> (!timer) {</span><br><span class="line"> timer = setTimeout(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> fn.apply(context, args);</span><br><span class="line"> timer = <span class="literal">null</span>;</span><br><span class="line"> }, threshold)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><strong>11 请设计一个函数，函数名称自订，输入任意两个在 x-y 平面的向量，会回传两矢量的和。 (请自行定义传入与回传的矢量物件形式)</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> </span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><strong>12 请设计一个函数，函数名称自订，输入一个数字 n，会回传小于 n 的所有质数的阵列</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> </span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><strong>13 在 JavaScript 中，有什么情况是 immutable，并说明应用?</strong></p>
<p><strong>14 Temporal Dead Zone(TDZ)，在什么情况下会发生?</strong></p>
<h2 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h2><p><strong>15 请描述 inline element 与 block element ，以及两者之间的差异？</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">一般情况下，行内元素只能包含数据和其他行内元素。而块级元素可以包含行内元素和其他块级元素。</span><br><span class="line">这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。</span><br><span class="line">默认情况下，行内元素不会以新行开始，而块级元素会新起一行。</span><br></pre></td></tr></table></figure>
<p><strong>16 请描述你对 SEO 的理解？另外，在开发时有什么需要注意的？</strong><br> 搜索引擎优化，又称为SEO，即Search Engine Optimization，是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。<br> 目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。<br> 它是一种通过分析搜索引擎的排名规律，了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。搜索引擎采用易于被搜索引用的手段，对网站进行有针对性的优化，提高网站在搜索引擎中的自然排名，吸引更多的用户访问网站，提高网站的访问量，提高网站的销售能力和宣传能力，从而提升网站的品牌效应</p>
<h2 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h2><p><strong>17 排列出它们在套用 style 时的优先顺序(权重)</strong></p>
<p><img src="/2020/04/15/Interview/CSS.png" alt></p>
<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity" target="_blank" rel="noopener">MDN CSS优先级</a><br><a href="https://specifishity.com" target="_blank" rel="noopener">跟多细节</a></p>
<p><strong>18 你曾用过哪些方法来最佳化你的 CSS 与提高效能？</strong></p>
<p><strong>19 你曾用过哪些方法来解决跨浏览器相容性的问题？又曾用过什么工具来辅助测试？</strong></p>
</div>
<div class="article-info article-info-index">
<p class="article-more-link">
<a class="article-more-a" href="/2020/04/15/Interview/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<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="extend next" rel="next" href="/page/2/">Next &raquo;</a>
</nav>