前言
说起来毕业已经快1年了,也在前端摸爬滚打有些时日了,虽然每天都坚持认真地在看一些技术文章,但总感觉印象不深刻,理解不到位,后来看到了这篇文章,才感觉到将自己所学到地知识按照一个体系来填充,是有无限好处的。用行话来讲就是:
- 结构性强
由一条主线引入无线分支,像一棵树一样整理自己的知识,方便自己时时刻刻复习思考
- 可扩展性高
可从主线延伸出无限分支,无限深挖各个知识点进行填充,无限扩展美滋滋
- 可维护性强
自己的笔记与感悟再也不是东一个西一个,通过知识体系可以迅速定位,以后有更加深刻的理解可以及时更新
- 记忆性结果
每次看完很多技术文章后,当时的感觉还不错,但是随着时间的推迟,记忆也就不是很深刻了。而在看过文章的之后的某个时段在知识体系里按位补充,记忆下来的就是自己所获得的知识了
知识体系
本知识体系还是偏前端向的,其中分支挖出来的知识点也是作为一个Coder很需要熟悉的。还是以前言中提到的文章那个问题作为骨架(该markdown仅仅作为骨架,具体知识会有具体的md作笔记)
从客户端输入URL到用户看到网页的过程中都发生了什么?
-
从输入URL到客户端接受到相应的过程
- 浏览器收到
url
开启网络请求线程 (浏览器进程线程) - 浏览器通过
DNS
查询ip
地址 (DNS) - 通过
TCP
三次握手建立连接 (五层七层协议栈) - 发送
HTTP
请求 (HTTP协议) - 服务器接收到请求,通过
nginx
或者其他代理进行负载均衡等一些列操作 (nginx代理配置) - 服务器响应 (node)
- 缓存 (分布于浏览器与服务器端)
- 浏览器收到
-
浏览器接收到响应
- 解析响应的内容 (字符编码)
- 页面渲染流程 (浏览器渲染线程)
- CSS解析 (CSS各种知识)
- JS代码解析执行 (JS语法及各种知识)
-
其他
- 框架 (JQuery, Vue, React)
- 设计模式
Other
自己水平有限,欢迎大家批评指正
如果喜欢可以star一下,以后会不断更新github地址