/
open-in-web-browser_zh-CN.html
5405 lines (5396 loc) · 292 KB
/
open-in-web-browser_zh-CN.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 lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>2019前端开发人员手册 - 深入学习JavaScript，CSS和HTML开发实践！</title>
<meta name="description" content="这是一份任何人都可以用来了解前端开发实践的指南。">
<meta property="og:type" content="website">
<meta property="og:title" content="2019前端开发人员手册 - 深入学习JavaScript，CSS和HTML开发实践！">
<meta name="twitter:title" content="2019前端开发人员手册 - 深入学习JavaScript，CSS和HTML开发实践！">
<meta property="og:description" content="前端开发人员在前端工程中使用最新学习资源和开发工具的指南。">
<meta name="twitter:description" content="前端开发人员在前端工程中使用最新学习资源和开发工具的指南。">
<meta property="og:determiner" content="the">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="https://frontendmasters.com/books/front-end-handbook/2019/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@frontendmasters">
<meta property="og:image" content="https://frontendmasters.com/books/front-end-handbook/2019/assets/images/FM_2019Cover_small.jpg">
<meta name="twitter:image" content="https://frontendmasters.com/books/front-end-handbook/2019/assets/images/FM_2019Cover_small.jpg">
<link rel="canonical" href="https://frontendmasters.com/books/front-end-handbook/2019/">
<link rel="stylesheet" href="assets/reset.css" />
<link rel="stylesheet" href="assets/styles.css" />
<link rel="stylesheet" href="assets/prism.css" />
<script src="assets/prism.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-11649917-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-11649917-2');
</script>
</head>
<body>
<div id="menu">
<div id="toc"></div>
</div>
<div id="panel">
<div id="menuButton">
|||
</div>
<div id="bookPadding">
<p><img alt="Front End Developers Handbook 2019 Cover" src="./assets/images/FM_2019Cover_final.jpg"></p>
<h1>2019前端开发人员手册</h1>
<h3 style="margin-top:0px"><a id="Written_by_Cody_Lindleyhttpcodylindleycom_3"></a>作者:<a href="http://codylindley.com/">Cody Lindley</a></h3>
<section>
<p><em>由<a href="https://frontendmasters.com/">Frontend Masters</a>赞助， 通过深入的现代前端开发课程提升您的技能</em></p>
</section>
<hr>
<p>下载: <a href="https://github.com/FrontendMasters/front-end-handbook-2019/raw/master/exports/Front-end%20Developer%20Handbook%202019.pdf">PDF</a> | <a href="https://github.com/FrontendMasters/front-end-handbook-2019/raw/master/exports/Front-End%20Developer%20Handbook%202019.epub">epub</a></p>
<h3>概述:</h3>
<p>这是一份任何人都可以用来了解前端开发实践的指南。 它概括地描绘了2019年前端工程的开发实践之路：如何学习前端以及开发实践时使用到了哪些工具。</p>
<p>本手册特别希望能成为目前正在练习前端开发人员潜在的专业资源，为他们提供完备匹配的学习材料和开发工具。 除此之外，管理人员、首席技术官、教师和猎头都可以使用它来深入了解前端开发。</p>
<p>本手册的内容支持Web技术（HTML，CSS，DOM和JavaScript）以及直接构建在这些开放技术之上的解决方案。 书中引用和讨论的材料要么是最好的，要么是目前提出的问题。</p>
<p>本书并没有完全概述所有前端开发人员可用的资源，欢迎大家建议补充。 本书的价值在于帮助前端开发人员简洁，集中，及时地掌握足够的分类信息，以免任何人对任何一个特定主题产生误解。</p>
<p>手册目标是每年都发布内容更新。</p>
<hr>
<p><strong>手册内容知多少</strong>:</p>
<p>序章 <a href="#0">0</a> 提供了前端开发的年度精简回顾以及即将到来或发生的事情。 章节 <a href="#1">1</a> & <a href="#2">2</a> 旨在简要概述前端知识的开发和实践。 章节 <a href="#3">3</a> & <a href="#4">4</a> 推荐汇总学习路径和资源。 章节 <a href="#5">5</a> 汇总列出前端开发人员使用的工具。 章节 <a href="#6">6</a> 突出的前端信息渠道。</p>
<hr>
<p><strong>欢迎在Github上提供新内容，建议和修复</strong>:</p>
<p><a href="https://github.com/FrontendMasters/front-end-handbook-2019">https://github.com/FrontendMasters/front-end-handbook-2019</a></p>
<hr>
<div class="chapter" id="chapter0">
<h2>序章 0. 回顾2018以及展望未来</h2>
<h3>0.1 — 回顾2018年的前端发展</h3>
<ul>
<li>React去年有几个值得注意的发布，其中包括 <a href="https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes">生命周期方法</a>， <a href="https://reactjs.org/blog/2018/03/29/react-v-16-3.html#official-context-api">上下文API</a>， <a href="https://reactjs.org/docs/react-api.html#reactsuspense">suspense</a>和 <a href="https://reactjs.org/docs/hooks-intro.html">React hooks</a>.
</li>
<li>
<a href="https://news.microsoft.com/2018/06/04/microsoft-to-acquire-github-for-7-5-billion/">微软收购Github</a>。 是的，这已经发生了。
</li>
<li>仅用<a href="https://yusugomori.com/projects/css-sans/">CSS描绘Fonts</a>成为现实。
</li>
<li>过去称之为前端驱动的应用程序，被称呼为<a href="https://thepowerofserverless.info/">"serverless"</a>。 不过，这个术语<a href="https://www.jeremydaly.com/stop-calling-everything-serverless/">serverless</a>已经不再适应了。 现在，<a href="https://jamstack.org/">JAMstack</a>似乎更被开发者们所<a href="https://jamstackconf.com/nyc/">认同</a>。
</li>
<li>谷歌今年提供了一些简洁的工具，以帮助加快网页加载速度，即<a href="https://github.com/GoogleChromeLabs/squoosh/">squoosh</a> 和 <a href="https://github.com/GoogleChromeLabs/quicklink">quicklink</a>。
</li>
<li>
今年 <a href="https://risingstars.js.org/2018/en/#section-framework">Vue</a> 获得的 <a href="https://hasvuepassedreactyet.surge.sh/">Github stars</a> 已经超过了 React。 但是 React 在<a href="https://2018.stateofjs.com/front-end-frameworks/overview/">使用方面</a>仍占据<a href="https://www.npmjs.com/browse/depended">主导地位</a>。
</li>
<li><a href="https://github.com/redom/redom">RE:DOM</a>是类似于React的解决方案，没有虚拟DOM或JSX。
</li>
<li>NW.js 和 Electron 的替代品出现，<a href="https://deskgap.com/">DeskGap</a> 和 <a href="https://neutralino.js.org/">Neutralino.js</a>.
</li>
<li>2017年前端<a href="https://medium.com/@mandy.michael/is-there-any-value-in-people-who-cannot-write-javascript-d0a66b16de06">HTML和CSS开发人员</a>与<a href="https://medium.com/@mandy.michael/is-there-any-value-in-people-who-cannot-write-javascript-d0a66b16de06" target="_blank">前端应用程序开发人员</a>之间存在着实现/语言化方面的<a href="https://medium.com/@jerrylowm/the-death-of-front-end-developers-803a95e0f411" target="_blank">巨大鸿沟</a>。 在2018年，这种<a href="https://css-tricks.com/the-great-divide/">分歧</a>越来越大，<a href="https://rachelandrew.co.uk/archives/2019/01/30/html-css-and-our-vanishing-industry-entry-points/">越来越多</a>的人开始<a href="https://hackernoon.com/the-backendification-of-frontend-development-62f218a773d4">感受</a>到 <a href="http://bradfrost.com/blog/post/big-ol-ball-o-javascript/">这种</a><a href="https://justmarkup.com/log/2018/11/just-markup/">鸿沟</a>。
</li>
<li>像最近几年一样，今年充满了尝试与主流JavaScript应用工具竞争的应用/框架解决方案（即<a href="https://stateofjs.com/2017/front-end/results" target="_blank">React，Angular 和 Vue 等......</a>) 让我为你列出它们：<a href="https://radi.js.org/">Radi.js</a>， <a href="https://display.js.org/">DisplayJS</a>， <a href="https://stimulusjs.org/">Stimulus</a>， <a href="https://github.com/Tencent/omi">Omi</a>， <a href="https://quasar-framework.org">Quasar</a>。
</li>
<li>JavaScript框架开始提供自己编译为JavaScript的语言（例如<a href="https://www.mint-lang.com/">Mint</a>)。
</li>
<li>
<a href="https://codesandbox.io/" target="_blank">CodeSandbox</a> 发展成为在线代码共享的主要解决方案。
</li>
<li>
<a href="https://cssgridgarden.com/">CSS Grid</a> 和 <a href="https://flexboxfroggy.com/">CSS Flexbox</a> 在现代浏览器中得到完全支持，并且可以用于一些严格场景。但许多人 <a href="https://www.youtube.com/watch?v=hs3piaN4b5I">不知道</a>何时<a href="https://css-irl.info/to-grid-or-to-flex/"></a>使用哪一个以及如何使用</a>。
</li>
<li>
许多人意识到类型连接系统的长期成本（例如TypeScript和Flow）。 这些系统实际上和模块连接系统(即 AMD/Require.js)并无什么不同，甚至可能会<a href="https://medium.com/javascript-scene/the-typescript-tax-132ff4cb175b">遇到更多的问题</a>. 最后, 许多开发人员意识到，如果在大型代码库中需要类型，那么与其中包含它们的语言(例如 <a href="https://reasonml.github.io/">Reason</a>， <a href="http://www.purescript.org/">Purescript</a>， <a href="https://elm-lang.org/">Elm</a>)相比，结果并不理想。
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS 变量</a>在现代Web浏览器中获得<a href="https://caniuse.com/#feat=css-variables">支持</a>。
</li>
<li><a href="http://michelebertoli.github.io/css-in-js/">在JS中写CSS</a>的扩展受到很多<a href="http://bradfrost.com/blog/link/whats-wrong-with-css-in-js/">质疑</a>。
</li>
<li>
<a href="https://caniuse.com/#search=modules">ES modules</a> 用于现代浏览器，实现<a href="https://developers.google.com/web/updates/2017/11/dynamic-import#dynamic">动态引入</a>。 我们能看到围绕这一现实<a href="https://www.pikapkg.com/blog/introducing-pika-pack/">工具的转变</a>。
</li>
<li>许多人意识到端到端正确进行测试的起点在很大程度上基于<a href="https://www.cypress.io/how-it-works/" target="_blank">Cypress</a> (比如先是 Cypress ， 然后是 <a href="https://jestjs.io/">Jest</a>)。
</li>
<li>即使今年<a href="https://webpack.js.org/" target="_blank">Webpack</a>被大量使用， 但许多开发者认为 <a href="https://github.com/parcel-bundler/parcel" target="_blank">Parcel</a> 更容易启动和运行。
</li>
<li>今年提出的最重要问题之一是<a href="https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4">JavaScript的成本</a>是多少。
</li>
<li>
<a href="https://babeljs.io/blog/2018/08/27/7.0.0">Babel 7 今年发布</a>。 这是一件大事，因为上一次主要版本是差不多三年前。
</li>
<li>JavaScript 发展变化太快的事实让人们开始<a href="https://www.robinwieruch.de/javascript-fundamentals-react-requirements/">讨论</a> 在你学习 JavaScript相关知识（比如 React）之前需要事先知晓掌握多少知识。现实很残酷。
</li>
<li>很多开发者通过<a href="https://www.apollographql.com/">Apollo</a>了解了 GraphQL, 并将其视为数据API的下一代 <a href="https://blog.bitsrc.io/why-does-everyone-love-graphql-17de7f99f05a">演进</a> 。
</li>
<li>Gulp 相关工具市场使用率已经退居 <a href="https://css-tricks.com/why-npm-scripts/">NPM/Yarn </a>之后，但是这并没有阻止微软的 <a href="https://github.com/Microsoft/just">Just</a> 加入竞争行列。
</li>
<li>今年，人们不仅可以通过网页检查 HTML, CSS, and JavaScript， 甚至可以 <a href="https://webhint.io">检查网页</a> 本身。
</li>
<li>2018年如果你想了解多少网页仍在使用 jQuery，那么<a href="https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results">2018前端工具调查</a>非常值得你阅读。
</li>
<li><a href="https://2018.stateofjs.com/javascript-flavors/typescript/">不可否认</a> <a href="https://www.typescriptlang.org/">TypeScript</a>今年获得了很多忠实用户。
</li>
<li>
<a href="https://code.visualstudio.com/">VScode</a>, 作为代码编辑器占据<a href="https://triplebyte.com/blog/editor-report-the-rise-of-visual-studio-code">主导地位</a>。
</li>
</ul>
<h3>0.2 — 在2019年， 期望...</h3>
<ul>
<li>希望“<a href="https://cathydutton.co.uk/posts/why-i-stopped-using-sass/">停止使用Sass</a>”能有更多的发展。
</li>
<li>通过<a href="https://cssdb.org/">https://cssdb.org</a>密切关注并了解CSS的新增功能（和潜在的附加功能）是一个好主意。
</li>
<li>来自谷歌的<a href="https://developers.google.com/speed/webp/">WebP</a>图像格式可以在今年获得<a href="https://caniuse.com/#feat=webp">所有现代浏览器的支持</a>。
</li>
<li>
<a href="https://prepack.io/">Prepack</a>高速发展中。
</li>
<li>
<a href="https://graphql.org/">GraphQL</a>将继续获得大量采用。
</li>
<li>“<a href="https://stateofjs.com/">State of JavaScript</a>”调查作者将在2019年增加一个“<a href="https://stateofcss.com/">State of CSS</a>”调查。
</li>
<li>密切关注<a href="https://caniuse.com/#feat=web-animation">Web Animations API</a>.
</li>
<li>你认识的人会试图说服你使用<a href="https://www.typescriptlang.org/">TypeScript</a>。
</li>
<li>Babel 将会和<a href="https://github.com/swc-project/swc">swc-project</a>展开一些竞争。
</li>
<li><a href="https://jamstack.org/">JAMStack</a>案例将<a href="https://jamstackconf.com/nyc/">持续发展</a>。
</li>
<li>
<a href="https://quasar-framework.org">将一个代码库发布到许多平台将继续发展。</a>
</li>
<li>对于大型代码库，更多的开发人员将转向使用<a href="https://www.imaginarycloud.com/blog/reasonml-react-as-first-intended/">ReasonML</a>而不是JavaScript / TypeScript的语言。
</li>
<li>更多的<a href="https://github.com/twbs/bootstrap/pull/23586">大型项目</a>开始放弃jQuery，转而支持原生DOM解决方案。
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">Web Components</a>! 此时，我不知道Web Components将如何发挥作用。 现实是他们不会消失，一旦炒作结束，他们就没有获得很多动力/用法。
</li>
</ul>
</div>
<hr>
<div class="chapter" id="chapter1">
<h2>章节 1. 什么是前端开发人员？</h2>
<section class="sub">
<p>本章提供了前端开发和前端开发人员发展的时间线说明。</p>
</section>
<blockquote>
<p>前端Web开发（也称为客户端开发）是为网站或Web应用程序生成HTML，CSS和JavaScript的实践，以便用户可以直接查看和与之交互。 与前端开发相关的挑战是，用于创建网站前端的工具和技术不断变化，因此开发人员需要不断了解该领域的发展方式。</p>
<p>设计网站的目的是确保当用户打开网站时，他们会以易于阅读和正确的相关格式查看信息。 由于用户现在使用具有不同屏幕尺寸和分辨率的各种设备，因此迫使设计者在设计场地时考虑这些方面，这使事情变得更加复杂。 他们需要确保他们的网站在不同的浏览器（跨浏览器），不同的操作系统（跨平台）和不同的设备（跨设备）中正确显示，这需要在开发人员方面进行仔细的规划。</p>
<p><cite><a href="https://en.wikipedia.org/wiki/Front-end_web_development" target="_blank">https://en.wikipedia.org/wiki/Front-end_web_development</a></cite></p>
</blockquote>
<p><img alt="" src="./assets/images/what-is-front-end-dev.png" title="https://www.upwork.com/hiring/development/front-end-developer/"> <cite>Image source: <a href="https://www.upwork.com/hiring/development/front-end-developer/" target="_blank">https://www.upwork.com/hiring/development/front-end-developer/</a></cite></p>
<h4 id="html-css--javascript">一个前端开发者...</h4>
<p>前端开发人员使用Web技术（即<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">CSS</a>，和 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">JavaScript</a>）构建和开发网站和Web应用程序，这些技术通常在<a href="https://en.wikipedia.org/wiki/Open_Web_Platform" target="_blank">Open Web Platform</a>上运行或充当非Web平台环境的编译输入（即 <a href="https://facebook.github.io/react-native/" target="_blank">React Native</a>）。</p>
<p>一个人通过学习构建依赖于HTML，CSS和JavaScript的网站或Web应用程序进入前端开发领域，并且通常在<a href="https://en.wikipedia.org/wiki/Web_browser" target="_blank">web浏览</a> 中运行，但也可以在<a href="https://en.wikipedia.org/wiki/Headless_browser" target="_blank">无头浏览器</a>, <a href="http://developer.telerik.com/featured/what-is-a-webview/" target="_blank">WebView</a>或本机运行时环境编译中运行。 下面解释这四个运行时间场景。</p>
<p><strong>Web浏览器（最常见）</strong></p>
<p>Web浏览器是用于检索，呈现和遍历<a href="https://en.wikipedia.org/wiki/World_Wide_Web" target="_blank">WWW</a>上的信息的软件。 通常，浏览器在台式机或笔记本电脑，平板电脑或手机上运行，但最近几乎可以在任何东西上找到浏览器（例如，在冰箱，汽车等）。</p>
<p>最常见的Web浏览器（<a href="https://en.wikipedia.org/wiki/Usage_share_of_web_browsers#Summary_tables" target="_blank">按照最常用的顺序显示</a>）：</p>
<ul>
<li>
<a href="http://www.google.com/chrome/" target="_blank">Chrome</a>
</li>
<li>
<a href="http://www.apple.com/safari/" target="_blank">Safari</a>
</li>
<li>
<a href="https://en.wikipedia.org/wiki/Internet_Explorer" target="_blank">Internet Explorer</a> (注意：不是<a href="http://dev.modern.ie/" target="_blank">Edge</a>，指的是IE 9到IE 11)
</li>
<li>
<a href="https://www.mozilla.org/firefox/" target="_blank">Firefox</a>
</li>
<li>
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge" target="_blank">Edge</a>
</li>
</ul>
<p><strong>无头浏览器</strong></p>
<p>无头浏览器是<strong>没有</strong>图形用户界面的网络浏览器，可以从命令行界面以编程方式控制该网络浏览器以用于网页自动化（例如，功能测试，抓取，单元测试等）。 将无头浏览器视为可以从命令行以编程方式运行的浏览器，该命令行可以检索和遍历网页代码。</p>
<p>最常见的无头浏览器是：</p>
<ul>
<li>
<a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md" target="_blank">Headless Chromium</a>
</li>
<li>
<a href="https://github.com/assaf/zombie" target="_blank">Zombie</a>
</li>
<li>
<a href="http://slimerjs.org/" target="_blank">slimerjs</a>
</li>
<li>
<a href="https://github.com/GoogleChrome/puppeteer" target="_blank">puppeteer</a>
</li>
</ul>
<p><strong>Webviews</strong></p>
<p><a href="http://developer.telerik.com/featured/what-is-a-webview/" target="_blank">Webviews</a>由本机操作系统（在本机应用程序中）用于运行网页。可以想象一个像iframe的<a href="http://developer.telerik.com/featured/what-is-a-webview/" target="_blank">webview</a>或来自web浏览器的单个选项卡，它嵌入在设备上运行的本机应用程序中（例如， <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebView_Class/" target="_blank">iOS</a>， <a href="http://developer.android.com/reference/android/webkit/WebView.html" target="_blank">android</a>， <a href="https://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.webview.aspx" target="_blank">windows</a>）。</p>
<p><a href="http://developer.telerik.com/featured/what-is-a-webview/" target="_blank">webview</a>开发最常用的解决方案是：</p>
<ul>
<li>
<a href="https://cordova.apache.org/" target="_blank">Cordova</a> （通常用于原生手机/平板电脑应用）
</li>
<li>
<a href="https://github.com/nwjs/nw.js" target="_blank">NW.js</a> （通常用于桌面应用）
</li>
<li>
<a href="http://electron.atom.io/" target="_blank">Electron</a> （通常用于桌面应用）
</li>
</ul>
<p><strong>Web Tech原生</strong></p>
<p>随着发展，前端开发人员可以使用从Web浏览器开发中学到的知识来为不受浏览器引擎（即Web平台）推动的环境制作代码。 最近，开发环境正在被设想为使用Web技术（例如，CSS和JavaScript）而没有Web引擎来创建本机应用程序。</p>
<p>这些开发环境的一些示例：</p>
<ul>
<li>
<a href="https://flutter.io/" target="_blank">Flutter</a>
</li>
<li>
<a href="https://facebook.github.io/react-native/" target="_blank">React Native</a>
</li>
<li>
<a href="https://www.nativescript.org/" target="_blank">NativeScript</a>
</li>
</ul>
<div class="notes">
<p><strong>注意：</strong></p>
<ol>
<li>确保您清楚“网络平台”的确切含义。 阅读“<a href="https://en.wikipedia.org/wiki/Open_Web_Platform" target="_blank">"开放Web平台"</a>”维基百科页面。 探索构成Web平台的众多<a href="https://platform.html5.org/" target="_blank">更多技术</a>。
</li>
</ol>
</div>
</div>
<div class="chapter" id="chapter2">
<h2>章节 2. 前端开发实践：概述</h2>
<section class="sub">
<p>本章将分解并广泛地描述前端工程的实践，从“如何成为前端开发人员”开始。</p>
</section>
<h3>2.1 - 如何成为前端开发人员</h3>
<p>如何成为前端开发人员？ 嗯，这很复杂。 试试这个路线图：</p>
<p><img alt="" data-src="assets/images/frontend.png" title="https://github.com/kamranahmedse/developer-roadmap"></p>
<p><cite>图片来自： <a href="https://github.com/kamranahmedse/developer-roadmap" target="_blank">https://github.com/kamranahmedse/developer-roadmap</a></cite></p>
<p>时至今日，似乎并没有大学开设了前端工程学位。而且我也很少听到或遇到前端开发人员经历了一个可能被否定蔑视的计算机科学学位或平面设计学位，最终选择专业地编写HTML，CSS和JavaScript。从我的角度来看，今天在前端工作的大多数人似乎从头开始自学，或者从设计或计算机科学领域跨越到前端开发工作领域。</p>
<p>今天如果您想要成为一名前端开发人员，我建议您努力了解下面概述的流程（第3章和第4章将深入探讨有关学习资源的更多细节）。</p>
<ol>
<li>大致了解一下<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">网络</a> <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">平台</a>的工作原理。 确保您了解<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">HTML, CSS, DOM, JavaScript, 域名, DNS, URLs, HTTP, 浏览器和服务器</a>的内容和作用。暂时不要过于深入了解，只需要了解其中的组成部分以及它们如何松散地融合在一起工作的。 首先从构建简单的网页开始。
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">学习 HTML</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">学习 CSS</a>
</li>
<li>
<a href="https://youtu.be/QjKH1J77gjI?list=PL055Epbe6d5bQubu5EWf_kUNA3ef_qbmL" target="_blank">学习 JavaScript</a>
</li>
<li>学习 DOM</li>
<li>了解用户界面设计的基础知识（即UI模式，交互设计，用户体验设计和可用性）。</li>
<li>学习 CLI/命令行</li>
<li>学习软件工程的实践（即应用程序设计/架构，模板，Git，测试，监控，自动化，代码质量，开发方法）。</li>
<li>根据您个人的喜好（例如Webpack，React和Mobx）对您的代码工具进行选择和定制。</li>
<li>学习 Node.js</li>
</ol>
<p>关于学习的简短建议。<a href="https://youtu.be/QjKH1J77gjI?list=PL055Epbe6d5bQubu5EWf_kUNA3ef_qbmL" target="_blank">在学习抽象之前，先了解实际的基础技术。</a>学习jQuery，先学习DOM。 学习SASS，先学习CSS。 学习JSX，先学习HTML。 学习TypeScript，先学习JavaScript。 学习Handlebars，先学习JavaScript ES6模板。 不要只光顾使用Bootstrap，学习UI模式。</p>
<p>最近出现了许多非认证的，昂贵的前端代码学校/训练营。 这些成为前端开发人员的途径通常是教师指导的课程，遵循更传统的学习方式，来自传统课程（即教学大纲，考试，测验，项目，团队项目，成绩等）。</p>
<p>如果您正在考虑昂贵的培训计划，请慎重考虑，如今是互联网时代! 任何你想要学习的东西你都可以在网络上花费很少甚至免费找到。但是，如果您需要有人告诉您如何学习和教授学习方法，并让对您的学习负责，您就应该考虑传统的讲师领导课堂。 否则，实际上我不知道有任何其他职业可以通过使用免费的互联网以及对知识的强烈渴望，甚至仅靠开通<a href="https://frontendmasters.com/join/">每月几美元的屏幕录像会员资格</a>来学习职业技能的。</p>
<p>例如，如果您想今天开始学习，可以使用以下一个或多个链接跳转资源：</p>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">开始使用Web</a> [文章]
</li>
<li>
<a href="https://www.youtube.com/watch?v=Lsg84NtJbmI" target="_blank">你想成为一个前端开发工程师</a> [视频]
</li>
<li>
<a href="https://frontendmasters.com/learn" target="_blank">前端大师学习路径</a> [收费视频]
</li>
<li>
<a href="https://frontendmasters.com/courses/web-development-v2/" target="_blank">Web开发简介</a> [收费视频]
</li>
<li>
<a href="https://teamtreehouse.com/techdegree/front-end-web-development-2" target="_blank">树形结构系统学习</a> [收费视频]
</li>
<li>
<a href="https://www.udacity.com/course/front-end-web-developer-nanodegree--nd001" target="_blank">前端Web开发人员细节深挖</a> [收费视频]
</li>
<li>
<a href="https://www.lynda.com/learning-paths/Web/become-a-front-end-web-developer" target="_blank">成为前端开发者</a> [收费视频]
</li>
<li>
<a href="https://learn.freecodecamp.org/" target="_blank">freeCodeCamp</a> [互动][视频]
</li>
</ul>
<p>在刚开始时，您可能会害怕学习过于复杂的语法框架。 事实上换个角度说学习框架 （例如 jQuery） 在一直有助于提高开发技能，有助于您夯实基础和理解底层原理。</p>
<p>假设在这个过程中，您不仅要学习代码原理，还要在学习和研究开发工具。有人建议只学习原理，有人建议只学习如何操作开发工具。 我建议您找到两者的组合，以匹配你的大脑深入理解如何工作和做到这一点。这是一个混合的学习过程！ 所以，不要只是简单地读它，做它。 学习，做。 学习，做。 事物无限重复，因为事物变化很快。 这就是为什么学习基础知识，而不是框架是如此重要。</p>
<h3>2.2 - 前端职位名称</h3>
<p><a href="https://css-tricks.com/the-great-divide/">随着前端开发多年不断发展，前端开发人员逐渐演变成两个既然不同的类型。</a>一种是专注于JavaScript的程序员，可能具有计算机科学技能和软件开发背景，他们为前端运行环境时编写JavaScript。他们很可能更抽象地看待HTML和CSS（比如 <a href="https://reactjs.org/docs/introducing-jsx.html">JSX</a> 和 <a href="https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc">CSS</a>）。另一种很可能是非计算机科班出身的开发人员，他们专注于HTML，CSS和JavaScript，因为它特别适用于UI的创造。 在2019年，当您进入或试图了解前端开发者时，您绝对会感受到这种差别或鸿沟。 前端开发人员这个术语处于无意义的边缘，因为其并没有明确说明它是哪种类型的前端开发人员。</p>
<p>以下是各种前端职称的列表和说明（想要全部记住真的<a href="https://blog.prototypr.io/dissecting-front-end-job-titles-7f72a0ef0bc5">很难</a>）。前端开发人员通用的或最常用的职称就是“前端开发人员”或“前端工程师”。请注意，任何包含单词“front-end”，“client-side”，“web UI”，“HTML”，“CSS”或“JavaScript”的职称通常都会推断出其有一定程度的HTML，CSS， DOM和JavaScript相关知识。</p>
<p><strong>前端开发者</strong>：描述在某种程度上熟悉HTML，CSS，DOM和JavaScript以及在Web平台上实现这些技术的开发人员的通用职称。</p>
<p><strong>前端工程师（又叫JS开发或全栈JS开发）</strong>：描述具有计算机科学，计算机工程背景并使用这些技能处理前端技术的开发人员的职称。 这个角色通常需要计算机科学知识和多年的软件开发经验。当“JavaScript应用程序”一词包含在职称中时，这将表示开发人员应该是具有高级编程，软件开发和应用程序开发技能的高级JavaScript开发人员（即具有多年构建前端软件应用程序经验）。</p>
<p><strong>CSS/HTML开发者</strong>：描述熟悉HTML和CSS的开发人员（不包括JavaScript和应用程序）的前端职称。</p>
<p><strong>前端网页设计师</strong>：当“设计师”一词包含在职称中时，这将表示设计师将拥有前端技能（即HTML和CSS）以及专业设计（视觉设计和交互设计）技能。</p>
<p><strong>UI （用户界面交互）开发者/工程师</strong>：当职称中包含“界面”或“UI”一词时，这将表示开发人员除了具有前端开发人员技能或前端工程技能外，还应具备交互设计技能。</p>
<p><strong>移动/平板电脑前端开发者</strong>：当职称中包含“移动”或“平板电脑”一词时，这将表示开发人员具有开发移动设备或平板电脑设备上（本机或在Web平台上，即在浏览器中）运行的前端的经验。</p>
<p><strong>前端SEO专家</strong>：当职称中包含单词“SEO”时，这将表示开发人员具有丰富的SEO策略制定前端技术经验。</p>
<p><strong>前端可访问性专家</strong>：当职称中包含“辅助功能”一词时，这将表示开发人员在制定支持可访问性要求和标准的前端技术方面拥有丰富的经验。</p>
<p><strong>前端自动化工程师</strong>：当职称中包含“DevOps”一词时，这将表示开发人员在与协作，集成，部署，自动化和质量相关的软件开发实践方面拥有丰富的经验。.</p>
<p><strong>前端测试工程师</strong>：当“测试”或“QA”一词包含在职称中时，这将表示开发人员具有丰富的测试和管理软件的经验，涉及单元测试，功能测试，用户测试和A / B测试。</p>
<div class="notes">
<p><strong>注意：</strong></p>
<ol>
<li>如果您在职称中看到“Full Stack”或通用“Web Developer”术语，雇主可能会使用这些词来描述负责Web / app开发各个方面的角色，即包含前端 （可能包括设计）和后端。</li>
</ol>
</div>
<h3>2.3 - 前端开发人员使用的基础Web技术</h3>
<p><img alt="" data-src="assets/images/web-tech-employed.jpg" title="HTML CSS and JS"></p>
<p>前端开发人员采用以下核心Web技术（建议按此顺序学习）：</p>
<ol>
<li>超文本标记语言（又名HTML）</li>
<li>层叠样式表（又称CSS）</li>
<li>统一资源定位器（又名URL）</li>
<li>超文本传输协议（又称HTTP）</li>
<li>JavaScript编程语言（又名ECMAScript 262）</li>
<li>JavaScript对象简谱（又名JSON）</li>
<li>文档对象模型（又名DOM）</li>
<li>Web API（又名HTML5相关或浏览器API）</li>
<li>网页内容可访问性指南（又名WCAG） & 可访问的富Internet应用程序（又名 ARIA）</li>
</ol>
<p>有关所有Web相关规范的完整列表，请查看<a href="https://platform.html5.org/" target="_blank">platform.html5.org</a>或<a href="https://developer.mozilla.org/en-US/docs/Web/API">MDN Web APIs</a>.</p>
<p>下面介绍定义的九种技术以及每种技术的相关文档和规范的链接。</p>
<h4 id="hyper-text-markup-language-aka-html">超文本标记语言（又名HTML）</h4>
<blockquote>
<p>超文本标记语言（通常称为HTML）是用于创建网页的标准标记语言。 Web浏览器可以读取HTML文件并将其呈现为可见或可听的网页。 HTML在语义上描述了网站的结构以及用于表示的提示，使其成为标记语言，而不是编程语言。</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/HTML" target="_blank">维基百科</a></cite></p>
</blockquote>
<p>相关的规范/文档：</p>
<ul>
<li>
<a href="http://www.w3.org/standards/techs/html#w3c_all" target="_blank">All W3C HTML Spec</a>
</li>
<li>
<a href="https://html.spec.whatwg.org/multipage" target="_blank">HTML元素</a>来自目前已制定的标准
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes" target="_blank">全局属性</a>
</li>
<li>
<a href="https://www.w3.org/TR/2017/REC-html52-20171214/" target="_blank">HTML 5.2 from W3C</a>
</li>
<li>
<a href="http://w3c.github.io/html/" target="_blank">HTML 5.3 from W3C</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes" target="_blank">HTML属性引用</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank">HTML元素引用</a>
</li>
<li>
<a href="https://html.spec.whatwg.org/multipage/syntax.html#syntax" target="_blank">HTML语法</a>来自目前已制定的标准
</li>
</ul>
<h4 id="cascading-style-sheets-aka-css">层叠样式表（又称CSS）</h4>
<blockquote>
<p>层叠样式表（CSS）是一种样式表语言，用于描述用标记语言编写的文档的外观和格式。 虽然最常用于更改用HTML和XHTML编写的网页和用户界面的样式，但该语言可以应用于任何类型的XML文档，包括纯XML，SVG和XUL。 与HTML和JavaScript一起，CSS是大多数网站使用的基础技术，用于创建具有视觉吸引力的网页，Web应用程序的用户界面以及许多移动应用程序的用户界面。</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank">维基百科</a></cite></p>
</blockquote>
<p>相关的规范/文档：</p>
<ul>
<li>
<a href="http://www.w3.org/Style/CSS/current-work" target="_blank">W3C CSS规范</a>
</li>
<li>
<a href="https://www.w3.org/TR/CSS22/" target="_blank">层叠样式表2级修订版2（CSS 2.2）规范</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference" target="_blank">CSS参考手册</a>
</li>
<li>
<a href="http://www.w3.org/TR/css3-selectors/" target="_blank">3级选择器</a>
</li>
</ul>
<h4 id="hypertext-transfer-protocol-aka-http">超文本传输协议（又称HTTP）</h4>
<blockquote>
<p>超文本传输协议（HTTP）是用于分布式协作超媒体信息系统的应用协议。 HTTP是万维网数据通信的基础。</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol" target="_blank">维基百科</a></cite></p>
</blockquote>
<p>相关的规范/文档：</p>
<ul>
<li>
<a href="https://tools.ietf.org/html/rfc2616" target="_blank">超文本传输协议 -- HTTP/1.1</a>
</li>
<li>
<a href="http://httpwg.org/specs/rfc7540.html" target="_blank">HTTP/2</a>
</li>
</ul>
<h4 id="uniform-resource-locators-aka-url">统一资源定位器（又名URL）</h4>
<blockquote>
<p>统一资源定位符（URL）（也称为Web地址）是对资源的引用，该资源指定计算机网络上资源的位置以及用于检索它的机制。 URL是特定类型的统一资源标识符（URI），尽管许多人可以互换地使用这两个术语。 URL表示访问指示资源的方法，而不是每个URI都是如此。 URL最常用于引用网页（http），但也用于文件传输（ftp），电子邮件（mailto），数据库访问（JDBC）和许多其他应用程序。</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Uniform_Resource_Locator" target="_blank">维基百科</a></cite></p>
</blockquote>
<p>相关的规范/文档：</p>
<ul>
<li>
<a href="http://www.w3.org/Addressing/URL/url-spec.txt" target="_blank">统一资源定位器（URL）</a>
</li>
<li>
<a href="https://url.spec.whatwg.org/" target="_blank">URL标准</a>
</li>
</ul>
<h4 id="document-object-model-aka-dom">文档对象模型（又名DOM）</h4>
<blockquote>
<p>文档对象模型（DOM）是一种跨平台且与语言无关的约定，用于表示HTML，XHTML和XML文档中的对象并与之交互。 每个文档的节点都以树结构组织，称为DOM树。 可以通过使用对象上的方法来寻址和操纵DOM树中的对象。 DOM的公共接口在其应用程序编程接口（API）中指定。</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Document_Object_Model" target="_blank">维基百科</a></cite></p>
</blockquote>
<p>相关的规范/文档：</p>
<ul>
<li>
<a href="https://dom.spec.whatwg.org/" target="_blank">DOM标准</a>
</li>
<li>
<a href="https://www.w3.org/TR/domcore/" target="_blank">W3C DOM4</a>
</li>
<li>
<a href="https://www.w3.org/TR/uievents/" target="_blank">UI事件</a>
</li>
</ul>
<h4 id="javascript-programming-language-aka-ecmascript-262">JavaScript编程语言（又名ECMAScript 262）</h4>
<blockquote>
<p>JavaScript是一种高级，动态，无类型和解释的编程语言。 它已在ECMAScript语言规范中标准化。 除HTML和CSS外，它还是万维网内容制作的三大基本技术之一; 大多数网站都使用它，所有没有插件的现代网络浏览器都支持它。 JavaScript是基于原型的第一类函数，使其成为一种多范式语言，支持面向对象，命令式和函数式编程风格。 它具有用于处理文本，数组，日期和正则表达式的API，但不包括任何I / O，例如网络，存储或图形工具，在嵌入它的主机环境中依赖它们。</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">维基百科</a></cite></p>
</blockquote>
<p>相关的规范/文档：</p>
<ul>
<li>
<a href="http://ecma-international.org/ecma-262/9.0/index.html#Title" target="_blank">ECMAScript®2018语言规范</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources" target="_blank">ECMAScript语言规范</a>
</li>
</ul>
<h4 id="web-apis-aka-html5-and-friends">Web API（又名HTML5相关或浏览器API）</h4>
<blockquote>
<p>使用JavaScript编写Web代码时，可用的API很多。 下面是您在开发Web应用程序或站点时可以使用的所有接口（即对象类型）的列表。</p>
<p><cite>— <a href="https://developer.mozilla.org/en-US/docs/Web/API" target="_blank">Mozilla</a></cite></p>
</blockquote>
<p>相关的规范/文档：</p>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/API" target="_blank">Web API接口</a>
</li>
</ul>
<h4 id="javascript-object-notation-aka-json">JavaScript对象简谱（又名JSON）</h4>
<blockquote>
<p>它是用于异步浏览器/服务器通信（AJAJ）的主要数据格式，主要取代XML（由AJAX使用）。 虽然JSON最初源自JavaScript脚本语言，但它是一种与语言无关的数据格式。 许多编程语言都可以使用用于解析和生成JSON数据的代码。 JSON格式最初由Douglas Crockford指定。 目前，它由两个竞争标准RFC 7159和ECMA-404描述。 ECMA标准是最小的，仅描述允许的语法，而RFC也提供了一些语义和安全性考虑因素。 JSON的官方Internet媒体类型是application / json。 JSON文件扩展名为.json。</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/JSON" target="_blank">维基百科</a></cite></p>
</blockquote>
<p>相关的规范/文档：</p>
<ul>
<li>
<a href="http://json.org/" target="_blank">介绍JSON</a>
</li>
<li>
<a href="http://jsonapi.org/" target="_blank">JSON API</a>
</li>
<li>
<a href="http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf" target="_blank">JSON数据交换格式</a>
</li>
</ul>
<h4 id="web-content-accessibility-guidelines-aka-wcag--accessible-rich-internet-applications-aka-aria">网页内容可访问性指南（又名WCAG） & 可访问的富Internet应用程序（又名 ARIA）</h4>
<blockquote>
<p>可访问性是指为残疾人设计的产品，设备，服务或环境。 可访问设计的概念确保“直接访问”（即，无辅助）和“间接访问”意味着与人的辅助技术（例如，计算机屏幕阅读器）的兼容性。</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Accessibility" target="_blank">维基百科</a></cite></p>
</blockquote>
<ul>
<li>
<a href="https://www.w3.org/WAI/standards-guidelines/" target="_blank">网络无障碍倡议（WAI）</a>
</li>
<li>
<a href="http://www.w3.org/standards/techs/wcag#w3c_all" target="_blank">Web内容可访问性指南（WCAG）当前状态</a>
</li>
</ul>
<h3>2.4 - 潜在的前端开发人员技能</h3>
<p><img alt="" data-src="assets/images/front-end-skills.png" title="http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html"></p>
<p><cite>图片来源：<a href="http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html" target="_blank">http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html</a></cite></p>
<p>对于任何类型的专业前端开发人员角色，都应该对HTML，CSS，DOM，JavaScript，HTTP / URL和Web浏览器有基本到高级的理解。</p>
<p>除了上面提到的技能之外，前端开发人员也应该具备以下一项或多项技能：</p>
<ul>
<li>内容管理系统（又叫CMS）</li>
<li>Node.js</li>
<li>跨浏览器兼容测试</li>
<li>跨平台兼容测试</li>
<li>单元测试</li>
<li>跨设备兼容测试</li>
<li>辅助功能/ WAI-ARIA</li>
<li>搜索引擎优化（又名SEO）</li>
<li>交互或用户界面设计</li>
<li>用户体验</li>
<li>可用性</li>
<li>电子商务系统</li>
<li>门户系统</li>
<li>线框图（低保真度的设计原型）</li>
<li>CSS布局/网格</li>
<li>DOM操作（例如，jQuery）</li>
<li>移动网络性能</li>
<li>负载测试</li>
<li>性能测试</li>
<li>渐进式增强/优雅降级</li>
<li>版本控制（比如Git）</li>
<li>MVC / MVVM / MV*</li>
<li>函数式编程</li>
<li>数据格式（例如，JSON，XML）</li>
<li>数据API（例如Restful API）</li>
<li>Web字体嵌入</li>
<li>Web字体可缩放矢量图形（又名SVG）</li>
<li>常用表达式</li>
<li>微数据/微格式</li>
<li>任务运行器，构建工具，过程自动化工具</li>
<li>响应式网页设计</li>
<li>面向对象的编程语言</li>
<li>应用架构</li>
<li>模块</li>
<li>依赖管理</li>
<li>包管理</li>
<li>JavaScript动画</li>
<li>CSS动画</li>
<li>图表</li>
<li>UI组件</li>
<li>代码质量测试</li>
<li>代码覆盖测试</li>
<li>代码复杂度分析</li>
<li>集成测试</li>
<li>命令行/ CLI</li>
<li>模板策略</li>
<li>模板引擎</li>
<li>单页应用程序</li>
<li>Web /浏览器安全性</li>
<li>浏览器开发者工具</li>
</ul>
<h3>2.5 - 前端开发人员开发平台</h3>
<p>前端开发人员制作HTML，CSS和JS，它们通常在以下操作系统之一（也称为OS）的<a href="http://tess.oconnor.cx/2009/05/what-the-web-platform-is" target="_blank">Web平台</a>（例如Web浏览器）上运行：</p>
<ul>
<li>
<a href="https://www.android.com/">安卓</a>
</li>
<li>
<a href="https://www.chromium.org/chromium-os">谷歌浏览器</a>
</li>
<li>
<a href="https://developer.apple.com/ios/">iOS</a>
</li>
<li>
<a href="https://www.apple.com/macos">OS X （比如 MacOS）</a>
</li>
<li>
<a href="https://www.ubuntu.com/">Ubuntu （或其他Linux系统）</a>
</li>
<li>
<a href="https://www.microsoft.com/en-us/windows">Windows</a>
</li>
</ul>
<p>这些操作系统通常在以下一个或多个设备上运行：</p>
<ul>
<li>台式电脑</li>
<li>笔记本电脑/上网本电脑</li>
<li>移动手机</li>
<li>平板电脑</li>
<li>电视</li>
<li>手表</li>
<li>
<a href="https://en.wikipedia.org/wiki/Internet_of_things" target="_blank">其他事物</a>（即你能想象的任何东西，汽车，冰箱，灯，恒温器等）
</li>
</ul>
<p><img alt="" data-src="assets/images/growth-iot.jpg" title="https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/"></p>
<p><cite>图片来源：<a href="https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/" target="_blank">https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/</a></cite></p>
<p>通常来说，前端技术可以使用以下Web平台方案在上述操作系统和设备上运行：</p>
<ul>
<li>网页浏览器（比如：<a href="http://outdatedbrowser.com/en" target="_blank">谷歌， IE， Safari， 火狐</a>）。
</li>
<li><a href="https://en.wikipedia.org/wiki/Headless_browser" target="_blank">无头浏览器</a>（比如：<a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md" target="_blank">谷歌无头浏览器/Puppeteer </a>）。
</li>
<li><a href="http://developer.telerik.com/featured/what-is-a-webview/" target="_blank">WebView</a>/浏览器选项卡（比如<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe">iframe</a>）嵌入在本机应用程序中作为运行时，具有到本机API的桥接。 WebView应用程序通常包含由Web技术构建的UI（即HTML，CSS和JS）。（例子：<a href="https://cordova.apache.org/" target="_blank">Apache Cordova</a>， <a href="http://nwjs.io/" target="_blank">NW.js</a>， <a href="http://electron.atom.io/" target="_blank">Electron</a>）。
</li>
<li>从Web技术构建的本机应用程序，在运行时通过与本机API的桥接进行通讯。 UI将使用本机UI部件（例如iOS本机控件）而不是web技术。 （示例：<a href="https://www.nativescript.org/" target="_blank">NativeScript</a>， <a href="https://facebook.github.io/react-native/" target="_blank">React Native</a>）。
</li>
</ul>
<h3>2.6 - 前端团队</h3>
<p>前端开发人员通常只是团队中的一个人，他们设计和开发Web技术运行的网站，Web应用程序或本机应用程序。</p>
<p>用于为Web平台构建<strong>专业</strong>网站或软件的简单开发团队通常最低限度地包含以下角色。</p>
<ul>
<li>可视设计师（设计字体，颜色，间距，情感，视觉概念和主题）</li>
<li>UI/交互设计师/信息架构师（绘制线框图，指定所有用户交互和UI功能，构建信息）</li>
<li>前端开发人员（开发在客户端/设备上运行的代码）</li>
<li>后端开发人员（编写在服务器上运行的代码）</li>
</ul>
<p>角色根据重叠技能排序。前端开发人员通常可以很好地处理UI/交互设计以及后端开发。团队成员身兼数职的情况并不少见。</p>
<p>假设上述团队由项目负责人或某种产品所有者（即利益相关者，项目经理，项目负责人等）指导。</p>
<p>较大的Web团队可能包含以下角色：</p>
<ul>
<li>SEO策略师</li>
<li>自动化工程师</li>
<li>性能工程师</li>
<li>API开发人员</li>
<li>数据库管理员</li>
<li>QA工程师/测试人员</li>
</ul>
<h3>2.7 - 全栈工程师</h3>
<p><img alt="Full Stack Developer" data-src="assets/images/full-stack.jpg"></p>
<p>术语“全栈”开发人员已经具有多种含义。当使用该术语没有一个含义是明确时,只需考虑下面两个调查的结果。这些结果可能使人们相信成为一个全栈开发者是常见的。但是，根据我近20年的经验显示，这通常不是专业背景下会发生的情况。</p>
<p><img alt="" data-src="assets/images/fullstack1.png" title="https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz"></p>
<p><cite>图片来源：<a href="https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz" target="_blank">https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz</a></cite></p>
<p><img alt="" data-src="assets/images/fullstack2.png" title="https://insights.stackoverflow.com/survey/2017#developer-profile-specific-developer-types"></p>
<p><cite>图片来源：<a href="https://insights.stackoverflow.com/survey/2018/#developer-profile" target="_blank">https://insights.stackoverflow.com/survey/2017#developer-profile-specific-developer-types</a></cite></p>
<p>设计和开发网站或Web应用程序的角色需要在视觉设计，UI /交互设计，<a href="https://github.com/kamranahmedse/developer-roadmap#-front-end-roadmap" target="_blank">前端开发</a>和<a href="https://github.com/kamranahmedse/developer-roadmap#-back-end-roadmap" target="_blank">后端开发</a>领域拥有深厚的技能和丰富经验。任何能够在专业水平上填补这4个角色中的一个或多个角色的人都是极其罕见的人才。</p>
<p>实际上，你应该寻求聘请单个角色的专家（即视觉设计，交互设计/ IA，前端开发，后端开发）。 毕竟声称在一个或多个角色中拥有专家级别技能的人非常罕见。</p>
<p>然而，鉴于JavaScript技术堆栈已经发展到前后端（即Node.js），找到一个可以编写前端和后端代码的全栈JS开发人员变得不那么困难了。通常这些全栈开发人员只处理JavaScript。找到可以同时编写前端（不包括视觉设计，交互设计和CSS），后端，API和数据库代码的开发人员不再像以前那样不可思议，这种情况在我看来仍然是很难出现的，但并不像以前那样罕见。因此，我不建议开发人员着手成为“全栈”开发人员。在极少数情况下，它可以带来优势。但是，一般在前端开发人员职业生涯的概念里，我选择专注于前端技术。</p>
<h3>2.8 - 前端面试</h3>
<h4 id="preparing">准备：</h4>
<ul>
<li>
<a href="http://davidshariff.com/blog/preparing-for-a-front-end-web-development-interview-in-2017/" target="_blank">2017年的前端Web开发面试准备</a>
</li>
<li>
<a href="https://medium.freecodecamp.com/cracking-the-front-end-interview-9a34cd46237" target="_blank">突破前端面试</a>
</li>
<li>
<a href="https://github.com/yangshun/front-end-interview-handbook" target="_blank">前端面试手册</a>
</li>
<li>
<a href="https://dev.to/emmawedekind/decoding-the-front-end-interview-process-14dl" target="_blank">解码前端面试流程</a>
</li>
</ul>
<h4>测验：</h4>
<ul>
<li>
<a href="http://davidshariff.com/quiz/" target="_blank">前端Web开发测验</a>
</li>
<li>
<a href="http://davidshariff.com/js-quiz/" target="_blank">JavaScript Web测验</a>
</li>
</ul>
<h4 id="questions-you-may-get-asked">您可能会被问到的问题：</h4>
<ul>
<li>
<a href="https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95" target="_blank">每个JavaScript开发人员应该知道的10个面试问题</a>
</li>
<li>
<a href="http://h5bp.github.io/Front-end-Developer-Interview-Questions/" target="_blank">前端工作面试问题</a>
</li>
<li>
<a href="http://davidshariff.com/quiz/" target="_blank">前端Web开发测验</a>
</li>
<li>
<a href="http://thatjsdude.com/interview/index.html" target="_blank">面向前端开发人员的面试问题</a>
</li>
<li>
<a href="https://performancejs.com/post/hde6d32/The-Best-Frontend-JavaScript-Interview-Questions-(Written-by-a-Frontend-Engineer" target="_blank">最佳前端JavaScript面试问题（由前端工程师编写）</a>)
</li>
</ul>
<h4 id="questions-you-ask">您问的问题：</h4>
<ul>
<li>
<a href="https://github.com/ChiperSoft/InterviewThis" target="_blank">有关开发的开源列表，可以询问未来的雇主</a>
</li>
</ul>
<h3>2.9 - 前端工作展示板</h3>
<p>存在大量技术职位列表网点。 下面缩小的列表是目前寻找特定前端职位/职业的最相关资源。</p>
<ul>
<li>
<a href="https://authenticjobs.com/#category=4" target="_blank">authenticjobs.com</a>
</li>
<li>
<a href="http://careers.stackoverflow.com/jobs?searchTerm=front-end" target="_blank">careers.stackoverflow.com</a>
</li>
<li>
<a href="https://css-tricks.com/jobs/" target="_blank">css-tricks.com/jobs</a>
</li>
<li>
<a href="http://frontenddeveloperjob.com/" target="_blank">frontenddeveloperjob.com</a>
</li>
<li>
<a href="http://www.glassdoor.com/Job/front-end-developer-jobs-SRCH_KO0,19.htm?jobType=all" target="_blank">glassdoor.com</a>
</li>
<li>
<a href="https://jobs.github.com/" target="_blank">jobs.github.com</a>
</li>
<li>
<a href="https://www.linkedin.com/jobs/search/?keywords=frontend%20developer" target="_blank">linkedin.com</a>
</li>
<li>
<a href="https://remote.co/remote-jobs/developer/" target="_blank">remote.co</a>
</li>
<li>
<a href="https://weworkremotely.com/" target="_blank">weworkremotely.com</a>
</li>
<li>
<a href="https://www.smashingmagazine.com/jobs/" target="_blank">www.smashingmagazine.com/jobs/</a>
</li>
</ul>
<div class="notes">
<p><strong>注意：</strong></p>
<ol>
<li><a href="https://github.com/jessicard/remote-jobs" target="_blank">这些公司</a>支持前端开发人员远程办公。
</li>
</ol>
</div>
<h3>2.10 - 前端工资</h3>
<p>美国对于中级前端开发商的全国平均水平介于<a href="https://www.payscale.com/research/US/Job=Front_End_Developer_%2f_Engineer/Salary">6.5万美元</a>到<a href="https://www.indeed.com/salaries/Front-End-Developer-Salaries" target="_blank">10万美元</a>之间。</p>
<p>当然，当你第一次起步进入40k左右的区间时取决于职位和经验。</p>
<div class="notes">
<p><strong>注意:</strong></p>
<ol>
<li>前端专家/高级前端开发人员/工程师可以在任何他们想要的地方生活（即远程工作）并且年薪超过15万美元（访问<a href="https://angel.co/jobs" target="_blank">angel.co</a>，注册，查找超过15万美元的前端工作或在<a href="https://stackoverflow.com/jobs?q=front-end&sort=y" target="_blank">Stack Overflow Jobs</a>查找工资范围）。
</li>
</ol>
</div>
</div>
<div class="chapter" id="chapter3">
<h2>章节 3. 学习前端开发：自学资源/建议</h2>
<section class="sub">
<p>本章重点介绍了个人可以用来指导自己学习和如何成为前端开发人员的许多资源（视频培训，书籍等）。</p>
<p>所识别的学习资源（文章，书籍，视频，截屏视频等）将包括免费和付费资料。 付费材料将以[付费]表示。</p>
</section>
<h3>3.1. - 学习互联网/网络</h3>
<blockquote>
<p>互联网是一个互联计算机网络的全球系统，它使用互联网协议（TCP / IP）连接全球数十亿台设备。 它是一个由数百万个本地到全球范围的私人，公共，学术，商业和政府网络组成的网络网络，通过广泛的电子，无线和光纤网络技术相互连接。 因特网承载广泛的信息资源和服务，例如互联超文本文档和万维网（WWW）的应用，电子邮件，电话和用于文件共享的对等网络。</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Internet" target="_blank">维基百科</a></cite></p>
</blockquote>
<p>
<a href="assets/images/how-the-internet-works.jpg">
<img alt="How the internet works" data-src="assets/images/how-the-internet-works.jpg" title="https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/">
</a>
</p>
<p><cite>图片来源：<a href="https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/" target="_blank">https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/</a></cite></p>
<ul>
<li>
<a href="https://www.youtube.com/watch?v=Dxcc6ycZ73M" target="_blank">什么是互联网？</a> [视频]
</li>
<li>
<a href="http://internetfundamentals.com" target="_blank">互联网基础</a> [视频]
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works" target="_blank">网络如何运作</a> [文章]
</li>
<li>互联网如何运作？<a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work" target="_blank">https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work</a> and <a href="http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm" target="_blank">http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm</a> [文章]
</li>
<li>
<a href="https://www.khanacademy.org/partner-content/code-org/internet-works" target="_blank">互联网工作原理</a> [视频]
</li>
<li>
<a href="https://www.youtube.com/watch?v=7_LPdttKXPc" target="_blank">5分钟内学完互联网如何工作</a> [视频]
</li>
<li>
<a href="https://www.eventedmind.com/classes/how-the-web-works-7f40254c" target="_blank">网络工作原理</a> [视频]
</li>
<li>
<a href="http://www.20thingsilearned.com/en-US/what-is-the-internet/1" target="_blank">什么是互联网？ 或许是“你说番茄，我说TCP/IP”</a> [文章]
</li>
<li>
<a href="http://www.dontfeartheinternet.com/" target="_blank">不要害怕互联网</a>
</li>
</ul>
<p><img alt="" data-src="assets/images/who-runs-the-internet-infographic.jpg" title="http://www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/"></p>
<p><cite>图片来源：<a href="http://www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/" target="_blank">http://www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/</a></cite></p>
<h3>3.2. - 学习Web浏览器</h3>
<blockquote>
<p>Web浏览器（通常称为浏览器）是用于在万维网上检索，呈现和遍历信息资源的软件应用程序。 信息资源由统一资源标识符（URI / URL）标识，并且可以是网页，图像，视频或其他内容。 资源中存在的超链接使用户能够轻松地将其浏览器导航到相关资源。 虽然浏览器主要用于万维网，但它们也可用于访问私有网络中的Web服务器或文件系统中的文件提供的信息。</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Web_browser" target="_blank">维基百科</a></cite></p>
</blockquote>
<h4 id="the-most-commonly-used-browsers-on-any-device-are">最<a href="https://netmarketshare.com/?options=%7B%22filter%22%3A%7B%22%24and%22%3A%5B%7B%22deviceType%22%3A%7B%22%24in%22%3A%5B%22Desktop%2Flaptop%22%2C%22Mobile%22%5D%7D%7D%5D%7D%2C%22dateLabel%22%3A%22Trend%22%2C%22attributes%22%3A%22share%22%2C%22group%22%3A%22browser%22%2C%22sort%22%3A%7B%22share%22%3A-1%7D%2C%22id%22%3A%22browsersDesktop%22%2C%22dateInterval%22%3A%22Monthly%22%2C%22dateStart%22%3A%222018-01%22%2C%22dateEnd%22%3A%222018-12%22%2C%22segments%22%3A%22-1000%22%7D" target="_blank">常用的浏览器</a>（在桌面和移动设备上）是：</h4>
<ol>
<li>
<a href="http://www.google.com/chrome/" target="_blank">谷歌浏览器Chrome</a>（内核引擎：<a href="https://en.wikipedia.org/wiki/Blink_%28layout_engine%29" target="_blank">Blink</a> + <a href="https://en.wikipedia.org/wiki/V8_%28JavaScript_engine%29" target="_blank">V8</a>）
</li>
<li>
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">火狐浏览器Firefox</a> （内核引擎：<a href="https://en.wikipedia.org/wiki/Gecko_%28software%29" target="_blank">Gecko</a> + <a href="https://en.wikipedia.org/wiki/SpiderMonkey_%28software%29" target="_blank">SpiderMonkey</a>）
</li>
<li>
<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" target="_blank">Internet Explorer即IE</a>（内核引擎：<a href="https://en.wikipedia.org/wiki/Trident_%28layout_engine%29" target="_blank">Trident</a> + <a href="https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29" target="_blank">Chakra</a>）
</li>
<li>
<a href="https://www.apple.com/safari/" target="_blank">Safari</a>（内核引擎：<a href="https://en.wikipedia.org/wiki/WebKit" target="_blank">Webkit</a> + <a href="https://trac.webkit.org/wiki/SquirrelFish" target="_blank">SquirrelFish</a>）
</li>
</ol>
<p><img alt="" data-src="assets/images/statcounter.png" title="http://gs.statcounter.com/browser-market-share"></p>
<p><cite>图片来源：<a href="http://gs.statcounter.com/browser-market-share" target="_blank">http://gs.statcounter.com/browser-market-share</a></cite></p>
<h4 id="evolution-of-browsers--web-technologies-ie-apis">浏览器和Web技术（比如API）的演变</h4>
<ul>
<li>
<a href="http://www.evolutionoftheweb.com/" target="_blank">evolutionoftheweb.com</a> [文章]
</li>
<li>
<a href="https://en.wikipedia.org/wiki/Timeline_of_web_browsers" target="_blank">Web浏览器的发展史</a> [文章]
</li>
</ul>
<h4 id="the-most-commonly-used-headless-browser-are">最常用的<a href="http://www.asad.pw/HeadlessBrowsers/" target="_blank">无头浏览器</a>是：</h4>
<ul>
<li>
<a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md" target="_blank">谷歌无头浏览器</a> （内核引擎：<a href="https://www.chromium.org/blink" target="_blank">Blink</a> + V8）
</li>
<li>
<a href="http://slimerjs.org/" target="_blank">SlimerJS</a>（内核引擎：<a href="https://en.wikipedia.org/wiki/Gecko_%28software%29" target="_blank">Gecko</a> + <a href="https://en.wikipedia.org/wiki/SpiderMonkey_%28software%29" target="_blank">SpiderMonkey</a>）
</li>
</ul>
<h4 id="how-browsers-work">浏览器如何工作</h4>
<ul>
<li>
<a href="http://www.20thingsilearned.com/en-US/foreword/1" target="_blank">我学到的关于浏览器和Web的20件事</a> [文章]
</li>
<li>
<a href="http://dbaron.org/talks/2012-03-11-sxsw/master.xhtml" target="_blank">速学CSS：浏览器如何布局网页</a> [文章]
</li>
<li>
<a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/" target="_blank">浏览器的工作原理：现代Web浏览器的幕后故事</a> [文章]
</li>
<li>
<a href="https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/" target="_blank">Quantum即将到来：浏览器引擎是什么？</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=SmE4OwHztCc" target="_blank">浏览器如何实际渲染网站</a> [视频]
</li>
<li>
<a href="https://gist.github.com/paulirish/5d52fb081b3570c81e3a" target="_blank">什么造成重绘/回流</a> [文章]
</li>
<li>
<a href="http://frontendbabel.info/articles/webpage-rendering-101/" target="_blank">每个前端开发人员应该知道的关于网页渲染的内容</a> [文章]
</li>
</ul>
<h4 id="optimizing-for-browsers">浏览器优化：</h4>
<ul>
<li>
<a href="https://www.udacity.com/course/browser-rendering-optimization--ud860" target="_blank">浏览器渲染优化</a> [视频]
</li>
<li>
<a href="https://www.udacity.com/course/website-performance-optimization--ud884" target="_blank">网站性能优化</a> [视频]
</li>
</ul>
<h4 id="comparing-browsers">浏览器比较</h4>
<ul>
<li>
<a href="https://en.wikipedia.org/wiki/Comparison_of_web_browsers" target="_blank">Web浏览器的优劣</a> [视频]
</li>
</ul>
<h4>浏览器黑客</h4>
<ul>
<li>
<a href="http://browserhacks.com/" target="_blank">browserhacks.com</a> [文章]
</li>
</ul>
<h4 id="developing-for-browsers">浏览器开发</h4>
<p>过去，前端开发人员花了很多时间在几个不同的浏览器中开发代码。这曾经是一个很大的问题相较于今时今日，今天，框架工具（例如，React，Webpack，Post-CSS，Babel等......）与现代浏览器相结合，使浏览器开发变得相当容易。新的挑战不是用户将使用哪种浏览器，而是他们将在哪个设备上运行浏览器。</p>
<h4 id="evergreen-browsers">常青浏览器-浏览器的最新版本</h4>
<p>大多数现代浏览器的最新版本被认为是常青浏览器。也就是说理论上，它们应该在不提示用户的情况下自动地进行更新。这种向自我更新浏览器的转变是应对不自动更新的旧浏览器的一种缓慢消除过程。</p>
<h4 id="picking-a-browser-1">选择一种浏览器</h4>
<p>截至今天，大多数前端开发人员使用Chrome和“Chrome Dev Tools”来开发前端代码。由此最常用的现代浏览器都提供了一种开发人员工具。挑选一个用于开发是一个主观的选择。更重要的问题是您必须哪些设备支持哪些浏览器，然后进行适当的测试。</p>
<h3 id="learn-domain-name-system-aka-dns">3.3 - 学习域名系统（又名DNS）</h3>
<blockquote>
<p>域名系统（DNS）是用于计算机，服务或连接到因特网或专用网络的任何资源的分层分布式命名系统。 它将各种信息与分配给每个参与实体的域名相关联。 最突出的是，它将人们可以轻易记忆的域名转换为全球计算机服务和设备所需的数字IP地址。 域名系统是大多数互联网服务功能的重要组成部分，因为它是互联网的主要目录服务。</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Domain_Name_System" target="_blank">维基百科</a></cite></p>
</blockquote>
<p><img alt="" data-src="assets/images/how_dns_works.jpg" title="http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg"></p>
<p><cite>图片来源：<a href="http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg" target="_blank">http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg</a></cite></p>
<ul>
<li>
<a href="https://www.digitalocean.com/community/tutorials/an-introduction-to-dns-terminology-components-and-concepts" target="_blank">DNS术语，组件和概念简介</a> [文章]
</li>
<li>
<a href="https://www.youtube.com/watch?v=72snZctFFtA" target="_blank">DNS解析</a> [视频]
</li>
<li>
<a href="https://howdns.works/ep1/" target="_blank">DNS工作原理</a> [文章]
</li>
<li>
<a href="https://www.youtube.com/watch?v=5o8CwafCxnU&index=3&list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7" target="_blank">互联网：IP地址和DNS</a> [视频]
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name" target="_blank">什么是域名？</a> [文章]
</li>
</ul>
<h3 id="learn-httpnetworks-including-cors--websockets">3.4 - 学习HTTP /网络（包括CORS和WebSockets）</h3>
<blockquote>
<p><strong>HTTP</strong> - 超文本传输协议（HTTP）是用于分布式协作超媒体信息系统的应用协议。 HTTP是万维网数据通信的基础。</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol" target="_blank">维基百科</a></cite></p>
</blockquote>
<h4 id="http-specifications">HTTP规范</h4>
<ul>
<li>
<a href="https://http2.github.io/" target="_blank">HTTP/2</a>
</li>
<li>
<a href="https://tools.ietf.org/html/rfc2616" target="_blank">超文本传输协议 -- HTTP/1.1</a>
</li>
</ul>
<h4 id="http-docs">HTTP文档</h4>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP" target="_blank">MDN HTTP</a> [文章]
</li>
</ul>
<h4 id="http-videosarticlestutorials">HTTP视频/文章/教程</h4>
<ul>
<li>
<a href="http://chimera.labs.oreilly.com/books/1230000000545/index.html" target="_blank">高性能浏览器网络：每个Web开发人员应该了解的关于网络和Web性能的内容</a> [文章]
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview" target="_blank">MDN: HTTP概述</a> [文章]
</li>
<li>
<a href="https://www.amazon.com/HTTP-Definitive-Guide-Guides/dp/1565925092/ref=cm_cr_arp_d_product_top?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=11b990b79d33ddbef63712765715a9c1&camp=1789&creative=9325" target="_blank">HTTP权威指南</a> [文章][付费]
</li>
<li>
<a href="https://http2.github.io/faq/#what-are-the-key-differences-to-http1x" target="_blank">HTTP/2 常见问题</a> [文章]
</li>
<li>
<a href="http://www.pluralsight.com/courses/xhttp-fund" target="_blank">HTTP基础</a> [视频][付费]
</li>
<li>
<a href="https://app.pluralsight.com/library/courses/http2-fundamentals/table-of-contents" target="_blank">HTTP/2基础</a> [视频][付费]
</li>
<li>
<a href="http://code.tutsplus.com/tutorials/http-the-protocol-every-web-developer-must-know-part-1--net-31177" target="_blank">HTTP: 每个Web开发人员必须知道的协议 - 第1部分</a> [文章]
</li>
<li>
<a href="http://code.tutsplus.com/tutorials/http-the-protocol-every-web-developer-must-know-part-2--net-31155" target="_blank">HTTP: 每个Web开发人员必须知道的协议 - 第2部分</a> [文章]
</li>
<li>
<a href="http://code.tutsplus.com/series/http-succinctly--net-33683" target="_blank">简洁的HTTP</a> [文章]
</li>
</ul>
<h4 id="http-status-codes">HTTP状态码</h4>
<ul>
<li>
<a href="https://httpstatuses.com/" target="_blank">HTTP状态码</a>
</li>
<li>
<a href="http://webdesign.tutsplus.com/tutorials/http-status-codes-in-60-seconds--cms-24317" target="_blank">一分钟学完HTTP状态代码</a> [视频]
</li>
</ul>
<blockquote>
<p><strong>CORS</strong> - 跨源资源共享（CORS）是允许从源自资源的域之外的另一域请求网页上的受限资源（例如，字体）的机制。</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing" target="_blank">维基百科</a></cite></p>
</blockquote>
<h4 id="cors-specifications">CORS规范</h4>
<ul>
<li>
<a href="https://www.w3.org/TR/cors/" target="_blank">跨源资源共享</a>
</li>
</ul>
<h4 id="cors">CORS</h4>
<ul>
<li>
<a href="https://www.amazon.com/CORS-Action-Creating-consuming-cross-origin/dp/161729182X/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=47ebd885d688a4ed69f77a1bd8273f8a&camp=1789&creative=9325" target="_blank">CORS如何运行</a> [文章][付费]
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS" target="_blank">HTTP访问控制（CORS）</a> [文章]
</li>
</ul>
<blockquote>
<p><strong>WebSockets</strong> - WebSocket是一种通过单个TCP连接提供全双工通信信道的协议。 WebSocket协议在2011年由IETF标准化为RFC 6455，Web IDL中的WebSocket API由W3C标准化。</p>
<p><cite>— <a href="https://en.wikipedia.org/wiki/WebSocket" target="_blank">维基百科</a></cite></p>
</blockquote>
<h4>WebSockets</h4>
<ul>
<li>
<a href="https://code.tutsplus.com/courses/connect-the-web-with-websockets" target="_blank">使用WebSockets连接Web</a> [视频]
</li>
<li>
<a href="https://www.amazon.com/WebSocket-Client-Server-Communications-Andrew-Lombardi/dp/1449369278/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=dd39395cf3d2ab4fc7c820d7c19db39a&camp=1789&creative=9325" target="_blank">WebSocket：轻量级客户端 - 服务器通信</a> [文章][付费]
</li>
<li>
<a href="https://tools.ietf.org/html/rfc6455" target="_blank">WebSocket协议</a> [文章]
</li>
</ul>