浏览器：从URL输入到网页呈现的过程中，发生了什么？

基础版本：

1.浏览器会根据请求的URL交给DNS域名解析，找到真实的ip，向服务器发起请求。
2.服务器交给后台处理后返回数据，浏览器接受文件（HTML，JS,CSS，图像等）；
3.浏览器对加载到的资源（HTML,JS,CSS等）进行语法解析，建立相对应的内部数据结构（如：HTML的DOM）；
4.载入解析到的资源文件，渲染页面，完成。

---

完善版

1.从浏览器接受url到开启网络请求线程（浏览器的机制以及线程之间的关系）
2.开启网络线程到发出一个完整的http请求（涉及dns查询，tcp/ip请求，5层因特网协议栈等知识）
3.从服务器接收到请求都对应后台接受到请求（涉及负载均衡，安全拦截以及后台内部处理等等）
4.后台和前台的http交互（涉及HTTP头部、响应码、报文结构、cookie等知识，及静态资源的cookie优化，以及编码解码，如gzip压缩等）
5.缓存问题，HTTP的缓存（包括http缓存头部，ETag，cach-control等）
6.浏览器接收到HTTP数据包的解析流程（解析html-词法分析，然后解析成dom树、解析css生成css规则树、合并成render树，然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和DOMContentedLoaded等）
7.CSS的可视化格式模型（元素的渲染规则，如包含块，控制框，BFC，IFC概念）
8.JS引擎解析过程（JS的解析阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链，回收机制等概念）
9.其他（可以扩展不同的知识模块，如跨域，web安全，hybrid模式等等内容）

---

详细版

在地址栏输入一个URL到网页呈现的过程中，中间发生了什么？*

• 在浏览器输入URL后，首先需要找到这个url域名的服务器ip，为了寻找这个ip，浏览器首先会寻找缓存，查看缓存中是否会有记录，（缓存的查找记录为：浏览器缓存 ->系统缓存 ->路由器缓存）若缓存中没有，则查找系统中的host文件中是否有记录，如果没有，则查询DNS服务器。
• 得到服务器的ip地址后，浏览器会根据这个ip以及相对应的端口号，构造一个http请求，这个请求报文会包括这次请求的信息，（主要是请求方法，请求说明和请求附带的数据）并将这个http请求封装在一个tcp包中，这个tcp包会依次经过传输层，网络层，数据链路层，物理层到达服务器，服务器解析这个请求来作为响应，返回相应的html给浏览器，因为html是一个树形结构，浏览器会根据这个html来搭建DOM树，（在dom树的构建过程中如果遇见js脚本和外部js连接，则会停止构建DOM树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐js代码应该放在html的代码的后面，之后根据外部央视和内部央视，内联样式构建一个css对象模型树CSSOM树，构建完成后和DOM树合并为渲染树，这里主要做的是排除非视觉节点，比如script，meta标签和排除display为none的节点，之后进行布局。布局主要是确定各个元素的位置和尺寸，之后是渲染页面。
• 因为html文件中会包含图片，视频，音频等资源。在解析DOM的过程中，遇到这些都会进行并行下载，浏览器会对每个域的并行下载数量有一定的限制，一般是4-6个，当然在这些所有请求当中，我们还需要关注缓存，缓存一般通过Cache-Control、Last-Modify、Expries等首部字段控制。Cache-Control和Expires的区别在于Cache-Control的使用相对时间，Expries使用的是基于服务器端的绝对时间，因为存在时差问题，一般采用Cache-control，在请求这些有设置了缓存的数据时，会先查看是否过期，如果没有过期则直接使用本地缓存，过期则请求并在服务器校验文件是否修改，如果上一次响应设置了ETag值会在这次请求的时候作为if-None-Match的值交给服务器校验，如果一致，继续校验Last-Modified，没有设置ETag则直接验证Last-Modified，再决定是否返回304码。