从输入URL到页面呈现发生了什么
主流程
- 输入 URL
- DNS 解析 URL
- 建立 TCP 连接（连接复用）
- 发送 HTTP 请求
- 服务器收到请求，发送 HTTP 响应
- 浏览器解析渲染页面
- 关闭 TCP 连接
详细流程
从输入url到开启网络请求线程
URL中文名叫做统一资源定位符。 主要包含
- protocol（协议）
- hostname（主机名）
- port（端口号）
- path（路径）
当输入网址时，浏览器会从历史记录、书签等智能匹配url给出提示。 输入完成后，浏览器会新开一个页面进程，然后这个进程会开启一个网络线程进行http请求。
网络请求
查找强缓存
先检查强缓存，如果命中直接使用。
DNS解析
如果输入IP地址，则不需要DNS解析，如果输入域名，则需要进行DNS解析获取IP地址。
查找顺序：浏览器缓存–>操作系统缓存–>本地host文件–>路由器缓存–>ISP DNS缓存–>根DNS服务器
建立TCP连接
如果是HTTPS，要进行TLS/SSL四次握手
以随机端口（1024<端口<63535)向服务器的web程序通过三次握手建立tcp连接。
发送HTTP请求
完成tcp连接后，浏览器可以向服务器发送HTTP请求。浏览器HTTP请求包含三部分：请求行、请求头、请求体、
请求行包含请求方法、路径、HTTP协议版本。
// 请求方法是GET，路径为根路径（URI），HTTP协议版本为1.1 GET / HTTP/1.1
请求头包含各种属性，例如缓存，Cookie，时间，连接方式（是否长连接），CORS等相关。
服务器处理
服务器对浏览器请求做出响应，并把对应的html文件发送给浏览器。
浏览器解析渲染
浏览器获得HTML、css、js文件后，开始进行解析：
- 解析html建立dom树
- 解析css构建style树
- dom树和style树两者结合生成布局（Layout)树，然后计算布局树节点的坐标位置。
值得注意的是，这棵布局树值包含可见元素，对于 head标签和设置了display: none的元素，将不会被放入其中。
渲染过程：
- 建立图层树（Layer Tree)
- 生成绘制列表
- 生成图块并栅格化
- 显示器显示内容
图层树是根据节点的属性，例如z-index，产生的层叠上下文。 浏览器渲染的图层一般包含两大类：普通图层以及复合图层。 普通文档流可以理解为一个复合图层。 通过z-idnex、opacity、translate3D的css动画属性等会生成复合图层，两者可单独绘制，互不影响
JS引擎解析过程
调用JS引擎执行JS代码（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）
- 创建window对象：window对象也叫全局执行环境，当页面产生时就被创建，所有的全局变量和函数都属于window的属性和方法，而DOM Tree也会映射在window的doucment对象上。当关闭网页或者关闭浏览器时，全局执行环境会被销毁。
- 加载文件：完成js引擎分析它的语法与词法是否合法，如果合法进入预编译
- 预编译：在预编译的过程中，浏览器会寻找全局变量声明，把它作为window的属性加入到window对象中，并给变量赋值为’undefined’；寻找全局函数声明，把它作为window的方法加入到window对象中，并将函数体赋值给他（匿名函数是不参与预编译的，因为它是变量）。而变量提升作为不合理的地方在ES6中已经解决了，函数提升还存在。
- 解释执行：执行到变量就赋值，如果变量没有被定义，也就没有被预编译直接赋值，在ES5非严格模式下这个变量会成为window的一个属性，也就是成为全局变量。string、int这样的值就是直接把值放在变量的存储空间里，object对象就是把指针指向变量的存储空间。函数执行，就将函数的环境推入一个环境的栈中，执行完成后再弹出，控制权交还给之前的环境。JS作用域其实就是这样的执行流机制实现的。