前端进阶系列知识汇总目录

前言

该专栏是我从事前端开发工作以来的知识体系思维导图的博客输出文章总结。也许有些是转载，但是我努力做到原文输出。。。。

以下是思维导图的总览，它是我从事五年前端开发的工作经验的积累和技术上的学习总结，希望自己不是仅有工作上的工作经验，同时拥有技术上的不断提升。

会一直维护下去，直到某天离开了前端开发的行业。

下载地址：链接：https://pan.baidu.com/s/1CBw9Yof8M1UkZDYDkEUANg 提取码：3coi 
 

1 css进阶系列

序号	标题	核心	demo
1	CSS3属性笔记（一）	border-radius、box-shadow、border-image、RGBA、渐变色彩、text-overflow、word-wrap、@font-face、text-shadow、background-size、multiple backgrounds、root、not、empty、target	demo
2	CSS3属性笔记（二）	first-child、last-child、nth-child(n)、nth-last-child(n)、first-of-type、nth-of-type(n)、last-of-type、 nth-last-of-type(n)、only-child、only-of-type	demo
3	CSS3属性笔记（三）	:enabled、:disabled、:checked、::selection、:read-write、::before、::after	demo
4	CSS3属性笔记（六）	CSS3中的变形与动画	demo
5	CSS3属性笔记（7）	Media Queries 与Responsive 设计	demo
6	16种方法实现水平居中垂直居中	16种方法实现水平居中垂直居中	demo
7	CSS定位布局	CSS定位布局	demo
8	CSS清除浮动的方法	CSS清除浮动的方法	demo
9	为何img、input等内联元素可以设置宽、高	为何img、input等内联元素可以设置宽、高	demo
10	BFC	BFC
11	中介者模式	flex

2 js进阶系列

  2.1 js设计模式

   参考资料：JavaScript设计模式与开发实践。

序号	模式	特点	demo
1	单例模式	保证一个类仅有一个实例，并提供一个访问它的全局访问点	demo
2	策略模式	定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换	demo
3	代理模式	一个对象提供一个代用品或占位符，以便控制对它的访问	demo
4	迭代器模式	提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示	demo
5	发布—订阅模式	发布—订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知	demo
6	命令模式	命令模式中的命令（command）指的是一个执行某些特定事情的指令	demo
7	组合模式	组合模式是用小的子对象来构建更大的对象，而这些小的子对象本身也许是由更小的“孙对象”构成的	demo
8	模板方法模式	一种只需使用继承就可以实现的非常简单的模式。由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类	demo
9	享元模式	一种用于性能优化的模式，“fly”在这里是苍蝇的意思，意为蝇量级。享元模式的核心是运用共享技术来有效支持大量细粒度的对象。	demo
10	职责链模式	使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止	demo
11	中介者模式	解除对象与对象之间的紧耦合关系。增加一个中介者对象后，所有的相关对象都通过中介者对象来通信，而不是互相引用，所以当一个对象发生改变时，只需要通知中介者对象即可	dmeo
12	装饰者模式	装饰者模式可以动态地给某个对象添加一些额外的职责，而不会影响从这个类中派生的其他对象。	demo
13	状态模式	允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。	demo

3 网络/网络安全

序号	目录	特点
1	http之状态码	暂无

4 浏览器

序号	目录	特点
1	Chrome 架构进程	最新的 Chrome 浏览器包括：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWork）进程、多个渲染进程和多个插件进程

5 框架篇

5.1 react

5.1.1 源码解读

序号	目录	特点
1	React Hook源码浅解析	Hook 是 React 16.8后 的新增特性，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook的诞生，是为共享状态逻辑提供更好的原生途径。React官方文档

6 性能优化

序号	目录	特点
1	浏览器缓存机制	浏览器的存储和缓存机制就是为了减少网格请求，提高用户体验。

7 other

序号	目录	特点
1	导航流程：从输入URL到页面展示，这中间发生了什么？

---