mod

2025-10-20 17:03:47 +08:00 · 2024-07-11 05:50:32 +00:00
parent bf99793fd0
commit d3828a7aee
6071 changed files with 0 additions and 0 deletions
--- a/极客时间专栏/重学前端/特别加餐/免费学习
+++ b/极客时间专栏/重学前端/特别加餐/免费学习
@@ -0,0 +1,30 @@
+
+你好，我是极客时间《重学前端》专栏的编辑。在我参与制作整个课程的过程中，总是会看到有用户问，为什么老师不讲讲Vue、React这样的框架？这可是热点知识。其实winter老师早就在直播里解释过，他认为好的前端工程师，没必要花太多时间在框架的使用上，转而应该研究下框架背后的设计思想。就像阿里前端技术委员会主席圆心老师在GMTC大会上分享的观点一样，“框架一定是基于某个理念解决了一个被大家诟病已久的问题”。
+
+<img src="https://static001.geekbang.org/resource/image/00/e8/00ac8743d0d0ca7f9c6f29fef96f33e8.png" alt="" title="框架和设计模式">
+
+在你学完了《重学前端》专栏，建立了前端的知识体系后，我们希望能更进一步，带你消化理解专栏中的那些基础知识点。这一次，我们和winter老师一起研发了一个新的训练营（《重学前端》专栏用户的免费福利），希望用 7 天的时间，手把手带你实现一个极简的 React 框架：ToyReact。
+
+当然，我们的思路还和之前一样，不讲用法，不讲那些框架既定的规则，转而希望能帮你用“造轮子”的方式进一步理解框架的实现原理。我们也知道，这个课程不简单，所以为了能够保证你学会、学懂，我们还额外增加了学习服务：
+
+1. 助教随时答疑：在学习过程中，遇到问题可以随时向助教提问；
+1. 高效社群连接：配备专属班主任全程带班，打造高效学习社群，收获学习伙伴；
+1. 实战作业练习：除了听课，还会有实战作业来检验自己的学习成果；
+1. 配套源码解析：winter 老师会提供课程源码，供你学习参考。
+
+整个的7天训练营，学完之后，你将会有如下收获：
+
+- 了解一个 ToyReact 框架搭建的全过程
+- 掌握 React 框架背后的原理及实现方式
+- 掌握 React 中的组件化思想
+- 亲自实现一个 ToyReact 框架
+
+具体的课程大纲如下：
+
+<img src="https://static001.geekbang.org/resource/image/8c/2f/8c9d367fb07d9d3cc29953d4cf761c2f.png" alt="" title="7天训练营大纲">
+
+作为《重学前端》专栏的用户福利，如果你已经拿到了毕业证书，那**以上所有的课程和学习服务对于你都是免费的，但需要你花时间**（这一点很重要）。感兴趣的话，你可以直接添加班主任的微信申请这次公开课活动，添加后留下你的极客时间账号即可，我们会自动给你绑定课程。当然，如果你还没学完专栏，那还是先花点时间学专栏吧。
+
+<img src="https://static001.geekbang.org/resource/image/c1/9b/c1bd9197c552617e888afe6a1fe96b9b.png" alt="" title="班主任二维码">
+
+也可以在[这里报名](https://jinshuju.net/f/RGtg1x)，班主任会通过微信联系你。祝学习愉快。
--- a/一个前端工程师到底需要掌握哪些技能？.md
+++ b/一个前端工程师到底需要掌握哪些技能？.md
@@ -0,0 +1,84 @@
+
+自从开了“重学前端”这门课程，总会遇到同学反复问我这几个问题：
+
+- 学这门课需要什么样的基础？
+- 为什么你不讲Vue？
+- 有必要学习Node.js/Flutter/函数式吗？
+
+这几个问题看似毫无关联，但是其实它们本质上都是同一个问题，这个问题就是“一个前端工程师到底需要掌握哪些技能？”
+
+其实在行业里面，对前端工程师的能力模型有一个基本的认知，不同公司的定义可能有细微差别，但是它的内核是一致的。
+
+这里我给出一张图，是我自己理解的前端工程师的技能模型。
+
+<img src="https://static001.geekbang.org/resource/image/e0/92/e0c654fa7cf5f63cdcca1b6c51008992.jpeg" alt="">
+
+为了方便你理解，我把这些技能具体放进前端工程师的不同级别里，你可以对照着找到一条符合自己实际情况的前端进阶之路。下面我就一部分一部分地详细讲讲前端技能树是如何发展的。
+
+## 助理工程师
+
+**首先来说说助理前端工程师，对标的是阿里的P4级别。**它的要求是基本的编程能力。什么叫基本的编程能力呢？我认为就是熟练地用计算机编程语言表达任何逻辑的能力。一般来说，在大学学习过计算机专业的学生应该具备编程能力。
+
+我举一个具体的例子，我们用自然语言说“从1打印到100”，在多数编程语言里的表述，是一个变量从1开始，每次循环加1，每次打印，到变量值为100时循环结束。理论上只要掌握了循环、分支逻辑，能组合出一切逻辑，这是图灵可计算理论决定的。但是理论是一回事，真想要熟练掌握，是需要经过一定训练的。这个训练，就是对助理工程师的要求。
+
+在面试中考察这部分知识的问题往往被称作“算法题”。其实广义上的算法指我们一切完成问题的步骤，而狭义的算法则是指算法课本上几种经典的算法如分治、贪心、动态规划等。面试中考察基本编程能力，其实题目出难了就是所谓的“算法题”，出简单了就是“写段代码看看”，并没有一个明确的分界线。
+
+助理工程师的定义是“能够在辅助下完成工作”，因此不是所有公司都会招聘助理工程师的，因为严格来说，助理工程师不具备独立工作的能力，他的工作产出可能是负数。但是招聘助理工程师的公司，一般都是看重应聘人的潜力，期望能快速成长。
+
+## 工程师
+
+**接下来我们说说前端工程师，对标阿里P5级别。**它的要求是掌握基本的前端技能，这样说也许有点模糊，但是换个说法就很明白了，基本前端技能就是“综合运用HTML、JavaScript、CSS完成任何界面和交互需求”。这个“任何界面和交互需求”，看似要求很高，但是如果你写过前端就知道，这是任何前端的基本技能——大不了用图片呗。
+
+其实这个级别的工程师，水平跨度非常大，界面写出来了，但是兼容性如何、代码可维护性如何、离了框架能不能写出来、语义表现分离能做到吗、开发过程中能不能做到有效沟通…还会有很多问题。而这些问题，决定了一个前端工程师的潜力，一些好一点的公司招聘这个级别的工程师，除了“基本的前端技能”之外，还会对我上面提到的这些问题有所要求。
+
+关于助理前端工程师和前端工程师，能力方面主要的要求是编程能力，知识方面的要求是一个“可用”的最小集合。
+
+## 资深工程师
+
+**我们接着往下讲，资深前端工程师，对标阿里P6级别。**到了这个阶段，我们可以看到图上开始出现不同的区块了，这意味着，对资深前端工程师的要求，也是多元化的。
+
+我们用一句话来概括，资深前端工程师，要求开始关注并且解决项目中的问题。什么样的问题呢？可能是别人做不出来的技术难题，也可能是容易出错的代码，或者说无意义的重复劳动，或者是业务上想不出来合适的交互…… 等等。
+
+其实对资深前端工程师的要求是很自由的，我上面的图中给出的仅仅是几个例子，比如组件化可以解决重复劳动问题和开发耦合问题；工具可以解决的问题有很多，生成代码的工具提高效率，代码检查工具提高质量；性能优化则会带来业务价值，这些都是资深前端工程师可以做的事情，并且只要把其中一两项做好，就可以达到资深前端工程师的水平。
+
+再有就是这个级别开始对架构能力和工程能力有所要求了，但还处于萌芽阶段，一些天赋好的同学可以凭感觉达到这个水平。
+
+## 技术专家
+
+**下面说说前端专家，对标阿里P7级别。**到了这个级别，我们从图上可以看到，要求又不一样了，比如组件变成了组件体系，工具变成了工具链和持续集成体系，性能优化变成了性能体系。这些东西变得不仅仅是称呼，还有工作的内容，这个级别跟资深工程师的主要区别是，从解决单点问题变成系统性方法，从服务自己变成服务团队，从一次性发挥变成持续性输出。
+
+比如，资深工程师可能做一些组件，然后在项目里面用，自己的代码可维护性提升了，复用也做得更好了。但是前端专家要考虑制定组件规范推广到团队，还要做培训，考虑组件如何开发、管理和下线。资深工程师做性能，把自己的页面优化好了就可以了，但是前端专家就需要考虑采集数据、做报表和监控、总结checklist、跟工具结合、定性能指标等等。
+
+由于这个级别对架构能力、工程和软技能要求很高，所以算是比较难以跨越的。
+
+## 高级技术专家
+
+**最后来说高级前端专家，对标阿里的P8级别。**我们从图上看，这个级别分开的发展方向又聚合到了一起。高级前端专家做事的关键是审时度势，需要在前面讲的前端专家所掌握的各个领域里，组合出一套适合自己所在团队的方案。比如做企业内部系统的前端团队，可能对性能要求就没那么高，但电商前端团队因为运营活动频繁，就需要很好的组件体系，这里很难有一定的规则，全靠人来把握。
+
+到这个级别，对工程能力的要求就很高了，而且即使不带人的高级前端专家，也必定涉及一些管理能力。
+
+## 前端进阶的核心要素
+
+讲完了各个级别的前端技能模型，我们回到最开始的问题“**一个前端工程师到底需要掌握哪些技能**”。
+
+要回答这个问题，你要先根据自己的情况对号入座。梳理出自己掌握的前端知识程度，定位出自己的级别。再根据更高层级所需的知识，有的放矢，循序渐进，不断精进、完善自己的前端知识水平。
+
+我们现在学习的“重学前端”这门课程，最重要的作用首先是构建出一个完整的前端知识架构，让你可以把自己的前端能力梳理清晰，让你意识到自己“会什么，不会什么”。如果后面再遇见了拿不准的知识点，你也可以定位好属于哪部分的哪个知识点。
+
+有同学会问：自己对照专栏的知识架构后，好多知识点都不会，比较模糊，感觉会影响岗位的晋升，很焦虑，怎么办？
+
+不要急，我们可以看到，在前端的技能模型里，对“知识”是没有任何硬性要求的，具体到各个公司的不同岗位，可能会有一些特殊要求，但市场是巨大的，所以大家可以不必对学什么知识不学什么知识感到那么焦虑。
+
+**现在大部分同学会更为注重前端岗位的晋升，我认为想要真正实现前端岗位的晋升，更多还是要看你的能力，尤其是在工作中非常重要的编程能力、架构能力和工程能力，这些都是前端工程师必备的“内功”。**
+
+而且“前端知识”应该是一个垂直的模块，它不能直接帮助你进阶下一个更高的级别，但是它能提升你的潜力，使你未来能走得更远。
+
+我现在也在从教育的视角，结合自己多年的前端一线经验，尝试一种更为直接有效的课程形式，帮助大家提升能力、实现进阶。去年，我和极客大学联合举办了第 0 期线下的「前端训练营」，得到了同学们很好的反馈，也恰恰验证了我的观点，**“前端能力是可以培养的，这比单纯学习框架要重要得多”**。
+
+今年我和极客大学又重新设计了线上版的**「前端进阶训练营」** ，课程设计深度对标阿里 P6 技能模型，延用班主任、助教、作业、评分、毕业、研讨等多种学习形式和服务。针对不同基础的同学，课程增加了前端基础知识的讲解，以及**组件化、工具链、发布与持续集成**这三条大厂进阶的关键路径。
+
+我依然会把重点放在前端工程师能力培养上，希望教你知识怎么学，并且通过线上刻意练习的方式，帮助你提高编程、架构和工程能力。
+
+欢迎你来参加。
+
+[<img src="https://static001.geekbang.org/resource/image/76/f3/7629623563c0aa06b5725215112308f3.png" alt="">](https://u.geekbang.org/subject/fe/100044701?utm_source=time_app&amp;utm_medium=cxqdjiacan&amp;utm_term=timeappcxqdjiacan)
--- a/极客时间专栏/重学前端/特别加餐/加餐
+++ b/极客时间专栏/重学前端/特别加餐/加餐
@@ -0,0 +1,177 @@
+
+<video poster="https://media001.geekbang.org/bb431a0b16a54be1baca0718ce192e80/snapshots/8a2a4ac6c2024566a31b0a221f61edd8-00005.jpg" preload="none" controls=""><source src="https://media001.geekbang.org/customerTrans/fe4a99b62946f2c31c2095c167b26f9c/55bb6243-16d203ce6d5-0000-0000-01d-dbacd.mp4" type="video/mp4"><source src="https://media001.geekbang.org/19d9c08fafdf43349f09faffb8379a40/4eb30701b8644c12aa87d55a1c2a1091-27c78be0977def21aea064402b959180-sd.m3u8" type="application/x-mpegURL"></video>
+
+（点击视频观看完整分享内容。）
+
+## 主要内容
+
+关于前端和图形学，我分成了三个部分来讲解。
+
+<img src="https://static001.geekbang.org/resource/image/40/f6/40d8d263d15f779a232816a67230f0f6.jpg" alt="">
+
+<li>
+第一部分是讲前端和图形学有什么样的关系。我们为什么要在前端里引入图形学，这个也是我的一段心路历程。
+</li>
+<li>
+第二部分相对来说是比较实用的，就是图形学的应用场景。如何在前端的日常的工作中，把图形学的知识用进去，为我们的工作和业务创造价值。
+</li>
+<li>
+最后一部分是对图形学基础设施的一些建设，目前还是一个比较初级的阶段，但是对大家来说，应该有些思路还是可以去思考的。
+</li>
+
+## 前端和图形学
+
+首先讲第一部分前端和图形学，先讲讲缘起。
+
+### 缘起
+
+<img src="https://static001.geekbang.org/resource/image/34/3c/342921012fbcd30bd231fb37c99e293c.jpg" alt="">
+
+2011年我做了一个分享，当时HTML5正火，我讲了这么一个内容叫做gesture animation，我是用HTML5上的TouchEvent，去模拟当时非常惊艳的iOS的操作风格。
+
+2013年我又开始讲一个叫做flexible design的东西，这是针对当时一个非常火的概念提的。那个概念能从最大的屏幕适配到最小的屏幕的一个技术方案，但是从我们当时的实现来看，这个想法是好的，概念也是高大上的，但是从落地上来看非常困难。考虑到现实情况，我提了一个flexible design这样的一个次级概念。
+
+这个就是一个弹性、小范围的适配，我们只把不同的尺寸的安卓机和iPhone做适配，最后解决了适配的问题，并提出来了一系列的设计原则。所以在2013年，我们主要做得还是解决适配问题。
+
+2016到2017，我在各种不同的会议上讲了三场演讲，它们的背后其实都是同一个东西，叫做BindingX。
+
+我是希望提出一个交互领域的通用模型，我把交互抽象成输入、输出和中间的一个表达式。通过三者之间的关系，来建立针对所有交互的领域模型。
+
+我的三场分别是从技术的角度、从架构的角度，和从团队基础设施建设的角度，讲了三次。差不多两年的时间，我一直在研究这个方向。
+
+16年初的时候，我做了一件事，我让团队的一个小伙伴去找当时所有看起来比较先进的设计，他到网上到处去找，总结了这么一份PPT。
+
+然后呢，16年初的时候，我们就对着PPT开始研究说，到底哪个东西还是我们现在的基础设施实现不了的。我们用binding尽量去实现了。但是还是有一部分在2016年是做不到的。
+
+到了2018年，我们又做了一次一样的事情，我们把当时的这个PPT拿出来，说这个效果还有没有我们做不到的，我们发现整个的效果，我们已经全都能做到了。
+
+当时我们觉得作为前端，至少从底层能力上来说，我们已经建设得很好了，市面上能看到的先进的交互，我们都是可以做出来的。
+
+不过，我还是做了一些思考，其实还是能找到一些做不出来的效果，比如说一些光和影的效果，还是我们现在做不出来的。
+
+### 浏览器的图形学
+
+对浏览器来说，图形这一条线下来，它大概会是个这样一个依赖关系。
+
+<img src="https://static001.geekbang.org/resource/image/c5/15/c5ceb67bc32dc36fd76af20ac150aa15.jpg" alt="">
+
+我发现前面觉得自己做不出来的东西，实际上毫无疑问都可以用OpenGL的API去解决，我觉得它其实除了大家耳熟能详的“做3D”这一能力之外，是不是还可以用来解决我们在渲染方面的一些问题。
+
+### 设计稿里的图形学
+
+除了技术的角度，我们也做了另一个角度的分析，我们考察了一下设计师最常用的这个工具，Photoshop。它有一个工具叫滤镜。Photoshop里能够画出来东西的，都是通过滤镜实现的。
+
+<img src="https://static001.geekbang.org/resource/image/be/f5/bea6a3081342e34aecd4a8c934a02af5.jpg" alt="">
+
+所以，我们做了一些基础渲染型的滤镜，也有一些对图片处理的滤镜，通过对它们的灵活组合，我们可以实现各种各样的图案，比如画个火焰、画个云彩类似的效果。
+
+基于此，我们又做了一些探索。
+
+## 图形学应用场景
+
+我们把Photoshop生成的图片其实分了一些不同的种类。
+
+<img src="https://static001.geekbang.org/resource/image/7b/95/7bc0176efdf89f74968c3829df6bd095.jpg" alt="">
+
+一种叫做图案，这个它可能是一种重复率比较高的，也可能是不重复，但是它相对来说是一种多用于背景的这样的一种东西。
+
+还有一种，就是Photo图片，图片基本上就是拍照拍出来的，比如说这个图里的一个音箱，这个东西你没法去用技术去代替它，就是真实的图像。
+
+还有一种东西叫做形状，比如三角形、圆形、方形，形状已经在浏览器里用了很成熟的技术去实现。
+
+### 来自设计稿的图形：云雾
+
+那么我们现在重点要去解决的是第一种pattern。比如我们要实现云雾效果。
+
+<img src="https://static001.geekbang.org/resource/image/71/a6/7146c502f0d91ebfd811d08cc90efaa6.jpg" alt="">
+
+首先我们要有一个noise，小时候看电视这个出雪花就是这样的，那个就是说来自硬件的噪声，当我们把这个噪声做一些处理，放大，放到最大，它就会变成一个模糊的几个块，再放的小一点，就变成几个不动的模糊的块，一直到最后就变成雪花点，但是我们把几张图以一定的比例做一定的叠加，然后就搞定了。
+
+<img src="https://static001.geekbang.org/resource/image/cc/f5/ccce535cdb6fd9e8aea5671047a5fdf5.jpg" alt="">
+
+接下来我们看一下对比图，看我们的结果，我们的这个云彩和Photoshop这个云彩渲染出来它的形状基本上是一模一样的。
+
+<img src="https://static001.geekbang.org/resource/image/97/3f/97757abccfaf529c82e6c81b777d243f.jpg" alt="">
+
+我们打开了一扇新的大门，我们仔细研究发现很多内容都是可以用shader去做的，如果这个想法再深入一点，我们不需要用图片了，可以直接用代码去渲染了。
+
+我们可能未来会给设计师提供很多这样的平台、工具，让他直接在我们的这个平台上去做操作，代替原来Photoshop的步骤，或者我们对Photoshop的文件做一定的处理，来生成这种图案，这是我们的一个思路。
+
+### 来自数学的图形：几何图形与分形
+
+除了灵感来自Photoshop之外，还有些其他的来源，比如几何图形，如果大家看一下这个著名的Logo，苹果的图标。
+
+这幅图里面有很多的圆、框和螺旋线，它们总能找到一些数学的依据，设计师们做图标的时候都是要讲道理的，不能是凭空手绘的，尤其是这种著名公司的icon。
+
+<img src="https://static001.geekbang.org/resource/image/53/0d/5379622bd97a5b31caa5c3febaa2690d.jpg" alt="">
+
+大家不要去轻视这个简单的几何图形，简单的几何图形也可以产生一些非常好的效果，除了几何图形之外，来自数学的还有一类，非常著名高端，但是实现起来非常简单的，叫做分形。
+
+很多广告片里面，它会用类似这样的图形做这个背景，分形本来是数学里面的一门学科，分形集合，研究分形图的性质，它的特点是每个部分都是大图的一个相似图形，所以说，它可以无限延伸下去。
+
+<img src="https://static001.geekbang.org/resource/image/65/55/65bcc59719ebdf4650f9e53e924bfd55.jpg" alt="">
+
+分形的代码很简单，就这么多代码，但是它也是画一个像素点的，它可以画成类似雪花这样的东西。
+
+这类的分形图呢，叫Juila Set ，我们作为前端，我们就照着上面的数学公式把它用代码实现就好，所以非常的方便，为什么我要挑出来Juila Set来讲，是因为它有个特点，当你用不同的常数的时候的它会产生非常不一样的图形。
+
+<img src="https://static001.geekbang.org/resource/image/0c/4c/0c046400292e6ac7badb89ae173e304c.jpg" alt="">
+
+比如说我们要做一个后台的这样的系统，给我们的设计师用，你让它自己调一调这个参数，它可以调出不同的图案。
+
+总之，我们看到了很多的可能性，而Juila Set只是分形里面的一个集合，而数学里面的各种各样，能画出来奇怪花纹的东西，绝对不只分形一个，这里有非常大的想象空间。
+
+### 来自物理的图形：光的衍射
+
+还有一些来自物理的一些灵感，尤其是这种光晕效果，这个光晕效果也是Photoshop里面提供的，用这个光晕效果也可以做很多的设计。
+
+<img src="https://static001.geekbang.org/resource/image/5a/75/5a6593e87e8c8ccfd0df812332d48e75.jpg" alt="">
+
+这个代码也惊人的简单，我们也不需要把这个东西搞的特别清楚，你知道理解我们可以有这些灵感的来源，就足够了。
+
+### 相变
+
+相变又是来自于一个新的领域的知识，就是我们可以对图片做一个处理，大家看到这个小人有帽子，作为一个有追求的前端程序员，我们可以用代码去改变它帽子的颜色。这里面涉及一个颜色的知识，叫做hsv。
+
+<img src="https://static001.geekbang.org/resource/image/b0/4e/b0797c17aebea57ba7c873067ed72a4e.jpg" alt="">
+
+一般来说，大家只把hsv当作一种写颜色的方式，但我认为它是一个比rgb语义更好的颜色表述的方式，hsv是用了一个色相和明度，和纯度这样的一个概念，我们要想改变一张图的色相，我们就只需要去改变它的色相。
+
+我们把蓝色的色相变到绿色的色相就OK了，这里面有一个很复杂的公式，只是写起来有点吓人，其实都是加加减减就好了，我们在hsv完成一个相变，我们再把它转回rgb，这样就实现了我们的这个色相变化的效果。
+
+我们可以把这一点利用到很多场景上，比如说人民币，你从5元到100元钱，虽然大家觉得它差异很大，但它其实就是一个色相的改变。（我在前面的文章中讲到了同一种鸟颜色的转变，也是如此。）
+
+### 绿幕
+
+<img src="https://static001.geekbang.org/resource/image/db/0d/dbf479fe38b97a0106a349eb3481e10d.jpg" alt="">
+
+绿幕是电影的技术。如果大家到拍摄现场看拍电影，你会发现他们经常弄一个绿幕在上面，我们也用了一个类似的技术，我们也管它叫做绿幕。
+
+### 3D图形
+
+<img src="https://static001.geekbang.org/resource/image/34/ed/349949c1592eb128ebe4fc1cb40ae8ed.jpg" alt="">
+
+最后提一下3D图形，因为这个是业内非常成熟的东西，我就不仔细讲了。就是我们的ThreeJS和BabylonJS提供的3D的效果。3D的领域，现在是个红海竞争，你写一个引擎基本上跟别的引擎差不多，你有的功能别人都有，除非你与一个很厉害的实验室合作做了一些特殊的优化，但是，我觉得对于工程团队来说，这个代价有点高。
+
+## 图形学的基础设施
+
+最后讲一下图形学的基础设施，我们做图形的事情，还有些比较现实的问题。
+
+### 基础设施：GCanvas
+
+<img src="https://static001.geekbang.org/resource/image/ec/d7/ec17b5b8bbf1181b48df32f0b4ea98d7.jpg" alt="">
+
+<img src="https://static001.geekbang.org/resource/image/59/4b/592aac455002919c19d9dc381a3b4e4b.jpg" alt=""><br>
+<img src="https://static001.geekbang.org/resource/image/e8/07/e822a732d980a01502d0b4a072f27407.jpg" alt="">
+
+比如说阿里巴巴现在已经不用web view，基本上淘宝里面的页面已经是百分之百weex化了，可能就有一两个页面不是，我们面对的一个非常现实的问题，就是我们在用weex技术，而它里面是没有Canvas的，如果大家没有用weex，用了React  Native其实也要面临一样的问题。
+
+没有Canvas怎么办？其实还是很简单的道理，做一个，所以我们做了一个叫做GCanvas的东西。
+
+### 基础设施：G3D
+
+<img src="https://static001.geekbang.org/resource/image/b6/83/b6d2fa7226f642ed24365d6aa1928b83.jpg" alt="">
+
+业界还有一个东西就是G3D，它与ThreeJS一类，没有什么本质的区别。底层它会有些管理的能力，它也可以交互，我们也做了点选，拖拽、顶点变形这样的能力。
+
+如果你对今天的内容有什么样的想法，你可以给我留言，我们一起分享。
--- a/极客时间专栏/重学前端/特别加餐/加餐
+++ b/极客时间专栏/重学前端/特别加餐/加餐
@@ -0,0 +1,128 @@
+
+<video poster="https://media001.geekbang.org/60dcf2f17b154a228f48c05c2d7b0b99/snapshots/178ef805a9fa4b94910b2b962681b413-00005.jpg" preload="none" controls=""><source src="https://media001.geekbang.org/customerTrans/fe4a99b62946f2c31c2095c167b26f9c/489cf0ee-16d14083228-0000-0000-01d-dbacd.mp4" type="video/mp4"><source src="https://media001.geekbang.org/ade06cd034114f7dacdd5c1dfa3e3d1f/5413348c5d2d42ccbea0164ef4e4723a-73dd7e79d80ed8012040a27ae1dd242d-sd.m3u8" type="application/x-mpegURL"></video>
+
+## 分享内容大纲
+
+Vue、React等现代前端框架很好地解决了组件化和数据视图解耦问题。而对前端来说，新交互永远是花费时间最多的工作，新交互也是前端团队的自然价值和核心竞争力之一。
+
+在这次话题中，我会分享在交互的基础设施的建设上的一些思考和实践，包括图形图像基础、事件机制与视图层架构模式、交互管理框架等内容。
+
+<img src="https://static001.geekbang.org/resource/image/79/1c/7917180b45e4d591bf3aaaada17c911c.jpg" alt="">
+
+首先我们要了解一下历史。在70年代，大概是70年代的尾巴，1979年左右，有了特别有名的，MVC架构。
+
+MVC之后，经过了差不多十几年的发展，到了90年代，准确地说应该是95年左右的时候，这个有一个公司的CTO，叫Mike，Mike在MVC的基础上，提出来了MVP。
+
+到了 2005年，2005年微软的一个架构师，做WPF的，提出了MVVM模式。
+
+2014年左右的时候，出现了FLUX，这个是Facebook为了它的JSX和React提出的一种模式。
+
+后来隔了短短的一年，2015年，同样是在React社区，出现了REDUX。
+
+对于前端来说，我们为用户创造价值才是特别回答的一个问题，这么多年过去了，前端到底为用户创造了什么价值呢？
+
+<img src="https://static001.geekbang.org/resource/image/b4/35/b46a898e8a5bc31280f8754cdfe1ed35.jpg" alt="">
+
+这是70年代，施乐公司做的一个软件管理的流程图软件，那个时代，整个的界面就是这个样子，施乐已经算比较先进的了。
+
+再到90年代，当时这个画面还是很惊艳，按钮键是立体的。现在来看这个东西就有不那么美观了。
+
+2006年左右的时候，Vista的界面已经开始有了一个非常大的变化了，这时已经是设计师在主导这个界面的了，但是性能并不佳。
+
+再之后，手机出现了，比如iPhone的界面，这时不但交互模式发生了巨大的改变，而且屏幕也变了，甚至我们熟悉的鼠标不见了，变成了触屏。虽然两者之间操作上有一定的相似，但是变化还是非常的。
+
+<img src="https://static001.geekbang.org/resource/image/25/30/25648bd93fef8871c1eccc612f7f3530.jpg" alt="">
+
+视图的职责也在演变，70年代，视图的职责是：任何一个视图，永远不应该知道用户的输入。
+
+我们这个时代的视图则既负责输入，也负责输出，并且与Model之间有一个交互。
+
+<img src="https://static001.geekbang.org/resource/image/cb/ab/cb57a540ec3779002c7c31d0960005ab.jpg" alt="">
+
+计算机的功能也在演变。70年代，计算机主要用来计算。
+
+我们今天计算机主要用来上网，基本上，大家的计算机都是24小时联网的，你的手机也是24小时联网的，所以计算机的职责在发生变化。
+
+这个变化对于UI有很大的影响，1970年的那个MVC那篇论文里的图，model很大，view很小，而到了2018年，今天我们很多的model，都是放在服务端的，而今天model的大小已经不是说一台机器上能去存的，你存在本地的只是视图展现一点点的model，这个是很小的一部分的东西。而同时view却越来越重要了。
+
+<img src="https://static001.geekbang.org/resource/image/62/0e/6287d6cb49f51c13b2ba89bd121cc30e.jpg" alt="">
+
+我们来看一下视图的技术。
+
+从最底层的有很多人是做显卡和drivers，有这样的大佬人才。
+
+还有现在非常流行的OpenGL等的GL层，做这一层的人非常专业，基本上都集中在各种大公司，最近苹果和安卓还竞争，推出了新一代的这个GL架构。
+
+还有一个这个Draw层，这一层的内容非常多，基本上就爆发了，skia是安卓的底层绘制系统，graphics.h是最早的C语言带的一个图形库，基本上相当于一个基础库，还有很多3D引擎。
+
+UI Framework这一层，它提供了一套基本的UI结构，有了绘制层， 一般人都不会在绘制层直接去工作，需要有些控件，这层有我们比较熟悉的Dom。GJI是Windows的图形系统，WPF也是Windows的图形系统。
+
+最上面其实会有一些DSL，这是描述图形的语言，WPF对应的就是XAML，JSX对应的是React，HTML大家都知道了，想说这个视图技术变得越来越复杂，
+
+<img src="https://static001.geekbang.org/resource/image/ae/20/ae5b0f0cb1e5e42370d97fa518307a20.jpg" alt="">
+
+那么我们的主战场是怎么样的，我们可以看一下淘宝终端技术在各层上的分布状况。
+
+交互体系其实是这里面的一部分，但它不是这里面的全部，我觉得我们要讲这个交互呢，我们还是要做一下抽象的，我们要认识到，交互的本质是什么。
+
+<img src="https://static001.geekbang.org/resource/image/7b/18/7b1cbcd358431b45ef23fc13f4732e18.jpg" alt="">
+
+交互的本质是什么呢，我画了一个手和一个眼睛，其实无非是操作和看。
+
+操作最常见的一个抽象的模式就是事件。这个比如说这个touch-screen事件，陀螺仪事件，或者是时钟芯片触发的持续事件，这些作为输入。
+
+输出一定是通过属性的形式体现的，在任何一个现在的UI框架下，都是通过属性的方式反映出来的。transform是变形，opacity是透明度，color是颜色，这就是一个比较完整的抽象了。你在任意的输入和输出连成一条线后，它都会产生一种效果。
+
+<img src="https://static001.geekbang.org/resource/image/59/8e/597261cebd9e48d115f6c8ae2a9b098e.jpg" alt="">
+
+不过直接把陀螺仪得到的参数输入到transform里肯定是不行的，它需要有个关系，我们在这里面选择了Expression。我们可以用JavaScript去做计算。我觉得这是一个完备的抽象。
+
+<img src="https://static001.geekbang.org/resource/image/cb/ee/cba8a0fac235bd1186a9a470b50564ee.jpg" alt="">
+
+不过这里还有一个坑是需要迈过去的，对计算机理解的输入跟人类理解的输入有非常大的偏差，对计算机来说呢，有多少种硬件，就有多少种输入。
+
+我们发现输入非常复杂，在做基础设施建设的时候，我们在输入上面其实投入了很大的精力，最后出来的是一个更接近于人脑概念的一系列的输入。
+
+<img src="https://static001.geekbang.org/resource/image/ff/95/ff41ffacad1377e0caf5a3890cf17f95.jpg" alt="">
+
+比如说，touch和gesture，我们知道触屏其实是触屏事件，触屏事件其实非常简单，只有四个，touch start，touch  move，touch  end，touch cancel则不太常用。
+
+比如我想摁或者点一个东西，它都是是touch start，touch  move，touch  end，如果你要监听这些事件，中间的判断很繁琐，作为交互的基础设施，我们不可能提供这些给我们的前端工程师使用，我们肯定做一些操作。
+
+比如手指移动10px，我们就认为这个touch  start到了pan  start，这个后面就是pan  move，pan  end这样，
+
+手指很快离开，那么它就会产生一个tap事件。
+
+如果超过1.5秒那就一个press start，如果手指没移呢，就会产生一个press end，如果手指移了，它还会产生一个pan start。所以gesture已经比touch复杂了很多了。
+
+<img src="https://static001.geekbang.org/resource/image/0e/f6/0edd194d6926619cf994444f9b4b54f6.jpg" alt="">
+
+scroll就在gesture的基础上又复杂了一层，它不但手指在屏幕的时候响应，手指离开屏幕的时候它也响应，比如说轮播，它是一个变形的轮播，它在轮播的过程中，不但产生位移，还会产生大小的变化，这就让用户更舒服一些。
+
+还有一个滚动导航，一边滚动出来一个导航，近年来还有一个交互设计，不是滚动到某个位置导航出来，而是一直再往下滚动的时候它不出来，突然往上滚动一下，导航就出来。这个部分还有更难的设计交互，所以我们还需要在scroll的基础上再做一层。
+
+<img src="https://static001.geekbang.org/resource/image/55/df/55553181bd8ff7feaebc7a5afda03cdf.jpg" alt="">
+
+我们再来看陀螺仪，它只提供了三个分量，并且它是0到360度，所以如果不经过任何处理，前端工程师基本上是没有办法用的，比如在某个角度，它可能会突然从0跳变成360度，这个在数据计算时候非常可怕。
+
+所以我们建立这样一个模型，我们把手机看作这样一个立方体，去计算在空间中对立方体产生的旋转效果，我们拿着立方体上面的一个点呢，去做我们定位的一个依据。
+
+<img src="https://static001.geekbang.org/resource/image/40/a6/406d0e28e45424ad7a5f7f55b0def8a6.jpg" alt="">
+
+因为我们在用Weex，所以有一个Native跟JS通讯的问题，比如说从gesture事件到gesture handler，这一步就会到JS去执行，图中我们可以看到这个线，跨过中间JS和Native的分界线，跨越地非常频繁。
+
+假如一个Touch  move事件或者Pan  move事件，你手指每移动一小点它都会触发一次JS跟Native的一个跨语言通讯，所以说整个的性能会非常差，最后基本上会有5毫秒到10毫秒左右的一个延迟，有60帧的话，每一秒钟有300毫秒被占掉了，帧率就下去了。
+
+<img src="https://static001.geekbang.org/resource/image/ce/66/cec057f7bc548c01e0ef3bafa6975766.jpg" alt="">
+
+这就是我们最初开始做Binding模式的原因。我们的Binding模式，expression传递一次给Native，然后它会去做大量的绑定，所有的过程都是由Native来完成的，Native做完了以后，还需要再更新一下VDOM，所以这操作就完全由Native完成，通讯次数就降下来了。除此之外，我们还额外收获了性能上的收益。
+
+<img src="https://static001.geekbang.org/resource/image/3f/c5/3f1c0f0a6313fac231e3328e0a07f7c5.jpg" alt="">
+
+我们的结论，其实淘宝一个交互体系是这样的，是以Binding为核心，下面的平台支持了weex，Web，React Native。DSL上面，我们支持了View和Rax两种，在上面，是由我们自己建的Components体系。
+
+<img src="https://static001.geekbang.org/resource/image/c2/92/c25d8385b4fba22294bbab5e30b95a92.jpg" alt="">
+
+最后，还有一个展望，我们用绘制层相结合，会有更多的想象空间，我们通过各种各样的输入、手势、时间、陀螺仪，我们其实可以去控制矢量图，也可以去控制绘制，这些都是前端未来的想象空间。
+
+如果你对今天的内容有所思考，可以给我留言，我们一起讨论。
--- a/极客时间专栏/重学前端/特别加餐/新年彩蛋
+++ b/极客时间专栏/重学前端/特别加餐/新年彩蛋
@@ -0,0 +1,48 @@
+
+大家好，我是winter，想借这个机会跟大家聊一聊2019年前端会发生的一些事情。
+
+<video poster="https://static001.geekbang.org/resource/image/a0/10/a0546c4689896410a1808919eb63ad10.png" preload="none" controls=""><source src="https://media001.geekbang.org/customerTrans/fe4a99b62946f2c31c2095c167b26f9c/4010e2e0-16cfecae0c3-0000-0000-01d-dbacd.mp4" type="video/mp4"><source src="https://media001.geekbang.org/a6616e316d6d42bc8cfafc90151bbd09/8d76d01f5d4e45909a9a95af7150dafd-2ba878425340765427bcd402b49f1a21-sd.m3u8" type="application/x-mpegURL"><source src="https://media001.geekbang.org/a6616e316d6d42bc8cfafc90151bbd09/8d76d01f5d4e45909a9a95af7150dafd-eae7b4a51e00610064284515be52cd6b-hd.m3u8" type="application/x-mpegURL"></video>
+
+首先呢，我觉得可以谈一谈，我特别关注的图形学领域。
+
+## 进击吧，图形学！
+
+在淘宝工作的后期，我也有很大一部分精力放在了图形学上面，我是深刻地感觉到，在未来，图形学会和前端结合的更紧密。这是由于我觉得图形实际上是UI最重要的一部分计算机科学，同时它也是计算机领域里面的一个非常关键的学科。
+
+我们的前端就是做UI的这样的一个职能，在未来，我觉得随着前端的工作层级逐渐地下沉，前端能够做到越来越多的事情。我们的图形也会逐渐的成为前端的一个基本的技能。
+
+我在2018年已经可以看到很多2D和3D领域的应用了，我们会用2D的东西去做图片的渲染，我们会用3D的东西去做一些3D场景的呈现，在不同的公司我都会看到很多这样的案例。
+
+另外，我觉得图形学也会大量地吸收以前在PS中由设计师做的功能，很多以前我们做得这种效果，包括半透明，包括模糊等等都是在PS里面，用图片来实现的。
+
+但我认为在未来，随着图形学技术逐渐地发展，前端可以用代码来实现这样的效果，这样我们就可以不用设计师产出的图片了，而是设计师告诉我们用什么样的效果，我们来写代码把它实现。
+
+这种下沉其实有个好处，我认为当前端工作层下沉到一定的程度，我们就不会有“做不出来这样的效果”这件事发生了。
+
+这件事是很有意义的，今天你去问一个C++的工程师，这个东西能不能做，他只会说这个东西我不能做，他不会说，C++不能做，那在我们前端这样的情况往往是刚好相反的，所以说，我觉得未来下沉，技术下沉会给我们前端带来更多的职责，也同时是一种责任。
+
+## 包管理的救赎
+
+我觉得前端第二个会非常重要的发展趋势就是：包管理。我们都知道，NPM是一个非常好的包管理。
+
+但是实际上，我们的NPM生态里也有很多的问题，包括安全问题，包括依赖太多造成的性能问题。我觉得目前到了一个重要的时间点了，那么NPM的这种问题，一定会有人解决。
+
+但这种解决方案，到底是NPM的竞争对手会产生一个新的这样的包管理的平台；还是我们的NPM生态里面诞生一些更好的方案，最终把问题解决呢？这个就是我没有办法去预测的事情了。
+
+## 智能研发，前端有责
+
+另一个技术是我比较关注的是AI领域和前端的结合，我们的AI领域，今天虽然炒得非常火热，但是在我看来，真正应用的比较好的场景，就是视觉和推荐这两个领域。
+
+我觉得智能研发的领域是整个学术界非常少关注的，那么我们的前端应该把这个责任背起来。
+
+我在淘宝已经看到很多这个方面的努力了，我觉得在业界，这个东西在2019年产量应该也会越来越成熟，毕竟切图工作是一个机械性的劳动，机械性的劳动最终一定会被机器取代。
+
+所以，我认为未来，我们前端的工作是不应该包含切图这项工作的。我也比较期待这方面能够尽快地产生一些成绩。
+
+最后呢，我觉得其他的技术在2019年，应该会是一个稳定发展的状态，包括大家特别关心的三大框架，Vue、Angular、React。我认为应该是“继续繁荣发展，继续稳定发展，最后生态越来越成熟”这样的一个状态。
+
+以上呢，就是我对2019年的一些预测和预期了。当然了，我非常希望我们今天中国的前端界能够诞生一些新的想法，能够让我大吃一惊，甚至是让我的预测落空，我觉得我也会非常高兴的。
+
+在最后，再次祝大家新年快乐。你对前端的发展有什么样的判断和预测呢，欢迎给我留言，我们一起讨论。
+
+[<img src="https://static001.geekbang.org/resource/image/7c/b1/7ca7c24e92d25bde2e8609ed5386b5b1.jpg" alt="unpreview">](https://time.geekbang.org/column/intro/154?utm_term=zeusL6497&amp;utm_source=app&amp;utm_medium=geektime&amp;utm_campaign=onsell&amp;utm_content=0212textlink)
--- a/极客时间专栏/重学前端/特别加餐/期中答疑
+++ b/极客时间专栏/重学前端/特别加餐/期中答疑
@@ -0,0 +1,244 @@
+
+你好，我是winter。
+
+随着专栏进度过半，我们专栏的评论区留言量也日渐上涨。除了大家的小作业和学习心得，我还看见很多同学们在学习过程中提出了不少问题。
+
+这其实是一种很好的学习方式，通过问题，我们可以对这部分知识记得更为牢固。
+
+所以，我鼓励你在阅读文章之外，多思考，多提问，把自己不懂的地方暴露出来，及时查缺补漏，这样可以更好地吸收知识。同时，你也可以通过回答别人的问题来检验自己对知识的掌握情况。
+
+我们一起来看看，大家都提出什么问题。
+
+**1.老师你好！我语义化标签用得很少，多数用到的是header、footer、 nav等语义化标签，想问老师section和div混合使用，会不会效果不好呢？**
+
+答：不会效果不好的，因为本来就是这么用的。遇到不确定的情况，请千万不要乱用标签，用div和span就好。
+
+**2.我一直看见闭包这个词，但是一直也没有弄清楚它是什么东西，老师可以简单概括一下什么是闭包吗？**
+
+答：你可以这样理解，闭包其实就是函数，还是能访问外面变量的函数。
+
+**3.“事实上，JavaScript 中的“类”仅仅是运行时对象的一个私有属性，而 JavaScript 中是无法自定义类型的。”**
+
+- **文中说“类”是私有属性，可以具体表现是什么，不是很能理解具体含义？**
+
+答：私有属性当然是你无法访问的属性了，但是具体表现的话，还是有的，那就是Object.prorotype.toString.call(x) 的行为。
+
+- **无法自定义类型？请问如下编码是属于什么操作，应该怎么理解这个“类”？**
+
+```
+function Person（）｛｝
+var person = new Person（）；
+
+```
+
+答：这个代码是定义类的操作，这里注意一下，你千万不要把类和类型的概念混淆。
+
+**4.请教老师在对象中`name(){}` 等同于`name: function() {}` ，这两个写法有什么区别呢？**
+
+答：这两个写法在使用上基本没什么区别。只有一点区别，就是函数的name属性不一样。可以看下这段代码：
+
+```
+var o = {
+   myfunc(){}
+}
+console.log(o.myfunc.name)
+
+```
+
+我们这里按照你的第一种方法定义了方法，然后输出它的name属性，我们看到name属性是"myfunc"。
+
+值得一提的是，如果我们给你的第二种方法添加了名字，行为还是不一样，区别在于能否在函数内用名字递归，我们看看代码：
+
+```
+var o2 = {
+    myfunc(){
+        consoe.log(myfunc); //error
+    }
+}
+var o1 = {
+    myfunc: function myfunc(){
+        consoe.log(myfunc); //function myfunc
+    }
+}
+o1.myfunc();
+o2.myfunc();
+
+```
+
+这段代码中，我们试着在用两种方式定义的方法中输出函数自身的名字变量，结果是不一样的。
+
+不过现实中，我们几乎不会关心函数的name属性，所以不用太在意两种定义方式的区别。
+
+**5.我对于JavaScript中Number安全整数有个疑问。**
+
+**MDN中是（-(2^53-1)~(2^53-1)）, 犀牛书中是（-2^53~2^53）感觉都有道理。**
+
+**JavaScript中采用IEEE754浮点数标准进行存储， 1个符号位，11位指数位， 52位尾数位。**
+
+**按照分析，不考虑符号位，尾数位取值52个1就是表示的最大值了，不会有精度损失，此时指数位代表数值是52+1023=1075，此时即为(-(2^53-1)~(2^53-1))。**
+
+**但是2^53这个值，存储的时候尾数是52个0， 指数位为53+1023=1076，这个值也是刚好没有精度损失的，这时表示的就是（-2^53~2^53）。**
+
+**用Math.isSafeInteger()判断安全数范围和MDN中描述一样。****所以被问到这个的时候， 感觉两个都是有道理的吧！老师你说对吗？**
+
+答：你分析得非常好，我觉得我都没啥可补充的了。这个地方JavaScript标准写得也非常模糊，我简单瞄了一下，似乎是用实验的方式来给出的安全数范围。考虑到犀牛书的时效性肯定不如MDN，应该是参考了某一版本旧引擎给出来的数据。
+
+所以，这类行为我们还是以实测为准吧，我们不必纠结。
+
+**6.老师您好，下面这个自己练习的例子希望您能帮解答：**
+
+```
+console.log('sync1');
+
+setTimeout(function () {
+    console.log('setTimeout1')
+}, 0);
+
+var promise = new Promise(function (resolve, reject) {
+    setTimeout(function () {
+        console.log('setTimeoutPromise')
+    }, 0);
+    console.log('promise');
+    resolve();
+});
+
+
+promise.then(() =&gt; {
+    console.log('pro_then');
+    setTimeout(() =&gt; {
+        console.log('pro_timeout');
+    }, 0)
+})
+
+setTimeout(function () {
+    console.log('last_setTimeout')
+}, 0);
+console.log('sync2');
+
+```
+
+答：这个例子挺经典的，虽然我觉得这样设计面试题非常不合适，但是我们可以以它为例，学习一下分析异步的方法。
+
+首先我们看第一遍同步执行，这是第一个宏任务。
+
+第一个宏任务中，调用了三次setTimeout（Promise中的代码也是同步执行的），调用了一次resolve，打印了三次。
+
+所以它产生了三个宏任务，一个微任务，两次打印。
+
+那么，首先显示的就是 sync1、promise 和 sync2。这时，setTimeout1，setTimeoutPromise，last_setTimeout在宏任务队列中，pro_then在微任务队列中。
+
+接下来，因为微任务队列没空，第一个宏任务没有结束，继续执行微任务队列，所以pro_then，被显示出来，然后又调用了一次setTimeout，所以pro_timeout进入宏任务队列，成为第5个宏任务。
+
+然后，没有微任务了，执行第二个宏任务，所以接下来顺次执行宏任务，显示setTimeout1，setTimeoutPromise，last_setTimeout，pro_timeout。
+
+最终显示顺序是这样的。
+
+<li>**宏任务1**
+<ul>
+<li>微任务1
+<ul>
+- sync 1
+- promise
+- sync 2
+
+- pro_then
+
+- setTimeout1
+
+- setTimeoutPromise
+
+- last_setTimeout
+
+- pro_timeout
+
+**7.为什么 promise.then中的settimeout是最后打印的？不用管是宏任务依次执行吗？**
+
+答：因为then是第一个宏任务中最后执行的微任务，所以它发起的宏任务是最后入队的，依次执行就是最后。
+
+**8.怎么确定这个微任务属于一个宏任务呢，JavaScript主线程跑下来，遇到setTImeout会放到异步队列宏任务中，那下面的遇到的promise怎么判断出它是属于这个宏任务呢？**
+
+答：resolve在哪个宏任务中调用，对应的then里的微任务就属于哪个宏任务。宏任务没有从异步队列中取出，中间所碰到的所有微任务都属于这个宏任务。
+
+**9.为什么要设计微任务（micro task），我知道这样JavaScript引擎可以自主地执行任务，但这样的好处是什么？提高性能吗？**
+
+答：不是，微任务是JavaScript引擎内部的一种机制，如果不设计微任务，那么JavaScript引擎中就完全没有异步了呀，所以必须要设计微任务。
+
+**10.现在浏览器多数实现是从右往左匹配的，那么无法保证选择器在 DOM 树构建到当前节点时，已经可以准确判断当前节点是否被选中。现在浏览器又是怎么实现在生成DOM树，同时进行CSS属性计算？**
+
+答：其实现代浏览器已经为`:empty`、`:last`等伪元素写了很多例外了，不过你说的从右往左匹配，左边的要么是当前节点的父元素，要么是前置元素，所以是可以保证准确判断的呀。
+
+**11.请问老师，页面资源的预加载是不是可以用link标签实现，还有其他的方式吗？**
+
+答：预加载的方法就多啦，还可以用JavaScript代码预加载，甚至用本地存储缓存。
+
+**12.老师，我有一个疑问：“词法环境”和“词法作用域”这两个概念的区别是什么？希望你能帮我解惑。**
+
+答：词法环境是运行时概念，词法作用域是语言概念，就是说，作用域指的是变量生效的那段代码，而词法环境是指运行起来之后，你这段代码访问的存储变量的内存块。
+
+**13.想问一个问题：import 进来的引用为什么可以获取到最新的值，是类似于 getter 的机制吗?**
+
+答：这个地方略微有些复杂，我们在运行时并没有讲import的运行时机制，这里涉及了一个叫做ImportEntry Record的机制，它比getter的实现更底层。
+
+我想这个地方我们没有必要去深究模块的运行时机制，它很复杂而且并不是经常要用到。你如果想了解的话，可以查阅一下。
+
+**14.请问老师，JavaScript 的call stack size是多少，这个size的单位是啥，是调用栈中函数的个数，还是一个存储单位，比如MB之类的。如果调用栈中就一个函数，这个函数的参数有100万个，浏览器端依然会溢出，看起来是存储单位，但是没得到验证。**
+
+答：这个似乎并没有什么特别规定，我知道JSC里面这个东西是可以用C++代码来调整的，至于浏览器调用JavaScript引擎的时候会怎么做，还真不好说。
+
+不过，从编码风格上建议，不要把这种事情用函数解决啦，真要干这样的事，数组可能都不合适了，请老老实实写ArrayBuffer吧。
+
+**15.老师您好，我一直有一个困惑，浏览器的鼠标事件是怎么识别到的，是碰撞检测的吗？**
+
+答：这个问题很不错，我后面在浏览器API的事件部分会详细讲，可以先简单说一下，这里的检测方式是从外到内，逐级分配给子元素，所以我们的事件会有捕获过程。
+
+**16.有个问题，如果我javaScript代码改变了DOM树元素的位置，需要启动重新排版（位置改变的元素只会影响其他部分元素的位置，甚至不影响其他元素的位置。），这时会导致这棵DOM树的所有元素都需要重新排版、绘制和渲染吗？**
+
+答：排版应该是会重新排的，但是如果有些元素的尺寸没有改变，那么它内部不需要重排，当然也就更不需要重新渲染了，但是绘制应该是要重绘的，目前来看，浏览器还没有那么智能。
+
+**17.老师，我是12年左右踏进半只脚到前端领域的，后来考研就放弃了，觉得前端不够高深，和传统工程师来说觉得门槛低很多，甚至前期我都觉得自己不是个程序员。**
+
+**直到研究生毕业，才又选择前端，这是三大框架风靡，我却有点迷惘，感觉和自己认知的前端不一样，直到现在工作了差不多两年，才悟出了点道道。**
+
+**作为工程师，我始终觉得前端也应该熟练算法和数据结构、数据库这些所谓的后端知识，但是平时工作场景中用到又少，不知如何学习？**
+
+答：算法和数据结构可不是什么后端知识呀，是所有程序员的基本技能。
+
+算法主要是靠大量练习提高，数据结构可以一个一个学习，不要指望工作中用到恰巧就学了，毕竟学习要教学费而工作是领工资的，哪里会有这样的好事呢，所以还是自己多多练习呀。
+
+**18.重学前端是夯实前端基础，那前端进阶方向在哪里?还是一定要修一门后端语言扩展服务端，希望老师可以指点迷津。**
+
+答：我觉得任何编程相关岗位的进阶方式都是做出某某东西，而不是学会某某东西。我会在专栏课程的第四模块会讲到一些进阶可能的方向，你可以关注一下。
+
+**19.我主业是后端，工作中也会带着做前端，自认还是能完美还原设计师的设计。但是现在感觉很多时候提前端就是vue等，而我还是在用jQuery，想请老师说说看，我是不是落伍了？**
+
+答：落伍的问题不是你用什么框架，而是你在做什么东西，学什么东西。
+
+框架不是赶时髦，追潮流，每个框架都有解决的问题，我觉得你该焦虑的不是你用的框架为什么这么老，而是你该知道这些新框架要解决什么问题，以及这些问题为什么在你的工作中不存在。
+
+**最后，我们来看看我在JavaScript类型那一篇中给你留的实践问题。**
+
+**如果我们不用原生的Number和parselnt，用JavaScript代码实践String到Number，该怎么做呢？**
+
+答：其实这个问题我在后台没看到特别满意的答案，好像大家都很喜欢偷懒啊。
+
+我这里给你留个例子，处理十进制整数。
+
+```
+function atoi(a){
+    let chars = a.split(&quot;&quot;).map(e =&gt; e.charCodeAt(0) - &quot;0&quot;.charCodeAt(0));
+    let n = 0;
+    for(var char of chars) {
+        n *= 10;
+    	n += char;
+    }
+    return n;
+}
+atoi(&quot;1001&quot;)
+
+```
+
+我比较期待大家有人能写出来带小数，甚至带科学计数法的代码，你可以尝试一下。
+
+好了，今天的答疑环节就进行到这里，你也可以把自己想要解答的问题留言。
+
+
--- a/极客时间专栏/重学前端/特别加餐/期末答疑（一）：前端代码单元测试怎么做？.md
+++ b/极客时间专栏/重学前端/特别加餐/期末答疑（一）：前端代码单元测试怎么做？.md
@@ -0,0 +1,254 @@
+
+你好，我是winter。
+
+我们专栏课程的知识部分已经告一段落了。今天，我来集中解决一下大家在学习中遇到的问题，我争取用快问快答的形式，咱们多回答一些问题。
+
+**1. 前端代码单元测试还是非常有必要的，不知道老师这一块是怎么做的，能否分享一下？**
+
+答：关于单元测试这件事，虽然在业务代码我没做成功过，但是它在框架和基础库开发中起到了非常积极的作用。
+
+我们平时写代码也肯定写一部分就要运行一下试试，其实这种行为就是单元测试，只是我们把很多自动化的内容，用人肉执行了，并且没有保存和管理case，也没有统计code coverage。
+
+只要选择一个好的单元测试框架，单元测试成本其实不高，尤其是比较复杂的底层库，引入单元测试不但不会消耗时间，还会提高效率。
+
+所以我认为单元测试要实行，有两个关键点你要格外注意：一是出一套好的单元测试方案，二是在基础库和框架开发中引入单元测试。
+
+**2. 关于Undefined ，如果一个变量没有赋值后面又赋值，这个过程就是“变量会被篡改”的意思么？而null 为什么又不会被篡改？一个变量开始定义为 null 然后赋值其他数据这个过程不算篡改吗？**
+
+答：undefined是个全局变量，null是个关键字，在一些版本比较旧的浏览器上，你可以试试：
+
+```
+undefined = 1;
+
+```
+
+但是你在任何版本的浏览器上，都不能这么干：
+
+```
+null = 1; 
+
+```
+
+这样的话，上面这个代码就会报错了。
+
+**3. winter老师你好，我们公司的前端是Node.js写的，如何做性能监控呢，如何做页面加载优化呢，我对您的页面性能打分系统很感兴趣，能详细讲一讲吗？谢谢了。**
+
+答：首先，Node.js写的是服务端代码跟前端性能没有任何关系，Node.js的性能监控比前端性能监控复杂得多，你可以了解下alinode。
+
+前端性能打分可能主要包含几个部分。
+
+- 图片：检查图片数量和图片大小，比如单个超过50k，总量超过400k的图片就要注意了，如果检查到小图片，也可以建议用data uri内联。
+<li>请求数：检查请求数，检查是否有独立的JS、CSS请求，这些都是潜在的优化点。<br>
+域名：检查域名是否有在http dns的范围内，检查域名数量是否过多，检查资源文件域名是否属于CDN。</li>
+- 实际加载时间：如果测试环境加载时间过程，也可能说明一些问题。
+- 缓存：检查静态资源是否设置了正确的缓存。
+
+你可以自己动手试试。
+
+**4. 有一个疑惑是，大小写的两个属性有什么区别呢，比如：**
+
+```
+Screen，screen
+Event，event
+
+```
+
+答：这里面大写的是类，小写的是对象。
+
+**5. 我还是比较认同，从左往右匹配的规则，这样就像老师讲的可以在构建DOM树的同时来进行匹配CSS规则，相当于同时构建渲染树了，而不必等到DOM构建完毕再进行CSS的规则匹配。**
+
+**进行构建渲染树，虽然从右向左匹配对于复杂的选择器更优，但是这里面浪费了等待DOM构建完毕，才能使用的CSS匹配规则。而且相对于同为id等单一选择器而言，明显从左向右更具有优势！这是我的一点想法，望老师指正！**
+
+答：其实我在[之前的分享](https://v.youku.com/v_show/id_XMjMzMzU2NDc2.html?spm=a2h0k.11417342.soresults.dtitle)中做过一个试验，当时的Chrome确实是从右往左，如果#id在最左，速度会更快，但是那个过程是后添加CSS的情况。
+
+**6. 程老师你好。我在很多地方看到的说法是：CSS会阻塞DOM渲染，但不会阻塞DOM的解析，且CSS文件的请求是异步请求。**
+
+**那么如果按照您所说，DOM的构建和CSS属性的计算是同步的话，head中CSS文件的下载以及CSSOM的rule部分的构建，应该会阻塞HTML的解析和DOM的构建。好像这两种说法之间就有了冲突。麻烦程老师有空的时候可以帮忙解释一下，万分感谢。**
+
+答：其实你误解了我的意思，DOM构建的结果到CSS属性计算是个流水线，所以CSS会阻塞CSS计算，不会阻塞DOM构建。
+
+**7. 老师，我记得有的书上或者是资料上说超过五次的if else 就最好用 switch case来替换。这样效率更好。您这里为什么说不用这个呢？**
+
+答：我在性能部分讲了，“凡是不做profiling的性能优化都是耍流氓”。
+
+具体的话，你可以看一看“[43 | 性能：前端的性能到底对业务数据有多大的影响](https://time.geekbang.org/column/article/94156)”这一篇。
+
+**8. 函数调用和函数执行有什么区别？ 有没有相应的标准？**
+
+答：我们一般讲“A函数调用了B函数”“浏览器执行了B函数”，所以你看，两者的区别是主语不同，你可以感受一下区别。它们对应的标准都是ECMA262。
+
+**9. 请问下老师，为什么flexible布局方案不再维护了呢？这个方案本身存在问题吗？**
+
+答：不存在问题，但是rem计算是个历史方案，现在，我比较推荐大家使用vw。
+
+**10. 有的工业软件，3D建模的也可以用浏览器来实现了，用的是ThreeJS WebGL，老师了解这些嘛？怎么看待这个发展前景。**
+
+答：挺好的，但是我觉得这件事由本来做3D的工程师转型更方便。
+
+**11. 最近出于好奇，我clone了github上chrome的源码仓库，发现竟然有12G多，貌似比linux内核的源码还多。个人特别想探索一下浏览器源码，但面对如此庞大的代码，不禁望而生畏，也不知从何下手。**
+
+**请问老师，浏览器内核源码该如何去研究，skia渲染引擎是最先进吗，svg，canvas，WebGL该如何选择，怎样深入地学习和掌握它们呢？望老师拨冗答疑，谢谢！**
+
+答：你先编译通过吧，然后试着跑起来打断点这样子，其实这件事没有捷径，多花些时间就可以。
+
+skia引擎是不是最先进，这事我也不好说，其实在工程领域我们一般不追求“最先进”，我们只需要它“足够先进”。
+
+关于如何选择，我收到了很多问题，不过我其实都不做回答，毕竟我没法替你决定你自己的职业发展道路，这个责任实在是有些重大了。
+
+**12.看完老师列出的表格更迷茫了，比如，为什么transform属于level 1，transform不是CSS3里的属性么？level4是什么？是CSS4么？为什么color这种常用属性属于level4?不应该属于level1么？好迷茫哦。**
+
+答：我先解释一下你的问题，一方面，level4里有不等于level3里没有，另一个是，W3C定level并不是十分严谨，有从1开始，也有从3开始的。
+
+除此之外，我想提醒一下，这个表格并不是给你去看level的，而是告诉你标准在哪里，让你去读标准的。
+
+**13. 请问老师，我后台用的是Tomcat服务器，前端用ajax请求静态资源时会间隔会报412，也就是一次成功进入后台，一次报412，这该怎么解决呢？**
+
+答：理论上412意思是你浏览器的问题。从你提供的信息我没法给你解决方案，建议你可以搞一个最小复现环境去Tomcat社区问。
+
+**14.老师好，有个疑问： WHATWG 和 W3C 标准以哪个为准，这两个标准有什么区别？是不是相互不认可的。**
+
+答：这个问题比较复杂，WHATWG最初是几家不满W3C，出走搞出来的，后来被招安了把HTML5带回了W3C，不过两边出标准的思路还是不太一样，WHATWG是living standard，就是随时更新标准，没有版本的概念，我是个人会倾向于WHATWG版本，因为比较新，而且Chrome跟得比较紧。
+
+**15. winter老师好，可以给我讲一下那个presentational attributes ，有些看不懂。**
+
+```
+function showThis(){
+console.log(this);
+}
+
+var o = {
+showThis: showThis
+}
+
+showThis(); // global
+o.showThis(); // o
+
+```
+
+**我知道函数中的this是由调用函数的对象决定的，但这种理解总感觉是由结论推原因；老师能不能讲解下。**
+
+答：this是由调用函数的对象决定，这完全是个规定，没有什么原因。（你后面的问题我节选掉了，我其实没太理解到你想表述的意思，你看到了可以再给我留言）。
+
+**16. 喜欢使用let和const，看很多库里面，他们都喜欢使用const，并且推荐使用const，比如声明一个数组。**
+
+**老师能讲解下声明一个数组用let和const有什么区别吗？在操作数组时，都是往数组中push值，原先的变量并物理地址并没有发生变化，如果用let，和用const有什么区别，为什么const的性能会好一点？**
+
+答：性能好一些完全是乱说的，用const的话，可以避免你误把数组整个赋值掉，比较有安全感吧。
+
+1. **老师我有几个问题希望你回答：**
+
+**老师讲到：“注意，我们这里讲的渲染过程，是不会把子元素绘制到渲染的位图上的，这样，当父子元素的相对位置发生变化时，可以保证渲染的结果能够最大程度被缓存，减少重新渲染。”**
+
+- 缓存的是什么东西，位图吗？如何减少重新渲染的？
+- 是不是所有的元素都有对应的位图？
+
+**文中你举了两个例子，说如果只有一个位图，任何改变都会引起所有重新渲染。这个好理解，一个大位图就是一个单元，任何的改动相当于这个单元被变了，所以要重新创建这个，这样理解对吗？**
+
+**但是你下面又说如果不合并，每次还是所有的重新渲染。感觉说的很矛盾啊。希望老师能回答一下我的疑问。**
+
+答：缓存的是位图，父子元素位置变化时，因为子元素的位图被缓存，子元素不需要重新渲染，因为父元素的位图也被缓存，父元素也不需要重新渲染，只有父子元素合成起来的位图需要被渲染。
+
+你这样理解是对的，如果不合并，每次改点什么东西，都要重新逐级合成最终的大位图，也相当于重新渲染。
+
+**18. 老师，“当没有强制指定文字书写方向时，在左到右文字中插入右到左向文字，会形成一个双向文字盒，反之亦然。”这个能不能给个例子，不明白什么意思。**
+
+答：比如你在中文中插入几个阿拉伯语字符，阿拉伯语字符就会形成一个双向文字盒。
+
+**19. 看了您的流式数据的解释，是不是可以理解当看到页面渲染的时候，DOM是不是有可能都还没构建完成呢？即使是理论上，有这种可能吗？**
+
+答：渲染不但发生在DOM构建之前，甚至可能发生在你下载网页完成之前，比如你上个XX软件下载站，是不是下载链接还没见到，就看到广告了（你提到的网上的那段是别人写错了。我节选掉了）。
+
+**20. footer 也可以和 aside，nav，section 相关联(header不存在关联问题)，不存在关联问题是什么意思啊，不应该在header中使用吗？下面又说header中可以使用nav，老师的“关联”是什么意思啊？**
+
+答：因为footer有自己的语义，footer必须要指明是谁的footer，这样footer中的作者、地址才有意义，所谓的关联就是这个意思了。
+
+**21. 子元素的事件委托给父元素时，添加事件监听的第三个参数直接设置为true，在捕获过程就判断父元素上的事件目标会比冒泡好些嘛？**
+
+答：对，但是你需要在捕获阶段想办法知道事件具体发生在哪个子元素上。
+
+**22. 老师 如果我想更深入的了解移动端的兼容问题，有没有好的学习路线呢？**
+
+答：兼容问题不是学出来的，你想在山中苦修，自出洞来无敌手？手机早就更新好几代了。所以兼容问题必须靠实践，在一个需要兼容性的业务上，不断积累和更新兼容性知识。
+
+**23. 老师，我在理解SICP这本书的过程抽象和数据抽象的时候，代入到前端，比如生命周期、事件处理等更多是过程的抽象，能提出一些公用的过程，而数据抽象更多指的是组件内的数据定义、api的设计、高阶组件等。**
+
+**请问我这样理解对吗？或者说老师对过程抽象和数据抽象在前端中怎么理解的？如果理解得不对，有什么好的书或者文章帮助理解？**
+
+答：SICP讲的是很实在的编程技巧，在前端中对应的是变量、循环、条件这些东西，SICP是一本好书，你应该更认真地去阅读它。
+
+**24. 通过这个课程老师对于前端的划分为JavaScript、HTML和CSS、浏览器、工程实践几个部分。**
+
+- **疑问1：现在前端基本把Node也包括进来了，对于Node的知识应该怎么定位？**
+- **疑问2：Node属于后端的范畴了，是否应该去学习下java相关的后端体系？学习了后端的体系是否会反过来促进前端知识的学习呢。**
+
+**winter老师对这两个问题怎么看呢？谢谢。**
+
+答：Node属于后端，electron属于客户端，不论你学哪个体系，肯定对前端都有促进作用。
+
+但是，你不能认为懂了Node就懂了后端，懂了electron就懂了客户端，每个领域都可以很深入，知识本来就是学不完的，你能掌握多少只跟投入的时间有关，这道理是很简单的，与其困惑，不如把困惑的时间拿来学习，相信你会有所收获的。
+
+**25. 老师，CSS是如何依附在DOM树上的?是通过前面讲得Node实例来实现的?**
+
+答：在Node实例上添加属性，我在“[12 | 浏览器：一个浏览器是如何工作的（阶段三）](https://time.geekbang.org/column/article/80311)”讲到了，你可以返回去看看。
+
+**26.清楚为什么要使用语义化标签，是否有必要使用之前，很难让自己有动机去应用每个标签。另外标签新推出如何保持实时掌握最新的标签呢，如何解决浏览器兼容的问题？**
+
+答：对语义化标签，我是建议不必追求全部掌握，现有需求再找标签即可。
+
+**27. 老师您好，有个疑问想请教一下，为啥基于对象关联风格的面向对象并不是像模拟类的行为的面向对象那么流行呢？原型委托这种的不是应该更符合JavaScript语言本身的设计嘛？类似这种：**
+
+```
+var father = {
+a: 1,
+fn(): {
+return 123;
+}
+}
+var child = Object.create(father);
+child.fn(); // 123
+
+```
+
+答：大部分人在学校学的都是C++和Java，我就没见过教原型的，这是现实，没办法。
+
+**28. 老师，可否稍加解释一下执行上下文的分类? 网络上的文章说“ JavaScript 中可执行的代码可分为三种类型：全局代码、函数代码、eval 代码，对应三种执行上下文（全局执行上下文、函数执行上下文、eval 执行上下文）。**
+
+**在 ECMAScript 2018 中没有找到这种说法的依据。我的意思是，我不太清楚这些文章的说法是否正确，是否不够全面。**
+
+答：这个说法倒不能说不正确，但是严重过时了。
+
+现在ECMAScript 2018里面执行上下文非常复杂，你可以看看各种Record，重学前端课程里面也没有讲全。
+
+**29. 老师，在ES5之前版本规范中，会提及JavaScript的可执行代码分为全局、函数、Eval。但是在ES6之后版本规范中，再也不提及可执行代码的概念了，这是为什么呢？**
+
+答：其实这里是重构了一下表达方式，新加入了模块什么的。
+
+**30. 试过好多次，找了很多方法flex兼容IE9以下，每次都失败，有什么好的解决办法吗？**
+
+答：如果真有IE9兼容需求，我想只能单独写一份CSS了。
+
+**31. 请问大佬，如何冻结对象，一般什么样的场景可以用到？**
+
+答：Object.freeze函数可以冻结对象。一般都是写底层库，希望避免篡改。
+
+**32. **
+
+```
+new Promise(function(resovle, reject) {
+setTimeout(resovle, duration);
+})
+setTimeout(resovle, duration);和setTimeout(() =&gt; {resovle()}, duration);
+
+```
+
+**两者到底有什么区别，想不明白，求教。**
+
+答：这个区别不大的，第二种写法一般都是为了给resolve传参数，不过如果你不想给resolve传特定参数，为什么还要多写一个函数呢。
+
+**33. 我听JavaScript像听天书，怎么办，是不是要从0重新学起呀？**
+
+答：理论上，我的课程是把JavaScript的内容重新组织了一下，如果平时就在用JavaScript，我认为问题不大。如果这部分完全听不懂，可能说明确实基础薄弱，建议你从0学起。
+
+好了，本期的答疑告一段落，如果你还有其他的问题，或者还是没有弄清楚，你可以继续给我留言，我会继续解答大家的问题，并一起讨论。
+
+
--- a/极客时间专栏/重学前端/特别加餐/期末答疑（二）：前端架构中，每个逻辑页面如何可以做到独立发布呢？.md
+++ b/极客时间专栏/重学前端/特别加餐/期末答疑（二）：前端架构中，每个逻辑页面如何可以做到独立发布呢？.md
@@ -0,0 +1,143 @@
+
+你好，我是winter。
+
+上一期的答疑文章发布之后，同学们的热情很高，我在后台又收到了一批新的问题，今天我们继续来答疑。
+
+**1. 请问前端架构中，每个逻辑页面如何可以做到独立发布呢？**
+
+答：首先，我们要知道发布是什么意思，我们平时开发好一个网页，把它放到线上真实对用户服务的机器上，这个过程叫做发布。
+
+正常来讲，前端工程师发布的原材料是HTML，产出是一个线上的URL地址。
+
+各个公司的发布系统差异非常的大，有的是前端发HTML，有的是前端把代码给服务端同学，改成JSP之类的代码，再一起发布。
+
+对于逻辑页面而言，我们需要发布的从HTML变成了JavaScript，这个JavaScript代码的作用就是渲染一个页面的内容。同时我们线上还需要一个公共的HTML文件来运行这些JavaScript。
+
+最后这些JavaScript文件只要能够做到独立发布，我们就可以认为逻辑页面是独立发布了。
+
+**2. 对于一个后端开发者来说，前端最困难的东西永远是CSS布局而不是JavaScript，我们对CSS有很大畏惧和恐慌在于：CSS没有很好的调试工具能解决问题，即使chrome dev这样的顶级debug工具，有时候也很难解释诸如“为什么页面上的这个盒子在这个地方”这样的问题。感觉CSS完全不符合编程的思路，老师有没有办法缓解一下这个问题？**
+
+答：其实我在课程中已经解释过了，早期的CSS从思路上来说就很别扭， 任何人都会觉得别扭，现在有了Flex布局，我认为这个问题基本可以算解决了。
+
+**3. 最近一直在研究前端性能优化和线上错误收集，收效甚微，老师可以讲解一下大厂是怎么处理的吗？**
+
+答：这一部分，首先你需要一个比较通用的日志服务，能接受前端用HTTP请求的方式打一些日志进去，一般公司都会有这样的系统，如果没有，就需要新建一个，这部分比较麻烦，需要一定的专业知识。
+
+有了这个日志服务，剩下的就是在每个前端页面插入一个JavaScript代码，监听Window.onerror可以得到错误，取window.performance可以得到性能，拿到以后，打日志就行了。
+
+至于后续怎么去展示，展示了以后又怎么去推动执行，这块就需要你自己根据公司实际情况去找到解决方案了。
+
+**4. 老师，想问一下用float排版的时候margin值在不同的浏览器中会显示不同，是什么原因导致的呢？**
+
+答：我是从IE6时代过来，我还真没听说过margin值有什么兼容问题，你可以拿具体的案例来，我们一起看一看。不过我建议早日切到flex，我们不要在没价值的事情上浪费生命。
+
+**5. 把链接分为超链接类和外部资源类是您自己的理解么，还是官方有这种分类呀，我没找到。老师可以说一下么？**
+
+答：不是，链接这个概念来自HTML标准（4.6.1位置）。
+
+- [https://html.spec.whatwg.org/](https://html.spec.whatwg.org/)
+
+我在HTML的部分都在讲这个问题，你可以关注一下。
+
+**6. 老师，关于线上监控的数据采集和数据显示您有好的插件或者方案推荐？**
+
+这个其实没有现成的，这个东西，如果公司从数据安全的角度考虑，一般都不让用第三方的。
+
+**7. 老师提到原生构造器无法继承。而[阮一峰老师](http://es6.ruanyifeng.com/#docs/class-extends)表示，es6已经可以继承原生构造函数，并且能定义子类。以我的理解来看，阮一峰老师的说法没有问题。不知道老师怎么看？**
+
+答：我查了一下，你说的没错，还真是这样，这块我理解错了，我后面会迭代一下。
+
+**8. 活动页面样式风格多变，并且有些活动页面是存在交互和购买流程等交互，这些交互怎么做成模板化？**
+
+答：这个答案很简单，只要能传参数，就能做成模板化。
+
+**9. DOM树就是一种嵌套的数据结构吗？然后是渲染引擎将这个数据结构处理成我们看到的网页吗 ？**
+
+答：DOM树是嵌套的树形结构，渲染过程是把它变成位图，绘制过程是把它画到显示器上。关于这部分内容，你可以回顾一下浏览器原理部分的几节课。
+
+**10. 浏览器中大多数的对象都原型继承自Object，是否可以根据原型继承关系将Window上面的api绘制成一颗树？有了这些继承关系是否更容易理清这些全局属性呢？**
+
+答：API不止有类，也有很多函数呀。所有的函数API的原型都是Function.prototype，这不就没意义了么。
+
+**11. “宿主对象（host Objects）：由 JavaScript 宿主环境提供的对象，它们的行为完全由宿主环境决定。”**
+
+**但是下面对宿主对象的解释又是：“实际上，这个全局对象 windows上的属性，一部分来自 JavaScript 语言，一部分来自浏览器环境”。这并不像上面说的完全由宿主环境决定，这个怎么理解呢？**
+
+答：请注意看了，我这里讲宿主对象有个“们”字。
+
+所以，这里可不是对宿主对象的解释，这是对Window对象的解释。Window对象比较复杂，这块我没有详细讲，从JavaScript的Global Object的角度可以讲，浏览器部分还有个Window Proxy机制，我是觉得复杂又没什么实际意义就没有讲，你可以这样感性地理解一下：全局对象和Window对象合成了一个东西。
+
+**12. winter老师，我看到淘宝用了iframe标签，能给我讲一下这个标签的使用场景和注意点吗？**
+
+答：我可以简单告诉你一个口诀：手机上不要用，PC上除了历史包袱不要用。
+
+**13. 请问下，link preload 解析执行时机和构建 CSSOM一样吗，HTML从上往下解析到link preload才会解析执行？还是说并行解析HTML和preload？**
+
+答：从标准来看应该是可以并行，但是具体怎样这块需要看浏览器源代码确定。
+
+**14. 老师，在ES5之前版本规范中，会提及JavaScript的可执行代码分为全局、函数、Eval。但是在ES6之后版本规范中，再也不提及可执行代码的概念了，这是为什么呢？**
+
+答：它们还在，只是现在执行过程更复杂了，没法这么简单分类了。
+
+**15. winter老师，你提倡多继承吗？还是说尽量用聚合来解决问题？我看着ES6里面要实现多继承的方式也挺别扭的。**
+
+答：我不提倡多继承，Java也不支持多继承啊。如果你想抽象可以用接口来代替，想复用可以用Mixin来代替。
+
+**16. 我这里还有个问题，使用figureCaption标签后，img标签的alt属性可以缺失么？我一直觉得alt与src情同手足，什么都不应该把彼此拆散的。**
+
+答：不可以缺失，这是两个意思，figureCaption可能是“图1”这种东西，可不一定在描述图片内容。
+
+**17. 老师，style 既然也可以这么用`&lt;style&gt;css` 规则`&lt;/style&gt;`，为什么没有 `&lt;style src=“”&gt;&lt;/style&gt;`？**
+
+答：你这个设计得不错，但是估计有了link以后，HTML懒得把style改成replacement了吧。
+
+**18. 老师好，想请问下，业务场景中需要嵌入公司其他行业线的页面，这种不使用iframe该怎么办？**
+
+答：理论上应该让他们给你做个组件出来，但是如果实在没别的办法，就使用iframe吧。
+
+**19. 老师，目前有办法通过脚本反射的方式获取所有JavaScript原生对象吗？还是只能查文档？通过for. in 遍历全局对象是不可以的，因为这些JavaScript原生对象虽然挂到了全局，但是属于不可枚举成员。**
+
+答：我们现在可以用Object.getOwnPropertyNames，但是你symbol还是拿不到。
+
+**20. 老师，jquery ajax 同步请求的原理是?目前用axios库，不支持同步请求，如果希望执行同步请求有什么解决办法？**
+
+答：原理是XMLHttpRequest这个可以传第三个参数，但是我不建议你用同步请求，会把JS执行线程卡住。
+
+**21. 老师您好，把JavaScript代码缓存在 localStorage 中，从 localStorage 取出后怎么执行？ 如果缓存的是 CSS 呢？**
+
+答：执行JavaScript用eval，执行CSS用document.createElement(“style”)。
+
+**22. 请问：var,let 和 const 在 babel 中都会被编译为 var, 那怎么区分 const 是常量呢？**
+
+答：如果你用babel的话，就不要管编译后的代码。
+
+**23. DOM树构建与CSSOM构建有先后关系吗？CSS计算与DOM树流式构建同步进行是不是意味着DOM树流式构建之前，CSSOM已经构建完成呢？**
+
+答：我这里说的确实有点歧义，我在这里再厘清一下。CSSOM是有rule部分和view部分的，rule部分是在DOM开始之前就构件完成的，而view部分是跟着DOM同步构建的。
+
+**24. 老师能解释下这个么？**
+
+```
+var b = 10;
+(function b(){
+b = 20;
+console.log(b); // [Function: b]
+})();
+
+```
+
+答：这个地方比较特殊，“具有名称的函数表达式”会在外层词法环境和它自己执行产生的词法环境之间，产生一个词法环境，再把自己的名称和值当作变量塞进去。
+
+所以你这里的b = 20 并没有改变外面的b，而是试图改变一个只读的变量b。这块儿的知识有点偏，你仅做理解掌握就好。
+
+**25. 关于状态机这一块，我觉得是不是可以先讲一节正则的知识点呢。理解了正则，那么大家对状态机的概念就有了更加直观的理解了。**
+
+答：一般正则都是状态机实现的，讲正则对理解它底层的状态机并没有多少意义。
+
+当然了，词法分析也可以用正则来实现，我这里没有这么做而已，我写过一个JavaScript的词法分析是用正则做的，你可以参考这里:
+
+- [https://github.com/wintercn/JSinJS/blob/master/source/LexicalParser.js](https://github.com/wintercn/JSinJS/blob/master/source/LexicalParser.js)
+
+好了，今天的答疑就到这里，如果你还有问题，可以继续给我留言。我们一起讨论。
+
+
--- a/极客时间专栏/重学前端/特别加餐/用户故事
+++ b/极客时间专栏/重学前端/特别加餐/用户故事
@@ -0,0 +1,162 @@
+
+## 写在前面的话
+
+不知不觉，专栏已经更新了一半有余了。在两个月的时间里，我收到了很多同学的留言，很开心可以跟大家保持交流，也很惊喜见证了大家的成长。
+
+在整个学习过程中，你有没有一些学习感悟呢，有哪些新的学习收获，又有哪些实践感悟？有没有对前端的知识架构有了更为深刻的认识，是否规划好了自己的前端之路。
+
+如果你有想分享的经验，可以在文章下留言，如果你的留言被选中作为用户故事，我们将会为你送出“极客时间”&amp; winter联名T恤一件。分享你的收获，我们一起成长。
+
+<img src="https://static001.geekbang.org/resource/image/aa/b3/aae94a1c13a5fefa7238999e271b82b3.png" alt="">
+
+下面我们就一起来看看三位同学的分享。
+
+## 极客时间用户@阿成 分享
+
+在我进入知乎社区的时候，winter 老师就已经不在这个社区了，虽然是退隐了江湖，但是江湖上还流传着他的传说，后来我在 Google Feed 中看到 winter 老师的开篇词，看完就感觉是我要的东西，还正好赶上打折，就毫不犹豫地买了。
+
+我本科学的是光电信息，所以并不算是科班出身的程序员（虽然也有学C啦）。我本身对计算机程序一直很有兴趣，所以从大三开始，我就决定放弃从事本专业，做一名程序员。要说为什么选择前端领域，自然也是烂俗的“门槛低”理由。
+
+不过，我没想到的是，前端的学习曲线到后面是如此陡峭，并且前端发展的速度如此之快，让人目不暇接，也让很多人产生了“技术焦虑”。
+
+在这样的环境中，我也产生了迷茫，作为一名前端开发人员，我到底应该学什么，怎么学。毕业后两年多的时间里，我从使用原生的HTML/CSS/JavaScript，到现在流行的视图库Vue/React，看似我好像学会了很多，但是离开这些库，或者说将来这些库被淘汰了，我又剩下了什么呢？
+
+**我逐渐意识到，我需要的可能是一些更“底层”的东西。**
+
+那么,什么是“底层”的东西呢，这里可不是指计算机底层，而是指不会被淘汰的东西，永远有用的东西。我认为对于任何程序员来说，最重要的就是：迅速获取某项知识的能力以及动手解决问题的能力。
+
+**前者需要我们建立自己的知识体系，也就是winter老师在第一讲中提到的，我们需要完善的知识架构。**
+
+我们不需要也不可能记住整个架构的知识，但我们却可以在需要的时候想起来这块知识的位置，是干什么的，能帮我们解决什么样的问题，可以通过什么关键词检索到，这就够了。
+
+其实你让我回忆winter老师这么多节课的所有内容，我也是好多想不起来的，但多少都留下了印象。我们的大脑容量是有限的，所以“按需加载”也许对人脑也是个不错的策略。
+
+**后者其实就归功于winter老师精心设计的课后题，光看这些课文总归是差了点什么，只有你动手去做，才能真正理解这节课所讲的内容。**
+
+在做的过程中，你多半会遇到困难（这其实也是winter老师的本意），如果你通过努力解决掉了，这个提升才是最大的。你的方案不一定是最好的，或者你可能实在没什么头绪，这时候也可以利用搜索引擎去看看别人的方案。
+
+因为我早上到公司要坐一个小时左右的公交，路上我基本上会用耳机听完课（不伤眼），然后剩下的时间去思考回顾一下，想想作业怎么完成。
+
+在中午吃完饭休息的时候，动手做一下，有时候时间不一定够，就利用晚上和第二天的时间完成。每个人的情况都不一样，不过，想要有收获，就得付出多一些。
+
+希望大家都能学有所成，有所收获。
+
+## 极客时间用户@峰峰峰  分享
+
+先感谢极客时间给了我这次学习分享的机会，如果文中有不足之处，希望小伙伴们可以多多指导。
+
+我是转行过来学习前端的，目前在前端这个岗位上工作了大概一年半的样子，最初知道重学前端这个专栏，也是因为朋友圈里面的一些大牛分享的，比较好奇，并且老师又是非常有名的winter老师，就报了这门课程。
+
+我本人是对前端的技术非常感兴趣的，尤其是原生基础知识，因为我觉得一个人基础的扎实程度，能决定这个人在这个领域所能发展的高度。
+
+刚开始看到课程目录的时候我很吃惊，因为这个目录和我之前所学的所有的课的目录都不一样，从文法、运行时的角度去解释JavaScript这门语言，这让我非常兴奋，因为我知道，这正是我所需要的。
+
+通过跟随winter老师不断学习，我发现这把我原有的一些知识结构打乱了，但这并不是坏事，因为我以前的学习和知识结构都非常的混乱。
+
+通过这次学习，让我对JavaScript的理解更加深入了一些，同时，重新梳理我的知识点也让我的知识结构更加的清晰了起来。
+
+可能是我工作时间尚短的原因吧，我觉得老师的每一节课对于我来说都是一个新的东西。举个例子，就拿第3讲和第4讲来说吧，标签语义化我一直都知道，但是我在工作中用得很少，并且在理解上也只停留在非常浅的层面上，但是通过老师的讲解，让我理解到了语义化标签真正的含义。
+
+我现在在工作都会开始使用一些我比较熟悉的语义化标签。包括一些浏览器的工作原理，关于JavaScript这门语言是面向对象还是面向类的解释，以及JavaScript的执行等等，这些知识点都让我受益良多，非常感谢winter老师，希望以后还能有机会跟着老师继续学习。
+
+最后，分享一下我的学习方法吧。
+
+1. 先提升知识的广度，再去拓展知识的深度。
+1. 养成随时记录的习惯，可以是笔记，可以是代码（一定要写上注释）。
+1. 多逛逛技术论坛，有条件的情况下多去实验一下论坛中自己感兴趣的代码。
+1. 最后一条也是最重要的一条，坚持每天八小时工作外的学习和锻炼。
+
+以上就是我的学习心得，不足之处还请多多见谅，希望对小伙伴们有帮助。
+
+## 极客时间用户@木易杨 分享
+
+我看了老师在“极客live”的直播，总结了他提到的一些观点。
+
+<li>
+对于框架的使用没必要花太多时间，应该多研究一下三大框架背后的设计思想。
+</li>
+<li>
+当一个程序员对算法、语言标准、底层、原生、英文文档这些词汇产生恐惧感的时候，他的技术生命已经走到尽头。
+</li>
+<li>
+前端架构主要解决的是高复用性，架构能力提升方向主要是组件库开发、前端框架实现等。
+</li>
+<li>
+对于前端进阶这个问题，其实看书的作用和意义已经不太明显，需要寻找好的平台和合适的项目，在项目中不断克服难题并挑战自己，遇到问题再去查资料总结。如果只是闭门看书那很难成为高手，书只是基础而已，真正的应用还是在项目中。
+</li>
+<li>
+寒冬中能做的只有提升自己，但是光靠技术是不行的。
+</li>
+<li>
+推荐 TensorFlow、可视化切图、PWA、WebGL。
+<ul>
+1. TensorFlow 可以了解使用并做点东西出来，原理很难但不影响使用。
+1. PWA 有望进一步发展。
+1. WebGL 在未来会是一个很好的方向，它可以实现任何你想要的界面效果，但重点需要多掌握图形学的基础知识，它和算法，数据结构一样重要。
+1. Weex和 RN 虽然都叫 Hybird 但不太一样，前者适合大厂主要是嵌入 APP 中使用，后者更适合创业公司。
+</ul>
+</li>
+<li>
+不推荐 SSR、TypeScript、函数式编程。
+<ul>
+1. SSR 不太看好，其主要是用于SEO，不太建议用做服务端渲染，其能够使用的场景不多，而且成本代价太大。
+1. TypeScript 是好东西，是很有前景的语言，但适用于十万行以上代码级别的大型项目，小项目并不适合，反而徒增复杂。
+1. 用 JavaScript 做函数式编程并不靠谱，Map/Reduce/Redux/Hooks等并不是函数式编程，只是长得像而已。
+</ul>
+</li>
+
+- SSR 不太看好，其主要是用于SEO，不太建议用做服务端渲染，其能够使用的场景不多，而且成本代价太大。
+- TypeScript 是好东西，是很有前景的语言，但适用于十万行以上代码级别的大型项目，小项目并不适合，反而徒增复杂。
+- 用 JavaScript 做函数式编程并不靠谱，Map/Reduce/Redux/Hooks等并不是函数式编程，只是长得像而已。
+
+PS：笔记内容由自己和群友提供，仅供参考。
+
+### 我的一些思考和尝试
+
+听完 winter 老师直播后对其观点很是赞同，但因为是面对所有人讲解，所以内容有点多范围有些广，但对个人来说还是找适合自己的方向，在自己相对熟悉的领域再去扩展去突破。横向只是拓宽你的眼界，纵向才是你的核心竞争力。
+
+对我来说感触最大的就是 3、4、5 这几点，因为我一直在思考以下的几个问题。
+
+1. 我现在是高级前端，但又感觉自身很弱，那我如何才能夯实我高级的地基然后成为资深前端呢？
+1. 项目迭代节奏快日常加班又多，那我如何做才能平衡工作和学习？
+1. 单单提升技术好像还是有很大瓶颈，那我如何提升我的职场核心竞争力？
+
+结合 winter老师的专栏和最近看的几篇文章，说说我对这几个问题的思考。
+
+对于第一个问题，在 2 个多月前我还是不会写文章的小白，那个时候受到一些文章的触动，尝试把我的前端之路记录下来。
+
+我的想法很简单，就是把前端进阶 28 期的重难点知识全部讲完，目前已经进行到第 4 期了，通过写作把知识通俗易懂的介绍给别人，在这个过程自己肯定会收获很多很多。
+
+这就是我目前在尝试的学习方式，通过写作建立自己的知识架构，并且在这个架构上不断地进行优化，时间到了自然就进阶了。
+
+对于第二个问题，刚开始写作时精力充沛时间也很多，每天都会更新技术文章，但随着项目迭代压力增大，文章更新速度相应就变慢了一些。
+
+虽然文章质量提升了很多，但更新速度从日更变成了周更再变成了双周更，这个说实话我自身已经很难接受了，因为速度变慢导致我年初的计划要打折扣。
+
+所以说做项目和自我学习要如何权衡，是否说我要减少项目难度和时间并在工作中摸鱼去学习呢？
+
+我的结论是不，因为一句话，“最好的学习就是在项目中锻炼自己”。既然我有这么好的项目去锻炼，那为什么还要摸鱼去学习呢，这不就是南辕北辙嘛，道理很简单但不是所有人都懂。
+
+我最近在执行的方法是专注 + 锻炼 + 利用周末。
+
+专注即工作时专注于工作，努力做好每次迭代，遇到难题迎难而上，工作时不开微信，勤用笔记安排日常工作并整理文档。
+
+锻炼即一周抽出三天时间每次去健身房锻炼1小时，强壮的体魄才能撑住高强度的工作和学习，因为网易有健身房所以冬天锻炼也没什么问题，没办法去健身房的小伙伴可以尝试跑步或者在瑜伽垫上做 Keep。
+
+利用周末即加大周末和平常晚上熬夜的时间去写文章，减少娱乐的时间，正所谓时间挤一挤总会有的，但这件事情比较反人性，所以重在坚持。公众号写文章更容易坚持，原因在于文章发布后有正反馈，比如粉丝的增长，留言和鼓励，赞赏等等，这些都更能促使你坚持下去，时间长了自然就养成了习惯。
+
+对于第三个问题，winter 老师也说了，寒冬中光靠技术是不行的，那应该靠什么呢？幸好在最近看到的一篇文章中找到了答案，那就是表达能力。
+
+表达能力是形成自己的框架系统，有理有据并且逻辑清晰，而且能让外人听懂，大部分优秀的人都具备这样的能力。反观自己并没有这样的能力，所以我要努力提升这块，其中最重要的方法就是写作训练。
+
+兜兜转转那么多，其实我一直在尝试的进阶方法就是通过写作建立自己的知识架构体系，同时提高自身的表达能力，通过正反馈机制和锻炼保证我长久的坚持下去并最终养成习惯，习惯这一模式之后变成优秀的人也只是时间问题罢了。
+
+希望我的一些思考和尝试能对你有所帮助。
+
+（直播回顾：[https://v.qq.com/x/page/x0830fc8xoj.html）](https://v.qq.com/x/page/x0830fc8xoj.html%EF%BC%89)
+
+恭喜幸运用户&nbsp;@阿成、@峰峰峰、@木易杨，你们的经验被选取成为本期的用户故事。极客时间将送出“极客时间”&amp; winter联名T恤一件。1个工作日之内，工作人员会与你取得联系。
+
+读完了三位同学的故事后，你有哪些感受呢，留下你的收获，我们一起成长。
+
+
--- a/学了这么多前端的“小众”知识，到底对我有什么帮助？.md
+++ b/学了这么多前端的“小众”知识，到底对我有什么帮助？.md
@@ -0,0 +1,76 @@
+
+你好，我是winter。这一期我想跟你谈谈前端知识的学习姿势。
+
+课程进展至今，我已经把大部分困难的知识点都讲完了。我在后台收到了一些留言，有的同学针对前端专栏的学习方法和学习方向提出了一些问题，在本期文章中，为了让同学们更好地理解我们专栏的重点，最大程度地吸收知识，在今天的文章中，我会逐一回答同学们在学习方法上的困惑。
+
+### 1.老师讲的内容是不是工作中用不到的，对掌握前端的实际工作有什么帮助呢，我们有必要掌握这些比较偏的内容吗？
+
+我自己一直奉行着一个观点，不要执着于知识的“临时”实用性。因为我总是感觉，掌握知识越多的人，更喜欢花费时间学习一些暂时可能无法变现的知识，原因有两点：一是其实学知识花费的时间比想象中的要少，这边在纠结它有没有用，那边可能都学完了；二是知识的实用性其实不怎么好判定，比如当年黎曼搞出非欧几何的时候，全世界都觉得纯粹是数学的思维游戏，直到黎曼死了很多年后，相对论出世，黎曼几何有了实际用途。
+
+不过，这里我还是希望讲清楚，我想通过我们的课程传达一些什么样知识内容。
+
+我们的每一节课标题中，都会带一个有点“小众”的问题，但是，实际上，这个标题主要是引起你学习兴趣的一个引子，解决问题只是我们学习课程的一个自然结果。
+
+**我希望的是，通过这个有点偏的问题，引起你对这部分知识领域的关注，知道这部分知识的边界在哪里，从而形成一个完备的知识网络。让你在遇见不会的问题时候，可以快速定位到知识点，达成有效学习。并且，你也可以通过自己之前没有关注过的不同视角，来重新学习一遍这部分的知识。**
+
+比如在JavaScript课程中，我提供了几个不同的视角来讲解JavaScript语言，每一个视角下，都是完整的JavaScript知识。
+
+比如说，当我们写下 1+1 的时候，我们从词法的角度看，这是两个数字直接量和一个加法符号，我们从类型的角度看，两个Number类型相加得到的也是Number类型，我们从语法的角度看，这是一个加法表达式。
+
+我们从不同的维度去认识了JavaScript语言，这些视角，远比你记住我们课上讲的细节更重要。如果你记住了“数字直接量可以用科学计数法，E还可以小写”，却没有学会从词法的角度去分析JavaScript语言，那可谓是“入宝山空手而归了”。
+
+### 2.我从业时间不长，文章看得迷迷糊糊，是我的基础不够吗？该怎么办？
+
+有一种说法，世界上的知识分成“我知道的”“我知道自己不知道的”和“我不知道自己不知道的”。
+
+重学前端定位是有一定经验的前端工程师，所以它最重要的作用之一，就是帮助前端工程师发现问题，找出知识盲点。
+
+**课程设计上，我的主要思路也是“帮助”大家形成自己的体系，而不是“替”大家形成自己的体系。我在前言部分就讲到过，若论丰富全面，有MDN文档；若论准确权威，有标准文本，但是，我们课程的作用是传达思路，如果有知识上的缺失，你其实可以通过阅读MDN来补全。**
+
+### 3.如果阅读文章时候有的内容看不懂，该如何学习，如何定位这块的知识呢？
+
+这个问题比较抽象，我认为这个课程设计其实也是一种定位了。
+
+比如，对JavaScript问题，先搞清楚看不懂的是词法问题、语法问题、还是运行时问题？定位清楚了问题，你已经距离解决问题前进了一大步。
+
+**在这里，我想跟大家说一下：如果你看不懂文章里的某一块知识，你可以给我留言，把具体的位置和知识点告诉我，这样我们可以进行更好的沟通和反馈，从而解决这个问题。如果你只是说不懂，我可能会一头雾水，也无从下手去帮助你解决问题。多做实时、有效的反馈，会让知识吸收的效果更好。**
+
+### 4.为什么文章里有那么多的术语和英文呢，为什么不换成更通俗的名字呢？
+
+其实，在我们的课程中，有很多次讨论到术语问题，比如“排版”，我们讲了中国古代的活字印刷，比如“渲染”，我们讲到了国画的技法。恰当地使用术语，对于传达知识是非常关键的。
+
+翻译是一项很专业的工作，文学类的翻译讲究信、达、雅，对于技术类的名词，或许“雅”这方面可以稍微打点折扣，但是表意清晰，字句通达仍然是必须的。
+
+很多术语有约定俗成的翻译，当我们阅读不同的文档时，可以快速地通过术语建立联系。并且，有的时候翻译本身也会造成一部分信息的丢失，所以，我有时会直接把英文也写出来，这样有助于你通过原文去理解和对照。
+
+而为什么我不把术语换成更通俗的名字呢？
+
+我们所讲的多数技术，跟现实生活联系不大，这种情况下，“通俗”的名字往往意味着误导。有时候，我们确定术语时，反而会尽量使它远离已有的概念。当然，确定术语并非是我的工作与专长，我们课程中的绝大多数术语，都不是我的发明创造。
+
+### 5.标准里有些东西还是看不太懂，如果可以的话，希望老师可以稍微讲解一下如何看懂标准？
+
+我并不推荐每一个前端工程师都去阅读标准，标准一半是写给实现者，一半是写给使用者，这里本来就有很多知识上的落差，多数时候，MDN是更好的选择。
+
+如果一定要阅读标准，建议从自己做一个极简实现开始，我在浏览器部分，有讲解浏览器相关的知识，在JavaScript部分，我还设计了编译原理实验。我想，把它们落到代码上会是一个很好的开始。
+
+### 6.接手了一个新项目, 怎么对前端合理规划, 老师能不能提供一些这方面的指导和建议？
+
+这个问题其实跟前端学习关系不大，但是我可以讲讲。
+
+任何规划其实都差不多，得有背景、目标、方案、计划、预期结果。其实在我看来，“项目”是规划的最小单位，在项目中拆出前端来做规划，是不太合适的。
+
+背景和目标通常来自公司的业务，方案跟具体的技术相关，计划是项目管理的领域，最后根据这些来给出预期结果。
+
+再往下细说，一个完整的方案可能包括产品、运营、市场、技术，不同的项目，各个职能的难度不一样，有些项目可能干脆不需要某些方案——比如多数淘宝的产品，首页开个入口就有访问量了，不需要独立去做市场。
+
+具体到技术方案，前端、后端和公司的基础设施都有一定影响，有些公司会找一个架构师来做整体方案，有些公司则是哥几个商量一下边做边出，其实因地制宜最重要，能达到目标的方案都是好方案。
+
+有了整体方案，到前端的一亩三分地上，技术选型、工程规范是绕不开的，有些公司有统一的前端团队，框架和工具都定好了，那么项目里面，就剩下分工和代码设计问题了，也有些公司有些项目具有特殊性，需要特别定制。
+
+实际上，我很难给出具体的“框架选Vue”，工具用“webpack”这样的建议，因为工程领域本来就是需要很多妥协和权衡的。
+
+不过，在我们课程的最后一部分，我选择了几个典型的基础设施和体系来讲，会给你分享这几个领域中我的认知。
+
+在本篇文章中，我主要针对一些同学在学习上的疑问，给出了我的答案。你对前端的学习方法有什么样的困惑，欢迎给我留言，我们一起讨论。
+
+