从输入url到页面展示的过程

输入地址---浏览器解析域名---通过IP向服务器发送请求---服务器返回资源---页面渲染

1，输入地址

用户在浏览器地址栏输入地址的时候，浏览器会从历史记录，书签等地方根据用户输入的字符串去只能匹配，实现智能补全。

url:统一资源定位符

url构成:协议名://主机名:端口号/路径?参数#锚点  

2，浏览器解析域名

浏览器实际上不知道www.baidu.com是什么东西，需要进行域名解析；

浏览器如何进行域名解析：浏览器缓存/系统缓存/路由器缓存

如果这些都找不到域名对应的IP，浏览器就会发起一个DNS(域名解析系统)的系统调用，向本地配置的DNS服务器发起域名解析，DNS服务器会先检查自身缓存是否有该域名对应的且未过期的IP的地址，如果存在，则解析成功。如果没有，则发起迭代DNS请求，直到解析成功。

 

3，通过IP向服务器发送请求

拿到域名对应的IP地址后，浏览器会以一个随机的端口号向服务器的web程序80/8080发起TCP连接请求，连接请求到达服务器后，通过网卡，进入内核的TCP/IP协议栈，还可能经过防火墙，进入web程序，最终建立TCP/IP连接。

如果有nginx反向代理服务器，用户发送的请求不会直接进入应用服务器，而是经过反向代理服务器根据实际的情况，将用户的请求传递给某个应用服务器。

4，服务端返回资源

服务端响应状态码：

1XX:信息状态码

100 继续，请求者应当继续提出请求，服务器已经收到一部分，正在等待其余部分。

2XX:成功状态码

200:成功，服务器已经成功处理了请求

3XX:重定向

301:永久重定向

302:临时重定向

303:查看其他位置

4XX:客户端错误状态码

400:服务端无法理解请求格式

401:请求没有经过身份验证或验证未通过

403:禁止访问，服务器拒绝此请求

404:服务器未找到请求地址

5XX:服务端错误

503:服务器目前无法使用

5，浏览器渲染页面

浏览器通过渲染引擎解析HTML和CSS代码，实现页面渲染。

浏览器通过JS引擎解析JS脚本，实现界面交互。

1，根据HTML和CSS构建DOM树和CSSDOM树，构建DOM树期间，如果遇到JS阻塞DOM树和CSSDOM树的构建，优先加载JS文件，加载完毕，则继续构建DOM树和CSSDOM树；

2，根据DOM树和CSSDOM树，构建render树；

3，布局render树

4，绘制render树

回流（重排）reflow:当浏览器某个部分的变化影响了布局，就会倒回去重新渲染。

重绘（repaint）:改变元素的不影响布局的样式属性时，该元素的样式要重画。

哪些动作引起重排：

1，添加删除可见的DOM元素

2，元素的位置改变----position float display overflow

3，元素自身大小改变

4，浏览器窗口尺寸改变

如何避免和减少重排：

1，改变样式时，直接改变className

2，需要多次重排的元素，让其脱离文档流

3，如果要创建多个DOM节点，可以使用DocumentFragment创建完后一次性加入

4，如果对某一元素多次设置样式，可以将其dispaly:none,其样式修改完后，在将其dispaly:block