开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21天，点击查看活动详情
面试中被经常问到的一个问题是，一个网站访问从输入URL到页面加载的过程，我们今天这篇文章就来分析一下这个问题的答案
1、从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）
浏览器机制包括浏览器的构成部分，各线程之间的关系，处理网络请求的线程的工作流程等
2、开启网络线程到发出一个完整的http请求（这一部分涉及到dns查询，tcp/ip请求，五层因特网协议栈等知识）
dns查询阶段：浏览器会首先从缓存中找是否存在域名，如果存在就直接取出对应的ip地址，如果没有就开启一个DNS域名解析器。DNS域名解析器会首先访问顶级域名服务器，将对应的ip发给客户端；然后访问根域名解析器，将对应的ip发给客户端；最后访问本地域名服务器，得到最终的ip地址。 以及tcp、ip协议族体系，包括建立http请求的三次握手过程，断开连接的四次挥手过程 还有数据传输时的七层模型也是一个要点
3、从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）
4、后台和前台的http交互（这一部分包括http头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）
这一部分会扩展到关于http协议的探究，http协议中http1.0和http2.0的区别，有哪些新功能等，传输问题中的超时重传，用拥塞控制等
具体到响应内容会考察响应体结构，内容等，也会涉及到请求跨域处理等，重点就是浏览器的cros，
5、单独拎出来的缓存问题，http的缓存
包括http请求头中关于缓存控制的字段，缓存的类型，强缓存，协商缓存等，以及他们的实现方案
6、浏览器接收到http数据包后的解析流程（解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树，然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和domcontentloaded等）
浏览器GUI渲染线程：HTML转换成dom树、将CSS样式转换成style表、创建布局树、对布局树进行分层，为每个图层生成绘制列表、将图层分成图块，光栅化将图块转换成位图、合成线程发送绘制图块命令DrawQuad给浏览器进程，浏览器进程根据DrawQuad消息生成页面，并显示到显示器上。
重排：当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排 。
重排特点：style后面所有流程都更新 。
重绘：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程 。
重绘特点：跳过布局和分层阶段 。
重排必重绘。
JavaScript引擎线程：GUI渲染线程与JS引擎线程互斥，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞 。
