先进的前端博客，记录个人前端成长路径。包括但不限于：es6、node、vue、小

# Blog知识体系 ------- 这是我的个人博客，用于记录自己在前端道路上的成长，文章将和 [https://bubuzou.com/](https://bubuzou.com/) 这个网站同步更新，喜欢的可以关注一下哈😘。众所周知，前端开发入门简单，但是如果要深入这个岗位其实是需要付出巨大的努力和时间的，因为前端知识繁杂，涉及到的点和面很多，而且前端技术日新月异更新速度可谓非常之快。所以如果想要在这个岗位深耕下去，就必须得有一个知识图谱来引导我们去学习。`winter` 老师也说过学习前端要建立自己的知识体系，然后自从我在掘金上看过字节大佬 `ConardLi` 精心写的这篇 [一名【合格】前端工程师的自检清单](https://juejin.im/post/5cc1da82f265da036023b628)之后，就感觉前端的知识体系差不多就是这么回事了，于是就决定先按照这个路线来学习，后面也会慢慢扩充自己的知识体系，也欢迎大家跟我一起来学习💪。 **文章列表直接看**：[Issues](https://github.com/Bulandent/blog/issues)  也欢迎大家关注我的公众号：「大海我来了」，会经常更新前端干货文章。  # 目录 - [一、JavaScript基础](#一JavaScript基础) - [变量和类型](#变量和类型-) - [原型和原型链](#原型和原型链-) - [作用域和闭包](#作用域和闭包-) - [执行机制](#执行机制-) - [语法和API](#语法和API-) - [二、HTML和CSS](#二HTML和CSS) - [HTML](#HTML-) - [CSS](#CSS-) - [手写](#手写-) - [三、计算机基础](#三计算机基础) - [编译原理](#编译原理-) - [网络协议](#网络协议-) - [设计模式](#设计模式-) - [四、数据结构和算法](#四数据结构和算法) - [JavaScript编码能力](#JavaScript编码能力-) - [手动实现前端轮子](#手动实现前端轮子-) - [数据结构](#数据结构-) - [算法](#算法-) - [五、运行环境](#五运行环境) - [浏览器API](#浏览器API-) - [浏览器原理](#浏览器原理-) - [Node](#Node-) - [六、框架和类库](#六框架和类库) - [TypeScript](#TypeScript-) - [React](#React-) - [Vue](#Vue-) - [多端开发](#多端开发-) - [数据流管理](#数据流管理-) - [实用库](#实用库-) - [开发和调试](#开发和调试-) - [七、前端工程](#七前端工程) - [项目构建](#项目构建-) - [nginx](#nginx-) - [开发提速](#开发提速-) - [版本控制](#版本控制-) - [持续集成](#持续集成-) - [代码质量](#代码质量-) - [八、项目](#八项目) - [性能优化](#性能优化-) - [前端安全](#前端安全-) ## 一、JavaScript基础 ### 变量和类型 [⬆](#目录) - [ ] 1.JavaScript规定了几种语言类型 - [ ] 2.JavaScript对象的底层数据结构是什么 - [ ] 3.Symbol类型在实际开发中的应用、可手动实现一个简单的 - [ ] 4.JavaScript中的变量在内存中的具体存储形式 - [ ] 5.基本类型对应的内置对象，以及他们之间的装箱拆箱操作 - [ ] 6.理解值类型和引用类型 - [ ] 7.null和undefined的区别 - [ ] 8.至少可以说出三种判断JavaScript数据类型的方式，以及他们的优缺点，如何准确的判断数组类型 - [ ] 9.可能发生隐式类型转换的场景以及转换原则，应如何避免或巧妙应用 - [ ] 10.出现小数精度丢失的原因，JavaScript可以存储的最大数字、最大安全数字，JavaScript处理大数字的方法、避免精度丢失的方法 学习与总结： - [JavaScript中的数据类型](https://github.com/Bulandent/blog/issues/3) ### 原型和原型链 [⬆](#目录) - [ ] 1.理解原型设计模式以及JavaScript中的原型规则 - [ ] 2.instanceof的底层实现原理，手动实现一个instanceof - [ ] 3.实现继承的几种方式以及他们的优缺点 - [ ] 5.至少说出一种开源项目(如Node)中应用原型继承的案例 - [ ] 6.可以描述new一个对象的详细过程，手动实现一个new操作符 - [ ] 7.理解es6 class构造以及继承的底层实现原理 ### 作用域和闭包 [⬆](#目录) - [ ] 1.理解词法作用域和动态作用域 - [ ] 2.理解JavaScript的作用域和作用域链 - [ ] 3.理解JavaScript的执行上下文栈，可以应用堆栈信息快速定位问题 - [ ] 4.this的原理以及几种不同使用场景的取值 - [ ] 5.闭包的实现原理和作用，可以列举几个开发中闭包的实际应用 - [ ] 6.理解堆栈溢出和内存泄漏的原理，如何防止 - [ ] 7.如何处理循环的异步操作 - [ ] 8.理解模块化解决的实际问题，可列举几个模块化方案并理解其中原理 ### 执行机制 [⬆](#目录) - [ ] 1.为何try里面放return，finally还会执行，理解其内部机制 - [ ] 2.JavaScript如何实现异步编程，可以详细描述EventLoop机制 - [ ] 3.宏任务和微任务分别有哪些 - [ ] 4.可以快速分析一个复杂的异步嵌套逻辑，并掌握分析方法 - [ ] 5.使用Promise实现串行 - [ ] 6.Node与浏览器EventLoop的差异 - [ ] 7.如何在保证页面运行流畅的情况下处理海量数据 学习与总结： - [深入理解Promise](https://github.com/Bulandent/blog/issues/9) ### 语法和API [⬆](#目录) - [ ] 1.理解ECMAScript和JavaScript的关系 - [ ] 2.熟练运用es5、es6提供的语法规范， - [ ] 3.熟练掌握JavaScript提供的全局对象（例如Date、Math）、全局函数（例如decodeURI、isNaN）、全局属性（例如Infinity、undefined） - [ ] 4.熟练应用map、reduce、filter 等高阶函数解决问题 - [ ] 5.setInterval需要注意的点，使用settimeout实现setInterval - [ ] 6.JavaScript提供的正则表达式API、可以使用正则表达式（邮箱校验、URL解析、去重等）解决常见问题 - [ ] 7.JavaScript异常处理的方式，统一的异常处理方案 学习与总结： - [送你一份精心总结的3万字ES6实用指南（全）](https://github.com/Bulandent/blog/issues/10) - [让人爱不释手的 JS 扩展操作符 13 用](https://github.com/Bulandent/blog/issues/23) ## 二、HTML和CSS ### HTML [⬆](#目录) - [ ] 1.从规范的角度理解HTML，从分类和语义的角度使用标签 - [ ] 2.常用页面标签的默认样式、自带属性、不同浏览器的差异、处理浏览器兼容问题的方式 - [ ] 3.元信息类标签(head、title、meta)的使用目的和配置方法 - [ ] 4.HTML5离线缓存原理 - [ ] 5.可以使用Canvas API、SVG等绘制高性能的动画 ### CSS [⬆](#目录) - [ ] 1.CSS盒模型，在不同浏览器的差异 - [ ] 2.CSS所有选择器及其优先级、使用场景，哪些可以继承，如何运用at规则 - [ ] 3.CSS伪类和伪元素有哪些，它们的区别和实际应用 - [ ] 4.HTML文档流的排版规则，CSS几种定位的规则、定位参照物、对文档流的影响，如何选择最好的定位方式，雪碧图实现原理 - [ ] 5.水平垂直居中的方案、可以实现6种以上并对比它们的优缺点 - [ ] 6.BFC实现原理，可以解决的问题，如何创建BFC - [ ] 7.可使用CSS函数复用代码，实现特殊效果 - [ ] 8.PostCSS、Sass、Less的异同，以及使用配置，至少掌握一种 - [ ] 9.CSS模块化方案、如何配置按需加载、如何防止CSS阻塞渲染 - [ ] 10.熟练使用CSS实现常见动画，如渐变、移动、旋转、缩放等等 - [ ] 11.CSS浏览器兼容性写法，了解不同API在不同浏览器下的兼容性情况 - [ ] 12.掌握一套完整的响应式布局方案 学习与总结： - [图解Flexbox](https://github.com/Bulandent/blog/issues/2) - [良好的CSS编码习惯](https://github.com/Bulandent/blog/issues/8) - [1.5 万