从0开始构建自己的前端知识体系

前言

说起来毕业已经快1年了，也在前端摸爬滚打有些时日了，虽然每天都坚持认真地在看一些技术文章，但总感觉印象不深刻，理解不到位，后来看到了这篇文章，才感觉到将自己所学到地知识按照一个体系来填充，是有无限好处的。用行话来讲就是：

• 结构性强

  由一条主线引入无线分支，像一棵树一样整理自己的知识，方便自己时时刻刻复习思考

• 可扩展性高

  可从主线延伸出无限分支，无限深挖各个知识点进行填充，无限扩展美滋滋

• 可维护性强

  自己的笔记与感悟再也不是东一个西一个，通过知识体系可以迅速定位，以后有更加深刻的理解可以及时更新

• 记忆性结果

  每次看完很多技术文章后，当时的感觉还不错，但是随着时间的推迟，记忆也就不是很深刻了。而在看过文章的之后的某个时段在知识体系里按位补充，记忆下来的就是自己所获得的知识了

知识体系

本知识体系还是偏前端向的，其中分支挖出来的知识点也是作为一个Coder很需要熟悉的。还是以前言中提到的文章那个问题作为骨架（该markdown仅仅作为骨架，具体知识会有具体的md作笔记)

从客户端输入URL到用户看到网页的过程中都发生了什么？

1. 从输入URL到客户端接受到相应的过程

   • 浏览器收到url开启网络请求线程 (浏览器进程线程)
   • 浏览器通过DNS查询ip地址 (DNS)
   • 通过TCP三次握手建立连接 (五层七层协议栈)
   • 发送HTTP请求 (HTTP协议)
   • 服务器接收到请求，通过nginx或者其他代理进行负载均衡等一些列操作 (nginx代理配置)
   • 服务器响应 (node)
   • 缓存 (分布于浏览器与服务器端)

2. 浏览器接收到响应

   • 解析响应的内容 (字符编码)
   • 页面渲染流程 (浏览器渲染线程)
   • CSS解析 (CSS各种知识)
   • JS代码解析执行 (JS语法及各种知识)

3. 其他

   • 框架 (JQuery, Vue, React)
   • 设计模式

Other

自己水平有限，欢迎大家批评指正

如果喜欢可以star一下，以后会不断更新github地址