之前在掘金上看了一篇文章，名为《从输入URL到页面加载的过程—如何由一道题完善自己的前端知识体系！》感觉对整个前端的流程，包括底层的一些工作原理讲的很系统。并融入了很多计算机网路的常识问题。借着给工作室做一次技术分享的机会，我想把相关的知识自己在整理下。
涉及到的知识
按照文章的整个结构，将整个从Url到页面加载分为以下的几个阶段：
- 从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）
- 开启网络线程到发出一个完整的http请求（这一部分涉及到dns查询，tcp/ip请求，五层因特网协议栈等知识）
- 从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）
- 后台和前台的http交互（这一部分包括http头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）
- 单独拎出来的缓存问题，http的缓存（这部分包括http缓存头部，etag，catch-control等）
- 浏览器接收到http数据包后的解析流程（解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树，然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和domcontentloaded等）
- CSS的可视化格式模型（元素的渲染规则，如包含块，控制框，BFC，IFC等概念）
- JS引擎解析过程（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）
- 其它（可以拓展不同的知识模块，如跨域，web安全，hybrid模式等等内容）
接下来的内容也会参考那篇博客，根据这几个点展开描述。
###1.从浏览器接收url到开启网络请求线程
多线程的浏览器
浏览器也像一个操作系统一样，是个多进程的结构，他的每个tag页面都是一个进程，当然远不止这些，这些进程可能还会包括：
- 浏览器的主线程，复杂协调、主控
- 第三方插件进程：这种第三方的插件一般是一个进程，当然只有在插件被调用的时候被创建。
- GPU进程：最多一个，用于3D绘制
- 浏览器的渲染进程（内核）：一般默认每个tab页面一个进程，互不影响，用于页面的渲染和脚本事件的执行。
多线程浏览器内核
正如操作系统中那样，浏览器的tab是一个进程，同时这个进程可能还会分为多个线程，具体可能有下面的进程：
- GUI线程
- JS引擎线程
- 事件触发线程
- 定时器线程
- 网络请求线程
这里，js线程是一个线程存在的，所以我们常说js是个单线程的，他是和其他的线程（如时间触发线程，异步请求线程等）并发进行的。
解析Url
在输入url确认后，浏览器会对其进行相关的解析，主要从下面的部分进行：
protocol，协议头，譬如有http，ftp等host，主机域名或IP地址port，端口号path，目录路径query，即查询参数fragment，即#后的hash值，一般用来定位到某个位置
之后会根据解析的结果，结合HTTP协议，开辟一个网络线程，生成请求去请求资源。