# relearn-frontend **Repository Path**: iamsmiling/relearn-frontend ## Basic Information - **Project Name**: relearn-frontend - **Description**: 极客课程-重学前端 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2019-11-09 - **Last Updated**: 2021-04-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README [TOC] # 重学前端 ## 开篇词+学习方法 ### 开篇词：从今天起，重新理解前端 ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-09-28-07-74.png) ### 明确你的前端学习路线与方法 ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-09-30-44-96.png) ### 列一份前端知识架构图 ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-09-32-35-24.png) ## 模块一：js ### 关于js类型，有哪些你不知道的细节？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-00-05-09.png) ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-01-25-23.png) ### js对象：面向对象还是基于对象 ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-03-53-30.png) ## js对象：我们真的需要模拟类吗？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-05-39-69.png) ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-06-07-23.png) ### js对象：你知道全部的对象分类吗 ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-07-50-00.png) ### js执行：Promise里的代码为什么比setTimeout先执行？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-09-03-89.png) ### js执行：闭包和执行上下文到底是怎么回事？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-11-28-83.png) ### js执行：你知道现在有多少种函数吗？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-13-37-33.png) ### js执行：try里面放return，finally还会执行吗？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-14-49-33.png) ### js词法：为什么12.toString会报错？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-16-31-70.png) ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-17-14-06.png) ### （小实验）理解编译原理：一个四则运算的解释器 ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-20-55-64.png) ### js语法（预备篇）：到底要不要写分号？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-22-29-03.png) ### js语法（一）：在script标签写export为什么会抛错？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-24-50-12.png) ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-25-53-86.png) ### js语法（二）：你知道哪些js语句？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-31-51-79.png) ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-10-32-44-92.png) ### js语法（三）；什么是表达式语句？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-14-40-56-54.png) ### js语法（四）；新加入的**运算符，哪里有些不一样？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-14-42-41-54.png) ## 模块二：html 与css ### html语义:div和span不是够用了吗？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-14-44-26-83.png) ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-14-44-59-32.png) ### html语义:如何运用语义类标签呈现wiki网页？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-14-46-46-14.png) ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-14-47-25-09.png) ### html元信息类标签：你知道head里一共能写哪几种标签吗？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-14-50-59-94.png) ### html链接：除了a标签，还有哪些标签叫链接？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-14-56-37-15.png) ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-14-57-04-64.png) ### html语言：DTD到底是什么？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-18-52-47.png) ### html替换元素：为什么link一个css要用href，而引入js要用src？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-00-12-30.png) ### html *aria:可访问性只是给盲人用的特性吗 ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-22-22-91.png) ### html小实验：用代码分析html标准 ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-13-40-19.png) ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-14-05-85.png) ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-14-20-43.png) ### css语法:除了属性和选择器，你还需要知道这些带@的规则 ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-14-49-14-49.png) ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-14-49-43-06.png) ### css选择器：如何选中svg里面的a元素？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-14-52-24-37.png) ### css选择器：伪元素是怎么回事儿？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-14-54-08-20.png) ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-14-55-01-10.png) ### css排版：从毕升开始，我们就开始使用正常流了 ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-14-58-37-32.png) ### css flex排版：为什么垂直居中这么难？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-15-37-08.png) ### css动画与交互：为什么动画要用贝塞尔曲线这么奇怪的东西？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-17-30-58.png) ### css渲染：css是如何绘制颜色的？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-19-58-77.png) ### css小实验：动手做，用代码挖掘css属性？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-21-15-03.png) ## 模块三：浏览器 ### 浏览器：一个浏览器是如何工作的（阶段一）？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-24-03-30.png) ### 浏览器：一个浏览器是如何工作的（阶段二）？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-25-53-97.png) ### 浏览器：一个浏览器是如何工作的（阶段三）？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-27-06-78.png) ### 浏览器：一个浏览器是如何工作的（阶段四）？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-28-08-71.png) ### 浏览器：一个浏览器是如何工作的（阶段五）？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-29-14-73.png) ### 浏览器dom:你知道html的节点有哪几种吗？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-30-46-69.png) ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-31-19-34.png) ### 浏览器cssom:如何获取一个元素的准确位置 ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-32-40-10.png) ### 浏览器事件：为什么会有捕获和冒泡过程？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-33-46-52.png) ### 浏览器API（小实验）:动手整理全部API ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-36-15-98.png) ## 前端优化 ### 性能：前端的性能到底对业务数据有多大的影响？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-37-43-37.png) ### 工具链：什么样的工具链才能提升团队效率？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-38-34-66.png) ### 持续集成：几十个前端一起工作，如何保证工作质量？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-39-40-26.png) ### 搭建系统：大量低价值需求应该如何应对？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-40-40-15.png) ### 前端架构：前端架构有哪些核心问题？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-41-24-07.png) ### 新年彩蛋：2019,有哪些前端技术值得关注？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-42-07-56.png) ### 用户故事|那些你与“重学前端”的不解之缘 ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-43-18-60.png) ### 期中答疑|name(){}与name:function(){},两种写法有什么不同？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-44-45-55.png) ### 加餐|前端与图像学 ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-46-51-34.png) ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-47-31-36.png) ### 加餐：前端交互基础设施的建议 ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-49-01-81.png) ### 期末答疑(一)：前端代码单元测试怎么做？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-50-29-36.png) ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-51-07-35.png) ### 期末答疑(二)：前端架构中，每个逻辑页面如何可以做到独立？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-52-11-68.png) ### 加餐|一个前端工程师到底需要掌握哪些技能？ ![](https://gitee.com/iamsmiling/relearn-frontend/blob/master/imgs/Screenshot_2019-11-09-15-53-25-37.png)