浏览器中输入url到显示

1.输入url
2.缓存解析
  从浏览器缓存-系统缓存-路由缓存中查看，如果有缓存就直接用，没有就直接进行域名解析
3.域名解析
  域名解析就是DNS解析，就是从域名到Ip地址的转换过程，域名的解析由dns服务完成，
  解析完成之后获取域名相应的ip地址 
4.tcp三次握手，四次挥手

一.tcp三次握手（建立连接，准备传输）
三次握手
前两步相当于是确定可以建立沟通，第三次是准备开始发送消息了

第一次：客户端发送消息到服务端，告诉服务端，告诉服务端客户端要找他，如果服务端收到消息第一次握手完成

第二次握手： 服务端返回信息向客户端告诉客户端收到了信息，客户端收到消息第二次握手完成

第三次握手：
客户端向服务端发送消息，告诉服务端想要进行的操作，然后准备发包，服务端收到指令，完成第三次
  
 二.传输内容
 三.四次挥手（断开连接）
 第一次：客户端告诉服务端所有需要的请求发送完了。
 第二次：这个时候服务端收到消息，可能还在发送着未发送完的东西，它会告诉客户端收到
 第三次：服务端发送完了，告诉客户端
 第四次：客户端收到到消息，确认接收完了，告诉服务端可以断开连接了
 
5.渲染页面
  当浏览器的网络线程收到HTML文档后。会产生一个渲染任务，并将其传递给渲
  染主线程的消息队列，在事件循环机制的作用下，渲染主线程取出消息队列中
  的渲染任务，开启渲染流程。
  
  整个渲染流程分为多个阶段，主要有：html解析，样式计算，布局，分层，绘制，分块，光栅化，画。
  每个阶段都有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入，这样整个渲染流程就形成了一套组织严密的生产流水线。
  01.渲染的第一步是解析Html:
    解析过程中遇到css解析css,遇到js就解析js.为了提高解析效率，浏览器在
  开始解析前，会启动一个预解析的线程，率先下载html中的外部js和外部css文件。
    如果主线程解析到link位置，此时外部的css文件还没下载解析好，主线程不会等待，会继续解析后续的html,这是因为下载和解析的工作在预解析的线程中进行的，这就是css不会阻塞html解析的根本原因。
    如果主线程解析到script位置，会停止html解析，转而等待js文件下好，并将全局代码解析完成后，才能继续解析html.这是因为js代码在解析过程中可能会修改当前dom树，所以dom树的生成必须暂停，这就是js会阻塞html的根本原因
    第一步解析完成之后，会得到DOM树和CSSOM树，浏览器的默认样式，内部样式，外部样式，内联样式都会包含在cssom树中
    
  02.样式计算
    tip:
    css属性计算过程就发生在这个时候，css里面有两个很重要的点：
    css属性计算过程(包括层叠，继承这些)和视觉格式化模型(包括盒模型，包含快，BFC,流式布局,浮动布局)。
    正文：
     主线程会遍历所得到的dom树，依次为树中的每个节点计算出他的样式，称之为computed style,在这个过程中，很多预设值会变成绝对值，例如red会变成rgb(255,0,0);相对单位会变成绝对单位，比如em会变成px.
     这一步完成后会得到一颗带有样式的dom树
     
   03.布局
     布局完成后后得到布局树，布局阶段会依次遍历dom树的每一个节点，计算每个节点的几何信息，例如节点的宽高，相对包含快的位置，大部分时候，dom树和布局树不一定会一一对应，比如display:none的节点就没有几何信息，所以会生成到布局树中，还有匿名行盒，匿名块盒等待都会导致dom树和布局树无法一一对应
     
   04.分层
    这里会牵扯到一个概念，css堆叠上下文，例如zindex,opacity,transform;
    主线程会使用一套复杂的策略对整个布局树中进行分层，分层的好处在于，将来某一个层改变后，仅会对该层进行后续处理，从而提升效率。
    滚动条，堆叠上下文，transform,opacity等样式都会或多或少影响分层结果，也可以通过will-change更大程度的影响分层结果。
    
   05.绘制和分块
    主线程会对每个层单独产生绘制指令集（指令类似于canvas绘制指令，一条一条指令形成指令集），用于描述这一层的内容该如何画出来，绘制完成后，主线程会将每个图层的绘制信息提交给合成线程，剩余工作将由合成线程完成，合成线程首先将图层进行分块，将其划分为更多的小区域，它会从线程池中取出多个线程来完成分块工作.分块完成后进行光栅化阶段。  
    
    06.光栅化
    合成线程会将信息交给GPU进程，以极高的速度完成光栅化，GPU进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块，光栅化的结果就是一块一块的区域位图。
    
    07.画
    最后一个阶段就是画，合成线程拿到每个层，每个块的位图后，生成一个个指引信息，指引会标识出每个位图应该画到哪个位置，  以及会考虑到旋转，缩放等变形，变形发生在合成线程，与渲染线程无关，这就是transform效率搞得本质，合成线程会把指引提交给GPU进程，由GPU产生系统调用，提交给GPU硬件，完成最终的屏幕成像.