客户端发出
当我们在浏览器地址栏输入一个地址juejin.im/timeline，回车，
- 回车后Http的header包装请求，添加一些需要用到的属性（Accrpt...）
- 进行域名解析，根据域名找到服务器的IP，发起TCP三次握手（建立传输层连接）
- 连接建立后发起http请求
- 请求经过客户端应用层（http协议）
- 请求经过客户端传输层（tcp/udp协议）
- 请求经过客户端网络层（ip协议）
- 请求经过客户端链路层（网卡、路由器）
- dns解析穿过多个jsp（互利网服务提供商，移动，联通，电信...）
- 找到服务器
DNS解析
- 搜索浏览器本身dns缓存
- 如没有则继续搜索操作系统自身dns缓存
- 如没有则继续读取系统文件hosts(System32\drivers\rtc)
- 向本地配置的首选dns服务器（运营商之类的）发起域名解析请求，运营商自检后没有，发起请求至顶级域，然后继续向com域的ip地址发起请求，然后继续向juejin.im的dns地址（腾讯云，域名注册商）发起请求，然后返回结果给运营商，运营商再返回给客户端的系统，系统返回给浏览器，浏览器拿到域名的地址。
服务器端接收
- 请求经过服务器链路层
- 请求经过服务器网络层
- 请求经过服务器传输层
- 请求经过服务器应用层
- 服务器处理：服务器解析http请求，在路由拦截中跳转至对应的Controller层，C层中调用对应的数据Model中，进行数据库操作，将操作结果返回至C层，然后返回对应的页面或者数据resData。
服务器响应
与请求相反，倒过来看上面的传输路径就可以。
客户端请求资源
客户端拿到返回的html代码的话就会解析病请求其中的静态资源，1.1后的http请求使用keep-alive可以在一次连接后请求多个资源。
服务器释放TCP连接（四次挥手）
在头部信息无：Connection:keep-alive时一次请求结束后，服务器即释放连接。
客户端渲染呈现
浏览器根据内部机制，将请求的资源和html代码进行渲染呈现。
解析HTML文件构建DOM树->构建render树->布局render树->绘制render树
渲染内部细节，
关于渲染机制的两个概念：
reflow（重排、回流）：在浏览器进行第4项layout布局render树过程时，其实浏览器就在做reflow的操作。布局是要花时间的，当浏览器发现某个部分的变化影响了布局（改变宽，高，删除，添加节点，移动节点布局位置，修改浏览器默认字体，resize浏览器窗口），需要倒回去重新布局，这个过程叫reflow。
repaint（重绘）：在浏览器进行第5项绘制render树时其实就是进行的repaint操作，在浏览器布局render树完成之后，布局不会再发生改变，仅仅发生一些绘制上的改变（例如改变背景颜色或字体颜色），则需要重新绘制画画。
所以：回流必将引起重绘，而重绘不一定会引起回流。
reflow和repaint都是无法避免的。我们只能够尽可能少地去避免过多的reflow和repaint。
避免reflow和repaint的方法：
- 绝对定位，position：absolute或position：fixed。这样，元素就脱离了文档流，它的变化不会影响到其他元素布局。不过绝对布局丧失了许多灵活性。
- 在JS里不要一条一条去修改CSS样式的属性的值，应该预先写好需要的css的各个样式属性的值，做一个命名，然后只需要修改 DOM 的 className的命名就可以了。
- 不要用tables布局。
- 避免使用CSS的JS表达式
- 不要把DOM节点的属性值拿到循环体里面去做循环，最好是先保存好这个属性值，再去做循环。
拓展
OSI参考模型，开放式系统互连
定义了网络互连的七层框架，物理层、数据链路层、网络层、传输层、会话层、表示层和应用层），即OSI开放系统互连参考模型。详见百度百科OSI参考模型
简书：一次HTTP请求的历程（讲的更清晰，七个步骤）
参考
本文章多数学习自完整的HTTP请求会经历以下过程
渲染学习自当在浏览器输入URL回车后，浏览器到底做了什么？浏览器渲染机制又是怎样的？
