定位：夯实前端底层逻辑，突破语法碎片化瓶颈
很多开发者在职业中期会遇到“知识断层”：能熟练使用框架，但一旦涉及复杂交互或性能优化，就缺乏对浏览器渲染机制和 JavaScript 执行原理的深层理解。这门体系课并非简单的语法速成，而是针对 Linux 开发环境、操作系统核心概念以及 ES5/ES6 底层逻辑的系统性重构。它解决的是“知其然不知其所以然”的问题，帮助在职工程师或转行者从“代码调用者”转变为具备工程思维的“逻辑构建者”。适合有一定 HTML/CSS/JS 基础，但感觉知识体系松散、难以应对高并发或复杂 UI 场景的学习者。如果你是纯零基础小白，建议先补齐基础标签和变量概念，再进入本课程，否则预读班中的操作系统与后端语言知识会显得晦涩。
学习路径与核心产出
建议按照“环境认知—语言核心—视觉进阶—实战整合”的顺序推进。首先，务必重视预读班中关于 Linux 环境准备与操作系统核心的内容，这是理解后端交互和本地调试的基础，很多前端问题根源在于对运行环境的不了解。其次，重点攻克 JavaScript 函数式编程与 ES5 核心知识点。不要将这些视为过时的语法，它们是理解现代框架响应式原理和内存管理的关键。掌握函数式编程理念，能让你在编写复杂逻辑时更简洁、更易测试。再者，课程后半部分涉及 CSS3 的 3D 构建与数学运用，这部分内容直接关联中高级前端岗位对视觉交互的要求。学完这套课程，你能够独立完成以下任务：搭建符合行业标准的前后端分离开发环境；利用函数式编程思想重构遗留代码，减少状态管理混乱；通过 CSS 数学函数实现复杂的响应式布局与动态交互动效；并能从操作系统角度分析页面卡顿原因，进行针对性的性能优化。这套能力组合，足以支撑你应对中级及以上前端技术面试中的深度提问。
资料配合与刻意练习策略
资料包中的视频与文档需配合“拆解—重构”的练习方法。观看每一章节时，不要被动接受，而是同步记录代码逻辑背后的假设。例如在学习 CSS 与数学运用时，尝试手动推导矩阵变换对元素位置的影响，而非仅复制代码。完成章节后，利用第一周实战作业作为检验标准，独立复现案例功能。遇到报错，先阅读关于 QA 测试与调试技巧的内容，学习如何定位问题根源，而不是盲目搜索答案。这种“理论支撑+实战验证”的闭环，能将短期记忆转化为长期的工程直觉。切忌将所有视频看完再动手，那样会导致知识遗忘。保持每学两块内容就进行一次完整编码练习的节奏，确保每个知识点都能落地为可运行的组件或工具函数，最终形成一套属于你自己的、具备可维护性的前端代码库。
课程目录
01、【预读班】Linux开发环境初准备(1) 02、【预读班】Linux开发环境初准备(2) 03、【预读班】操作系统与后端语言核心知识(1) 03、【预读班】操作系统与后端语言核心知识(2) 04、【预读班】ES5核心知识点突袭(1) 04、【预读班】ES5核心知识点突袭(2) 05、【预读班】你不知道的HTML+CSS精髓(1) 06、JavaScript函数式编程(1) 06、JavaScript函数式编程(2) 07、JavaScript与QA测试工程师(1) 07、JavaScript与QA测试工程师(2) 08、第一周实战+作业讲解(1) 08、第一周实战+作业讲解(2) 09、第一周实战讲解(1) 09、第一周实战讲解(2) 11、CSS3构建3D的世界 12、CSS高级实用技巧【上】 13、CSS高级使用技巧【下】 14、CSS与数学的巧妙运用 15、ES5核心技术 16、jQuery技术内幕 17、走进后端工程师的世界 18、常用后端语言介绍 19、1.Linux操作系统介绍 20、2.Linux和虚拟机基本安装步骤 21、3.Linux基本命令入门 22、4.Windows命令行入门 23、5.Cygwin安装与使用 24、6.Linux的安装和基本命令【补充版】 25、7.Web服务器基础原理和概念 26、1.ECMAScript5.1简介 27、2.浏览器支持 28、3.严格模式 29、4.JSON格式 30、5.添加对象 31、6.额外的数组 32、7.Function.prototype.bind 33、8.JavaScript this的使用 34、9.JavaScript作用域和闭包 35、10.按值传递和按引用传递 36、1.初识PHP 37、2.PHP基础操作 38、3.初识phpMyAdmin 39、4.PHP与MySQL 40、5.PHP与MySQL小实战 41、6.PHP PDO 42、6-1.PHP面向对象的介绍 43、6-2.构造方法与析构方法 44、6-3.PHP面向对象之封装性 45、6-4.PHP面向对象之继承和多态 46、6-5.PHP抽象类与接口 47、6-6.PHP常见的关键字 48、6-7.PHP错误处理类 49、7.PHP和JavaScript的比较 50、8.MySQL数据库客户端基础 51、9.MySQL创建表 52、10.MySQL函数SQL语句 53、11.MYSQL条件查询 54、12.MYSQL复杂条件查询 55、1.ES6简介与环境搭建 56、2.ES6编程风格【上】 57、3.ES6编程风格【中】 58、4.ES6编程风格【下】 59、1.JavaScript与QA工程师 60、2.JavaScript语言精粹1 61、2.JavaScript语言精髓2 62、3.ES6在企业中的应用 63、4.TypeScript前世今生 64、HTTP协议那些事(1) 64、HTTP协议那些事(2) 64、HTTP协议那些事(3) 65、大规模NodeJS项目架构与优化(1) 65、大规模NodeJS项目架构与优化(2) 66、第二周实战+作业讲解(1) 66、第二周实战+作业讲解(2) 67、专题二任务实战【下】(1) 67、专题二任务实战【下】(2) 68、Nodejs学习介绍 69、01.走进Node.js 70、02.Node.js入门 71、03.node.js环境及npm深入 72、04.Node.js回调函数 73、05.Node.js事件驱动机制 74、06.Node.js模块化 75、07.Node.js函数 76、08.Node.js路由 77、09.全局方法和工具 78、10.文件系统 79、1.Express介绍 80、2.Express中间件 81、3.Express路由 82、4.Express错误处理 83、5.Express模板引擎 84、1.KOA简介 85、2.KOA应用 86、3.Context(上下文) 87、4.请求 88、5.输出 89、1.Express入门实战 90、2.Express+PHP实战 91、3.Koa1实战 92、4.Koa2实战 93、5.爬虫实战之Robots协议 94、6.配置爬虫系统和开发环境 95、7.爬虫代码实战 96、8.数据推送之Comet 97、9数据推送之WebSocket 98、10.数据推送之SSE 99、【实战】Nginx的反向代理与负载均衡 100、【实战】NodeJS线上部署【上】 101、【实战】NodeJS线上部署【下】 102、1.腾讯地图H5 NodeJS架构搭建 103、2.如何阅读NodeJS源代码 104、3.JavawebNET用框架核心思想 105、4.前后端分离与用户验证 112、第三周实战+作业讲解②(1) 113、1.Webpack学习注意事项 114、2.Webpack入门介绍 115、3.Webpack1入门与实战 116、4.Webpack2&3核心技巧 117、5.Webpack4快速入门 118、6.Rollup的介绍和使用 119、7.Gulp的介绍和使用 120、8.Gulp的安装 121、9.Gulp的使用 122、10.Grunt的介绍和使用 123、11.Grunt的安装 124、12.Grunt的应用 125、13.Bower的安装与应用 126、14.Bower的安装 127、15.Bower的应用 128、16.Yeoman的介绍 129、17.Yeoman的安装 130、18.Yeoman的应用 131、19.Browserify介绍与应用 132、20.Parcel初体验 133、1.前端架构那些事儿 134、2.WebPack从入门到放弃 135、3.前端工程化预备知识【上】 136、4.前端工程化预备知识【下】 137、5.FIS从入门到放弃【上】 138、6.FIS从入门到放弃【下】 139、前端性能优化必备服务器知识(1) 139、前端性能优化必备服务器知识(2) 140、前端架构与性能优化那些事儿(1) 140、前端架构与性能优化那些事儿(2) 141、第四周考试+作业讲解(1) 141、第四周考试+作业讲解(2) 142、前端架构师启蒙课第一讲(1) 142、前端架构师启蒙课第一讲(2) 143、1.雅虎军规 144、2.面向切面的概念解读 145、3.面向切面代码实战 146、4.Nginx服务器缓存策略 147、1.整体课程概要 148、2.断点以及捕捉事件绑定 149、3.Audits和Chrome性能插件 150、4.Timeline掌控帧渲染模式 151、5.Profiles分析具体问题 152、1.网红平台性能优化 153、2.性能优化黑科技 Google AMP 154、3.Web高性能动画及渲染原理 155、现代化CSS方法论(1) 155、现代化CSS方法论(2) 156、CSS与数学的奥秘(1) 156、CSS与数学的奥秘(2) 157、第五周考试+作业讲解(1) 157、第五周考试+作业讲解(2) 158、前端架构师启蒙课第二讲(1) 158、前端架构师启蒙课第二讲(2) 159、1.Less的介绍 160、2.Less的安装 161、3.Less的应用 162、4.SASS的介绍 163、5.SASS的安装 164、6.SASS的应用 165、1.OO CSS的概念解读 166、2.OO CSS的作用和注意事项 167、3.OO CSS的代码实战 168、4.CSS后处理器 169、5.CSS绘制特殊图形 170、6.CSS3绘制3D魔方 171、7.CSS双飞翼布局概述 172、8.CSS基础布局 173、9.圣杯布局 174、10.双飞翼布局 175、1.CSS常用技巧 176、2.CSS分层理论 177、3.CSS3D的应用 178、Vue源码分析(1) 178、Vue源码分析(2) 179、React深度指南(1) 179、React深度指南(2) 180、Webpack源码解析(1) 180、Webpack源码解析(2) 181、Webpack在一线开发中的优化(1) 181、Webpack在一线开发中的优化(2) 182、讲给前端工程师的C语言(1) 182、讲给前端工程师的C语言(2) 183、1.1TypeScript介绍 184、1.2Mac OS X环境搭建 185、1.3TypeScript环境搭建-Windows环境搭建 186、2.1基本数据类型-boolean，number，string 187、2.2基本数据结构-Array,enum. 188、2.3基本数据类型-ANY,VOID 189、3.1.ts函数-函数类型 190、3.2.ts函数-可选和默认参数 191、3.3.ts函数-可变参数 192、3.4.ts函数-lambads和this关键字 193、3.5.ts函数-重载 194、4.1.TS-类的创建 195、4.2.ts类-类的继承 196、4.3.TS函数-访问修饰符 197、4.4.TS-封装的实现 198、4.5.ts static和使用技巧 199、5.1.TS接口-创建接口 200、5.2.TS接口-可选属性 201、5.3.TS接口-函数类型 202、5.4.TS接口-数组类型 203、5.5.TS接口-实现接口 204、5.6.TS接口-接口继承与混合类型 205、6.1.TS泛型-认识泛型 206、6.2.TS泛型-泛型的应用 207、6.3.TS泛型-泛型类型 208、6.4.TS泛型-泛型类 209、7.1.TS模块-modules 210、7.2.TypeScript模块-泛型类型 211、7.3.TypeScript模块-泛型类 212、8.NameSpace介绍 213、9.装饰器 214、10.Mixins 215、11.三斜线指令和错误信息列表 216、1.Vue1.0入门 217、2.Vue双向绑定和条件判断 218、3.Vue事件处理 219、4.Vue组件 220、5.Vuecomputed计算属性 221、6.Vue列表渲染 222、7.Vue异步获取数据 223、8.Vue2.0新变化 224、9.Vue动画 225、10.VueDirective 226、11.Vue生命周期 227、12.Vue组件通信 228、13.Vue KeepAlive组件缓存 229、14.Vue Hooks 231、1.走进AngularJS4的大门 232、2.AngularCLI安装和使用 233、3.路由与动态加载 234、4.Service和RxJS 235、5.ZoneJs全介绍 236、6.组件和组件的生命周期 237、7.Zone.js暴力之美 239、1.React介绍 240、2.开发环境与EcmaScript6 241、3.第一个HelloWorld 242、4.JSX详解与实战 243、5.非DOM属性介绍 244、6.也许答案并不是DOM 245、7.属性的介绍与应用 246、8.状态的介绍和应用 247、9.属性和状态 248、10.React生命周期 249、11.React运行中的状态 250、12.React销毁阶段介绍 251、13.可控控件和不可控控件 252、14.不同表单元素的使用 253、15.事件函数和this 255、1.MVVM前世今生 256、2.Vuex快速入门指南 257、3.React深入介绍 258、4.React深入指南【上】 259、5.React深入指南【下】 260、快速上手Docker学习指南(1) 260、快速上手Docker学习指南(2) 261、React16.8新特性和源码分析①(1) 261、React16.8新特性和源码分析①(2) 262、React16.8新特性和源码分析②(1) 262、React16.8新特性和源码分析②(2) 263、大前端之Kubernetes与微服务(1) 263、大前端之Kubernetes与微服务(2) 264、PWA与Flutter实战(1) 264、PWA与Flutter实战(2) 265、微前端架构设计指南(1) 265、微前端架构设计指南(2) 267、1.初识Android开发 268、2.Android Studio的安装和配置 269、3.Android开发基础文件夹的介绍 270、4.如何发布一款apk 271、5.iOS开发介绍和环境要求 272、6.Xcode集成开发环境 273、7.iOS常用开发技巧 274、8.打包及发布 275、1.ReactNative快速入门 276、2.开发环境搭建 277、3.React项目的基本结构 278、4.Flexbox 布局详解 279、5.样式布局基础 280、6.Image组件 281、7.文字Text组件和其他组件介绍 282、8.Cordova入门和基础 283、9.Cordova安装 284、10.Cordova开发环境的准备和运行 285、前端跨界之PC 286、1.认识python及环境安装 287、2.python解释器-基本语法规则 288、3.python之数据类型，变量，运算符 289、4.python之字符串 290、5. python之函数 291、6.python之模块 292、7.python之条件控制语句 293、8.python之列表、元组、集合、字典 294、9.Python小实战-Bing壁纸爬虫 295、10.Python小实战-钉钉机器人 296、1.从软件到硬件【上】 297、2.从软件到硬件【下】 298、3.ReactNative开发架构 299、4.Cordova开发及优化 300、5.JavaScript跨硬件和PC 301、6.ReactNative&Cordova原理分析 307、1.列表 308、2.列表的代码实现 309、3.栈概念介绍 310、4.栈的代码实现 311、5.队列 312、6-1链表简介 313、6-2 单向链表与双向链表的代码实现 314、7.字典 315、8.散列 316、9.集合 317、10.二叉树 318、11.图和图的算法 319、12.排序算法简介 320、13.冒泡排序 321、14.选择排序 322、15.插入排序 323、16.希尔排序 324、17.归并排序 325、18.快速排序 326、19.检索算法 327、20.高级算法 328、1.数据结构与算法代码讲解（上） 329、2.数据结构与算法代码讲解（下） 330、3.数据结构导论 331、4.算法导论 332、5.数据结构与算法JS 讲解 336、前端图形学工程师实战场(2) 338、1.Canvas2d简述 339、2.Canvas2D图形的绘制 340、1.Cocos2d-JS的发展过程 341、2.相关工具简介 342、3.Cocos2d 开发环境搭建 343、4.Hello World 344、5.Cocos2d-JS数学基础知识 345、6.笛卡尔坐标 346、7.三角函数的基本应用 347、8.向量的简单应用 348、9.Cocos2d-JS引擎基本运转流程 349、10.显示对象 350、11.自定义显示对象 351、12.基本动作使用 352、13.Action特效 353、14.场景动画切换 354、15.事件管理器和事件类型 355、16.事件管理器的用法 356、17.自定义事件 357、18.对象缓冲池 358、19.CocosStudio基础控件 359、20.常用开发工具 360、1.3D图形学入门 361、2.webgl概述 362、3.WEBGL入门-第一个WEBGL程序 363、4.webgl入门着色器 364、5.Webgl入门-attributeuniform 365、6.webgl入门-缓冲区对象 366、7.WEBGL绘制基本图形 367、8.webgl绘制图形-绘制一个点的代码升级 368、9.WEBGL变换-平移 369、10.WEBGL变换-旋转 370、11.WEBGL变换-缩放 371、12.WEBGL矩阵变换 372、13.WebGL高级变换和动画基础-高级变化 373、14.动画基础 374、15.将非坐标数据传入顶点着色器 375、16.vertexAttriPointer()的步进和偏移参数 376、17.varying变量、绘制彩色三角形（上） 377、18.varying变量、绘制彩色三角形（下） 378、19.在矩形表面上贴上图像（上） 379、20.在矩形表面上贴上图像（下） 380、21.OpenGLES着色器语言 381、22.三维世界简介 382、23.视点与视线（上） 383、24.视点与视线（下） 384、25.可视空间-长方体可视空间 385、26.可视空间-金字塔可视空间 386、27.正确处理前后关系 387、28.立方体 388、1.Three.js简介 389、2.创建Three.js基础代码 390、3.绘制三维对象 391、4.添加材质和灯光、阴影 392、5.添加动画效果 393、6.创建场景 394、7.几何和网格对象 395、8.相机 396、9.认识光源 397、10.环境光 398、11.点光源 399、12.聚光灯 400、13.平行光 401、14.高级光照效果 402、15.认识材质 403、16.理解材质共有属性 404、17.基础材质 405、18.深度材质 406、19.联合材质 407、20.法向材质 408、21.网格面材质 409、22.高级材质 410、23.二维几何体 411、24.三维几何体 412、25.多维几何体 413、26.基础动画 414、27.轨迹球控件 415、28.飞行控件 416、29.翻滚控件 417、30.第一人称控件 418、1.计算机图形学 419、2.前端图形学的数学基础 420、3.iCharts的前世今生 424、1.设计模式的介绍 425、2.设计模式的概念解读 426、3.设计模式的发展与在JavaScript中的应用 427、4.设计原则 428、1.工程模式课程概要 429、2.工厂模式概念解读 430、3.工厂模式的作用和注意事项 431、4.工厂模式代码实战和总结 432、1.设计模式之适配器模式课程概要 433、2.适配器模式的概念解读 434、3.适配器模式的作用和注意事项 435、4.适配器模式的代码实战和总结 436、1.设计模式之迭代器模式课程概要 441、【实战vuessr】构建一个基本的SPA 442、【实战vuessr】Webpack前端自动化流程 443、【实战vue ssr】Webpack自动化流程【下】 444、【实战vue ssr】结合Node 445、【实战vue ssr】Vue服务端渲染总结 资料源码.rar └─yd .DS_Store Dockerfile K8S（Kubernetes）入门.pdf vi-vim-cheat-sheet-sch.gif vim_cheat_sheet_for_programmers_bnw.png vim_cheat_sheet_for_programmers_print.png 免密登陆配置模版-config 前端性能优化基础.pdf 微服务入门与Docker实战.pdf 搭建docker node.js环境.pdf 高端班：讲给前端程序员的C语言.pdf ├─专题一.JavaScript和QA测试工程师 JavaScript&QA工程师.pdf JavaScript函数式编程.pdf monad.zip promise.zip yd-lesson1.zip yd-test.zip 图书管理系统项目讲义.pdf 第一周.pdf 第一周考试F卷.pdf ├─专题七 前端跨界 PWA开发实践.pdf yd-pwa.zip ├─专题三 前端工程化 从0到大论前端持续集成.pdf 前端工程化Linux预备知识.pdf 第三周作业.pdf ├─专题九 前端图形学 yd-3d.zip yd-game.zip yd-mach.zip 前端图形学中的数学和物理.pdf 前端图形学启蒙课.pdf ├─专题二 大话NodeJS72般变化 2019-04- 12 第二周作业第一节.zip 2019年4月15日作业【下】.zip basic.zip nginx配置学习资料.pdf W2.HTTP协议那些事v1.12.pdf 大规模NodeJS项目架构与优化.pdf 第二周作业.pdf ├─专题五CSS古话今说 CSS Houdini.pdf yd-css.zip ├─专题八 前端中的数据结构和算法 JavaScript执行堆栈详细解读.pdf yd-data-structure.zip yd-domdiff.zip 前端算法实战答案.pdf 完整版本Dom diff.zip 数据结构和算法.pdf 数据结构概论.pdf 算法概论.pdf 线下笔试题（第九周）参考答案.pdf ├─专题六 MV框架系列源码解读 myVue.zip React 新Hooks.zip React 深入指南.pdf webpack原理课源码.zip Webpack技术内幕.pdf yd-book 2019-05-26.zip yd-newbooks05-26.zip yd-vue-ssr.zip 从0开始实现一个redux.zip 基础reduxdemo.zip 微前端架构之旅.zip 面向切面编程.zip ├─专题十 设计模式与网络安全 yd-cli.zip yd-DesignPatterns.zip 前端工程师必学的V8.pdf 常用设计模式.pdf 百度-javascript设计模式.pdf ├─专题四 前端性能优化 5月12号架构师启蒙课源码.zip yd-permance.zip 性能优化启示录.pdf 第四周作业要求.pdf └─预读班 1.内部教案-配置命令行详细步骤与.txt CSS3D的应用.pdf CSS3常用核心技巧.pdf Linux 开发环境初准备讲义.pdf Linux家族.jpg Unix_history-simple.svg.png vi-vim-cheat-sheet-sch.gif vim_cheat_sheet_for_programmers_bnw.png vim_cheat_sheet_for_programmers_print.png 前端必会的Linux基础.pdf 操作系统与后端语言核心知识.pdf 谷歌访问助手_v2.3.0.crx 预读班EcmaScript5核心知识.zip 预读班JavaScript.zip
