一、概述
网页加载渲染主要分为三个阶段：
- DNS解析网址
- 浏览器发送请求与服务器交互过程
- 浏览器对接收到的html页面渲染过程
二、网址域名DNS解析
DNS解析是查找域名这个假名字对应真名字（ip）的过程，它就是存储我们要的东西的那只服务器。
解析过程如下：
- 先从浏览器缓存里找IP,因为浏览器会缓存DNS记录一段时间
- 如果浏览器缓存中找不到需要的DNS记录，就会取操作系统（本地Hosts文件）中找
- 从路由器缓存找
- 本地DNS缓存查找，ISP有专门的DNS服务器应对DNS查询请求
- 如果都没找到,浏览器域名服务器向根域名服务器查找域名对应IP,还没找到就把请求转发到下一级,进行递归查询
三、浏览器与服务器交互过程
经过一顿猛如虎的操作之后，浏览器终于知道想要的东西到底在哪。浏览器与服务器赶紧进行了“三次握手”建立联系，浏览器终于向服务器要到了自己想要的东西
3.1 浏览器利用tcp协议通过三次握手与服务器建立连接
- 第一次握手：客户端向服务器端发送一段TCP报文，请求连接
- 第二次握手：服务器端接收到来自客户端的TCP报文之后，如同意建立连接，返回一段TCP报文需要客户端确认
- 第三次握手：客户端接收到来自服务器端的确认收到数据的TCP报文之后，确认数据传输正常，结束SYN-SENT阶段，向服务器端发送确认报文，TCP连接已建立，客户端进入ESTABLISHED阶段。服务器端收到客户端确认后，也进入ESTABLISHED阶段。
3.2 浏览器根据解析到的IP地址和端口号发起http请求
HTTP报文包括：请求头和报文主体
- 请求头：请求的方式（get和post）、请求的协议 （http、https、ftp）、请求的地址ip、缓存cookie
- 主体：（应被发送的数据）通常并不一定要有报文主体
3.3 服务器接收到http请求之后，返回搜索到的html页面，浏览器开始进行页面的渲染
四、浏览器渲染过程
4.1 一般流程
- 解析html代码，创建DOM树
- 解析css代码，创建CSSOM树
- DOM树+CSSOM树，生成渲染树
- 渲染树创建好，浏览器就可以根据渲染树直接把页面绘制到屏幕上
tips:
页面渲染过程一般都不是一次完成的，可能会经过多次的重排重绘
4.2 重排和重绘
- 重排：当DOM的变化引发了元素几何属性的变化，比如改变元素的宽高，元素的位置，导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树
- 重绘：完成重排后，要将重新构建的渲染树渲染到出来
重排重绘的代价是非常大的，浏览器需要一直进行页面计算，页面也会出现卡顿等对用户不太友好的事情，可以从以下几点提高撸码的品质
- 减少js对DOM与CSSOM操作
- 减少单一操作，进行批量操作，例如：a、隐藏元素，进行修改后，然后再显示该元素。b、用文档片段创建一个子树，然后再拷贝到文档中。c、将原始元素拷贝到一个独立的节点中，操作这个节点，然后覆盖原始元素
