持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情
前言
大家好，我是小阵，身为一个前端小菜鸟，总是有一个飞高飞远的梦想，因此，每点小成长，我都想要让它变得更有意义，为了自己，也为了更多值得的人
开开心心学技术大法~~
来了来了，他真的来了~
正文
浏览器输入url之后发生了什么？
老生常谈的一个问题，这里再正儿八经侃一遍。☺️
-
用户在浏览器中输入url
-
url如果是域名+path则需要做域名解析
-
域名解析全称为dns域名解析，根本原理是本地存储的一份ip与域名的map缓存
-
这里的本地并只是单纯的指本机
-
dns解析过程：
- 浏览器本地查找映射
- 本机查找映射，也就是本系统查找映射
- 当地网络代理商查询映射
- internet查询映射
- 上面任一步骤查到映射之后，都会将映射到的ip地址代替域名做真正的请求
-
通过目标ip请求到目标服务器
- 如果中间有代理服务器
- 代理服务器会再将ip做二次转发
- 如果是高防服务器，可能不止有二次转发，还会做其他处理
-
请求到目标服务器在会后跟服务器建立连接
-
tcp三次握手
- 客户端告诉服务器我要请求了
- 服务器告诉客户端我收到你的请求信息了，你是否能收到我"收到请求后的确认请求"
- 客户端收到了服务端"收到请求后的确认请求"之后tcp三次握手过程就结束了
- 建立tcp链接通道，开始传输信息
-
传输信息完成之后，开始tcp四次挥手来断开链接
-
-
客户端接收到服务器的信息之后
-
我们按照页面初始加载来进行讨论
- 因此cdn本身也是个服务器，请求cdn上的html地址本身也是正常的资源请求
- 按照上面的流程走过之后，客户端拿到了html资源请求，然后依据html这个入口开始继续请求别的资源，比如css、js
-
依据html页面构建dom树并显示到页面上
-
依据css构建样式树挂在到指定dom
-
依据css树和dom树生成render树
-
render树的生成需要有layout和paint的概念，也就是计算dom布局信息和刷样式
-
css之后就是js
-
加载js文件之后首先通过浏览器引擎对js进行词法分析和语法分析
-
以上检查都通过之后才会进行预编译
-
预编译过程中会进行变量存储、执行环境划分、挂在全局变量、挂在局部变量等一系列初始化操作
-
之后是js的执行阶段，在刷过预编译阶段之后，所有的可执行function或其他（只是以function距离）正式进入执行阶段，比如自执行函数（或者其他某种情况下要执行的方法）
以上就是全部过程了，中间还牵扯很多细节，尤其是css和dom树的交叉渲染，js文件加载跟HTML、css的互相抢夺资源加载。
这些都还需要每个部分单独研究，如果只是为了理解其中的关键节点，以上基本就够用了。
结语
文章如有错误或不严谨之处，还望指出，感谢感谢！！！
往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」
