每天 10 分钟，重构你的前端知识体系
告别零散技术点，搭建前端知识体系；
打通 JS、HTML、CSS、浏览器 4 大脉络；
40+ 前端难点完全解答；
大厂前端工程实战演练。

随着前端技术不断地发展，岗位需求与薪资一路攀升。整个前端业界正值“黄金时代”，而前端开发者们却似乎“学不动了”。

这缘于前端的学习是一条先快后慢的曲线。在快速入门之后，大多数人都会感觉：自己仅仅停留在会用的阶段，后面的学习之路似乎越来越陡峭，每前进一步都十分艰难。

其实是你没有意识到，你在自学的过程中走了太多弯路。

大部分前端工程师的知识，其实都来自于工作中零散的学习和实践。在这种情况下，学习方向一旦偏离，就可能导致基础不牢固，知识认知不清晰，难以建立完整的知识体系。

并且，如果所在公司业务简单，工程师更难以在实践中形成技术积累，这导致了自身技术长期处于非常初级的阶段。

专栏分为 4 大模块。

模块一，JavaScript ：这部分会按照文法、语义和运行时去讨论 JavaScript 语言。这样的划分符合编程语言的一般规律，即“用一定的词法和语法，表达一定语义，去操作运行时”。而且，这样的划分也整合了零散的知识点，具有完备性。

模块二，HTML 和 CSS：这部分会侧重从语言和功能的角度来讲解，带你领略两者的全貌。HTML 的功能主要由标签来承担，所以我们首先会把标签分类，并分别进行讲解。语言部分，我们会简要介绍 HTML 的语法和几个重要的语言机制。在 CSS 的语言部分，我们会从大到小介绍 @rule、选择器、单位等等。功能部分，我们大致可以分为布局、绘制和交互类。

模块三，浏览器实现原理与 API：这部分会着重讲解浏览器的工作原理。我们会一起来了解：一个浏览器到底是如何工作的。并且，我们还会学习一些重要的浏览器 API，包括 BOM、DOM、CSSOM 等内容。只有了解了这些知识，你才能把 JavaScript 和 HTML、CSS 联系起来实现具体功能。

模块四，前端综合应用：作者会结合自己的前端工作经验，选择自己在手淘和淘宝工作中的一些案例来辅助讲解前端的性能、工具链、持续集成、架构等实际应用内容。

├──jk23201-重学前端

|   ├──01-开篇词+学习路线+架构图 (3讲)

|   |   ├──00丨开篇词丨从今天起，重新理解前端.html  1.42M

|   |   ├──00丨开篇词丨从今天起，重新理解前端.mp3  4.96M

|   |   ├──00丨开篇词丨从今天起，重新理解前端.pdf  1.67M

|   |   ├──01丨明确你的前端学习路线与方法.html  1.84M

|   |   ├──01丨明确你的前端学习路线与方法.mp3  5.18M

|   |   ├──01丨明确你的前端学习路线与方法.pdf  1.95M

|   |   ├──02丨列一份前端知识架构图.html  4.54M

|   |   ├──02丨列一份前端知识架构图.mp3  7.23M

|   |   └──02丨列一份前端知识架构图.pdf  6.71M

|   ├──02-模块 一：JavaScript (15讲)

|   |   ├──05丨JavaScript类型：关于类型，有哪些你不知道的细节？.html  1.89M

|   |   ├──05丨JavaScript类型：关于类型，有哪些你不知道的细节？.mp3  10.52M

|   |   ├──05丨JavaScript类型：关于类型，有哪些你不知道的细节？.pdf  2.27M

|   |   ├──06丨JavaScript对象：面向对象还是基于对象？.html  1.29M

|   |   ├──06丨JavaScript对象：面向对象还是基于对象？.mp3  7.07M

|   |   ├──06丨JavaScript对象：面向对象还是基于对象？.pdf  1.80M

|   |   ├──07丨JavaScript对象：我们真的需要模拟类吗？.html  2.00M

|   |   ├──07丨JavaScript对象：我们真的需要模拟类吗？.mp3  8.13M

|   |   ├──07丨JavaScript对象：我们真的需要模拟类吗？.pdf  2.15M

|   |   ├──08丨JavaScript对象：你知道全部的对象分类吗？.html  1.65M

|   |   ├──08丨JavaScript对象：你知道全部的对象分类吗？.mp3  8.24M

|   |   ├──08丨JavaScript对象：你知道全部的对象分类吗？.pdf  1.94M

|   |   ├──16丨JavaScript执行（一）：Promise里的代码为什么比setTimeout先执行？.html  1.72M

|   |   ├──16丨JavaScript执行（一）：Promise里的代码为什么比setTimeout先执行？.mp3  6.17M

|   |   ├──16丨JavaScript执行（一）：Promise里的代码为什么比setTimeout先执行？.pdf  2.01M

|   |   ├──17丨JavaScript执行（二）：闭包和执行上下文到底是怎么回事？.html  1.60M

|   |   ├──17丨JavaScript执行（二）：闭包和执行上下文到底是怎么回事？.mp3  7.24M

|   |   ├──17丨JavaScript执行（二）：闭包和执行上下文到底是怎么回事？.pdf  2.07M

|   |   ├──18丨JavaScript执行（三）：你知道现在有多少种函数吗？.html  1.66M

|   |   ├──18丨JavaScript执行（三）：你知道现在有多少种函数吗？.mp3  6.11M

|   |   ├──18丨JavaScript执行（三）：你知道现在有多少种函数吗？.pdf  1.82M

|   |   ├──19丨JavaScript执行（四）：try里面放return，finally还会执行吗？.html  1.96M

|   |   ├──19丨JavaScript执行（四）：try里面放return，finally还会执行吗？.mp3  5.24M

|   |   ├──19丨JavaScript执行（四）：try里面放return，finally还会执行吗？.pdf  2.11M

|   |   ├──26丨JavaScript词法：为什么12.html  1.49M

|   |   ├──26丨JavaScript词法：为什么12.mp3  9.42M

|   |   ├──26丨JavaScript词法：为什么12.pdf  1.66M

|   |   ├──27 （小实验）理解编译原理：一个四则运算的解释器.mp3  5.98M

|   |   ├──27丨（小实验）理解编译原理：一个四则运算的解释器.html  1.35M

|   |   ├──27丨（小实验）理解编译原理：一个四则运算的解释器.pdf  1.75M

|   |   ├──28丨JavaScript语法（预备篇）：到底要不要写分号呢？.html  1.49M

|   |   ├──28丨JavaScript语法（预备篇）：到底要不要写分号呢？.mp3  5.15M

|   |   ├──28丨JavaScript语法（预备篇）：到底要不要写分号呢？.pdf  1.70M

|   |   ├──29丨JavaScript语法（一）：在script标签写export为什么会抛错？.html  1.75M

|   |   ├──29丨JavaScript语法（一）：在script标签写export为什么会抛错？.mp3  9.25M

|   |   ├──29丨JavaScript语法（一）：在script标签写export为什么会抛错？.pdf  2.22M

|   |   ├──30丨JavaScript语法（二）：你知道哪些JavaScript语句？.html  1.94M

|   |   ├──30丨JavaScript语法（二）：你知道哪些JavaScript语句？.mp3  10.83M

|   |   ├──30丨JavaScript语法（二）：你知道哪些JavaScript语句？.pdf  1.97M

|   |   ├──31丨JavaScript语法（三）：什么是表达式语句？.html  1.04M

|   |   ├──31丨JavaScript语法（三）：什么是表达式语句？.mp3  6.31M

|   |   ├──31丨JavaScript语法（三）：什么是表达式语句？.pdf  1.54M

|   |   ├──32丨JavaScript语法（四）：新加入的运算符，哪里有些不一样呢？.mp3  6.96M

|   |   ├──32丨JavaScript语法（四）：新加入的运算符，哪里有些不一样呢？.pdf  1.53M

|   |   └──32丨JavaScript语法（四）：新加入的运算符，哪里有些不一样呢？？.html  1.26M

|   ├──03-模块二：HTML和CSS (16讲)

|   |   ├──03丨HTML语义：div和span不是够用了吗？.html  2.38M

|   |   ├──03丨HTML语义：div和span不是够用了吗？.mp3  7.61M

|   |   ├──03丨HTML语义：div和span不是够用了吗？.pdf  2.59M

|   |   ├──04丨HTML语义：如何运用语义类标签来呈现Wiki网页？.html  5.71M

|   |   ├──04丨HTML语义：如何运用语义类标签来呈现Wiki网页？.mp3  7.21M

|   |   ├──04丨HTML语义：如何运用语义类标签来呈现Wiki网页？.pdf  6.54M

|   |   ├──09丨CSS语法：除了属性和选择器，你还需要知道这些带@的规则.html  1.53M

|   |   ├──09丨CSS语法：除了属性和选择器，你还需要知道这些带@的规则.mp3  10.08M

|   |   ├──09丨CSS语法：除了属性和选择器，你还需要知道这些带@的规则.pdf  1.72M

|   |   ├──15丨HTML元信息类标签：你知道head里一共能写哪几种标签吗？.html  1.61M

|   |   ├──15丨HTML元信息类标签：你知道head里一共能写哪几种标签吗？.mp3  5.73M

|   |   ├──15丨HTML元信息类标签：你知道head里一共能写哪几种标签吗？.pdf  1.68M

|   |   ├──20丨CSS 选择器：如何选中svg里的a元素？.html  1.47M

|   |   ├──20丨CSS 选择器：如何选中svg里的a元素？.mp3  7.02M

|   |   ├──20丨CSS 选择器：如何选中svg里的a元素？.pdf  1.56M

|   |   ├──21丨CSS选择器：伪元素是怎么回事儿？.html  1.52M

|   |   ├──21丨CSS选择器：伪元素是怎么回事儿？.mp3  8.52M

|   |   ├──21丨CSS选择器：伪元素是怎么回事儿？.pdf  1.59M

|   |   ├──23丨HTML链接：除了a标签，还有哪些标签叫链接？.html  1.19M

|   |   ├──23丨HTML链接：除了a标签，还有哪些标签叫链接？.mp3  10.36M

|   |   ├──23丨HTML链接：除了a标签，还有哪些标签叫链接？.pdf  1.69M

|   |   ├──24丨CSS排版：从毕升开始，我们就开始用正常流了.html  1.49M

|   |   ├──24丨CSS排版：从毕升开始，我们就开始用正常流了.mp3  6.89M

|   |   ├──24丨CSS排版：从毕升开始，我们就开始用正常流了.pdf  1.62M

|   |   ├──33丨HTML替换型元素：为什么link一个CSS要用href，而引入js要用src呢？.html  1.06M

|   |   ├──33丨HTML替换型元素：为什么link一个CSS要用href，而引入js要用src呢？.mp3  4.62M

|   |   ├──33丨HTML替换型元素：为什么link一个CSS要用href，而引入js要用src呢？.pdf  1.23M

|   |   ├──34丨HTML小实验：用代码分析HTML标准.html  1.52M

|   |   ├──34丨HTML小实验：用代码分析HTML标准.mp3  3.62M

|   |   ├──34丨HTML小实验：用代码分析HTML标准.pdf  1.49M

|   |   ├──35丨CSS Flex排版：为什么垂直居中这么难？.html  1.42M

|   |   ├──35丨CSS Flex排版：为什么垂直居中这么难？.mp3  3.57M

|   |   ├──35丨CSS Flex排版：为什么垂直居中这么难？.pdf  1.47M

|   |   ├──38丨CSS动画与交互：为什么动画要用贝塞尔曲线这么奇怪的东西？.html  1.32M

|   |   ├──38丨CSS动画与交互：为什么动画要用贝塞尔曲线这么奇怪的东西？.mp3  3.48M

|   |   ├──38丨CSS动画与交互：为什么动画要用贝塞尔曲线这么奇怪的东西？.pdf  1.49M

|   |   ├──39丨HTML语言：DTD到底是什么？.html  1.42M

|   |   ├──39丨HTML语言：DTD到底是什么？.mp3  5.05M

|   |   ├──39丨HTML语言：DTD到底是什么？.pdf  1.84M

|   |   ├──40丨CSS渲染：CSS是如何绘制颜色的？.html  2.90M

|   |   ├──40丨CSS渲染：CSS是如何绘制颜色的？.mp3  3.82M

|   |   ├──40丨CSS渲染：CSS是如何绘制颜色的？.pdf  2.82M

|   |   ├──41丨CSS小实验：动手做，用代码挖掘CSS属性.html  11.83M

|   |   ├──41丨CSS小实验：动手做，用代码挖掘CSS属性.mp3  2.01M

|   |   ├──41丨CSS小实验：动手做，用代码挖掘CSS属性.pdf  52.46M

|   |   ├──42丨HTML·ARIA：可访问性是只给盲人用的特性么？.html  1.83M

|   |   ├──42丨HTML·ARIA：可访问性是只给盲人用的特性么？.mp3  3.41M

|   |   └──42丨HTML·ARIA：可访问性是只给盲人用的特性么？.pdf  2.14M

|   ├──04-模块三：浏览器实现原理与API (9讲)

|   |   ├──10丨浏览器：一个浏览器是如何工作的？（阶段一）.html  2.47M

|   |   ├──10丨浏览器：一个浏览器是如何工作的？（阶段一）.mp3  11.14M

|   |   ├──10丨浏览器：一个浏览器是如何工作的？（阶段一）.pdf  2.67M

|   |   ├──11丨浏览器：一个浏览器是如何工作的？（阶段二）.html  1.83M

|   |   ├──11丨浏览器：一个浏览器是如何工作的？（阶段二）.mp3  7.94M

|   |   ├──11丨浏览器：一个浏览器是如何工作的？（阶段二）.pdf  2.07M

|   |   ├──12丨浏览器：一个浏览器是如何工作的（阶段三）.html  1.38M

|   |   ├──12丨浏览器：一个浏览器是如何工作的（阶段三）.mp3  5.07M

|   |   ├──12丨浏览器：一个浏览器是如何工作的（阶段三）.pdf  1.52M

|   |   ├──13丨浏览器：一个浏览器是如何工作的？（阶段四）.html  1.76M

|   |   ├──13丨浏览器：一个浏览器是如何工作的？（阶段四）.mp3  4.60M

|   |   ├──13丨浏览器：一个浏览器是如何工作的？（阶段四）.pdf  1.80M

|   |   ├──14丨浏览器：一个浏览器是如何工作的？（阶段五）.html  1.37M

|   |   ├──14丨浏览器：一个浏览器是如何工作的？（阶段五）.mp3  5.32M

|   |   ├──14丨浏览器：一个浏览器是如何工作的？（阶段五）.pdf  1.54M

|   |   ├──22丨浏览器DOM：你知道HTML的节点有哪几种吗？.html  1.46M

|   |   ├──22丨浏览器DOM：你知道HTML的节点有哪几种吗？.mp3  8.73M

|   |   ├──22丨浏览器DOM：你知道HTML的节点有哪几种吗？.pdf  1.58M

|   |   ├──25丨浏览器CSSOM：如何获取一个元素的准确位置.html  1.09M

|   |   ├──25丨浏览器CSSOM：如何获取一个元素的准确位置.mp3  7.73M

|   |   ├──25丨浏览器CSSOM：如何获取一个元素的准确位置.pdf  1.41M

|   |   ├──36丨浏览器事件：为什么会有捕获过程和冒泡过程？.html  1.67M

|   |   ├──36丨浏览器事件：为什么会有捕获过程和冒泡过程？.mp3  3.81M

|   |   ├──36丨浏览器事件：为什么会有捕获过程和冒泡过程？.pdf  1.96M

|   |   ├──37丨浏览器API（小实验）：动手整理全部API.html  1.33M

|   |   ├──37丨浏览器API（小实验）：动手整理全部API.mp3  4.78M

|   |   └──37丨浏览器API（小实验）：动手整理全部API.pdf  1.41M

|   ├──05-模块四：前端综合应用 (5讲)

|   |   ├──43丨性能：前端的性能到底对业务数据有多大的影响？.html  1.08M

|   |   ├──43丨性能：前端的性能到底对业务数据有多大的影响？.mp3  5.48M

|   |   ├──43丨性能：前端的性能到底对业务数据有多大的影响？.pdf  1.51M

|   |   ├──44丨工具链：什么样的工具链才能提升团队效率？.html  918.70kb

|   |   ├──44丨工具链：什么样的工具链才能提升团队效率？.mp3  3.48M

|   |   ├──44丨工具链：什么样的工具链才能提升团队效率？.pdf  1.32M

|   |   ├──45丨持续集成：几十个前端一起工作，如何保证工作质量？.html  1.28M

|   |   ├──45丨持续集成：几十个前端一起工作，如何保证工作质量？.mp3  4.15M

|   |   ├──45丨持续集成：几十个前端一起工作，如何保证工作质量？.pdf  1.34M

|   |   ├──46丨搭建系统：大量的低价值需求应该如何应对？.html  1.14M

|   |   ├──46丨搭建系统：大量的低价值需求应该如何应对？.mp3  4.37M

|   |   ├──46丨搭建系统：大量的低价值需求应该如何应对？.pdf  1.29M

|   |   ├──47丨前端架构：前端架构有哪些核心问题？.html  1.27M

|   |   ├──47丨前端架构：前端架构有哪些核心问题？.mp3  3.81M

|   |   └──47丨前端架构：前端架构有哪些核心问题？.pdf  1.36M

|   ├──06-特别加餐 (8讲)

|   |   ├──答疑加餐丨学了这么多前端的“小众”知识，到底对我有什么帮助？.html  1.04M

|   |   ├──答疑加餐丨学了这么多前端的“小众”知识，到底对我有什么帮助？.pdf  1.52M

|   |   ├──加餐丨前端交互基础设施的建设.html  1.95M

|   |   ├──加餐丨前端交互基础设施的建设.pdf  2.71M

|   |   ├──加餐丨前端与图形学.html  2.81M

|   |   ├──加餐丨前端与图形学.pdf  1.31M

|   |   ├──期末答疑（二）：前端架构中，每个逻辑页面如何可以做到独立发布呢？.html  1.14M

|   |   ├──期末答疑（二）：前端架构中，每个逻辑页面如何可以做到独立发布呢？.pdf  1.53M

|   |   ├──期末答疑（一）：前端代码单元测试怎么做？.html  1.21M

|   |   ├──期末答疑（一）：前端代码单元测试怎么做？.pdf  1.62M

|   |   ├──期中答疑丨name(){}与name function() {}，两种写法有什么区别吗？.html  1.17M

|   |   ├──期中答疑丨name(){}与name function() {}，两种写法有什么区别吗？.pdf  1.97M

|   |   ├──新年彩蛋丨2019，有哪些前端技术值得关注？.html  4.11M

|   |   ├──新年彩蛋丨2019，有哪些前端技术值得关注？.pdf  3.15M

|   |   ├──用户故事丨那些你与“重学前端”的不解之缘.html  2.84M

|   |   └──用户故事丨那些你与“重学前端”的不解之缘.pdf  3.37M

|   └──07-尾声 (1讲)

|   |   ├──尾声丨长风破浪会有时，直挂云帆济沧海.html  1.43M

|   |   ├──尾声丨长风破浪会有时，直挂云帆济沧海.mp3  2.40M

|   |   └──尾声丨长风破浪会有时，直挂云帆济沧海.pdf  1.77M