URL 地址解析
http://
传输协议：能够把客户端和服务端通信的信息进行传输的工具。
常用的传输协议：
- http 超文本传输协议：除了传输文本还可以传输媒体资源文件（流文件）XML格式数据
- https: 更安全的http s:ssl加密传输
- ftp: 文件传输协议 (把本地资源上传到服务端)
域名
给服务器通网后，会有两个ip地址（内网ip，外网ip）。不通过域名，直接用服务器的外网ip也能访问到服务器，但是ip很难记。（域名方便记忆）
DNS 域名解析
DNS 服务器（域名解析服务器），我们发送请求时所谓的DNS解析，其实就是根据域名在DNS服务器上查找到对应服务器的外网IP
DNS优化
- DNS缓存：一般浏览器会在第一次解析后，默认建立缓存（时间很短，1min左右）
- 减少DNS解析次数：发送请求的域名和服务器尽可能少
- DNS预获取（dns-prefetch）：在页面加载开始的时候就把当前页面中需要访问其他域名（服务器）的信息进行提前DNS解析，以后加载到具体内容部分可以不用解析了
TCP
建立TCP连接
三次握手之后就能保证前后端正常交流
- 第一次握手：浏览器发起，告诉服务器我要发送请求了
- 第二次握手：服务器发起，告诉浏览器我准备接收了，发吧
- 第三次握手：浏览器发起，告诉服务器我要发了，接吧
断开TCP协议
四次握手后断开客户端与服务器的连接
- 第一次：浏览器发起，发送服务器请求报文发送完了，你准备关闭
- 第二次：服务器发起，告诉浏览器接收完请求报文，我准备关闭，你也准备
- 第三次：服务器发起，告诉浏览器响应报文发送完毕，你准备关闭
- 第四次：浏览器发起，告诉服务器响应报文接收完毕，我准备关闭，你也准备
经典面试题
用户输入地址到看到页面经历了什么？
请求阶段
- URL 地址解析
- DNS 域名解析
- 和服务器建立TCP连接
- 发送HTTP请求
响应阶段
- 服务器得到并处理请求（http响应内容）
断开连接
- 和服务器断开TCP连接
渲染页面
- 客户端渲染服务器返回的内容
渲染页面
- 生成DOM树，（渲染了所有的HTML标签）
- 生成CSSOM树，（请求回来CSS后，渲染完CSS）
- DOM树 + CSSOM树 =》RENDER-TREE（渲染树）
- 按照 RENDER-TREE在设备的是口中进行结构和位置的相关计算（布局layout或重排/回流reflow）
- 根据渲染树以及回流得到的几何信息得到节点的绝对像素（绘制painting或栅格化）
浏览器线程
浏览器是多线程的，但是js渲染或者页面渲染是单线程的
对于浏览器来说，没新建一个页卡访问一个页面就是开辟一个新进程，一个进程中会包含多个线程。
- GUI渲染进程：渲染和绘制页面
- JS引擎线程：运行和渲染JS代码
css样式渲染
- link>引入：浏览器会开辟一个新的请求线程，专门去服务器加载css样式内容，此时GUI线程继续向下渲染，---异步操作
- @import：不会开辟新线程，css没有加载回来下面的代码不会执行，---同步操作
- 行内，内嵌式：css代码少 html代码回来了css也就回来了
回流和重绘
回流
元素的大小或者位置发生了变化，触发了重新布局导致渲染树重新计算布局和渲染
引发回流：
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化
- 内容发生变化（文本变化或图片被另一个不同尺寸的图片替代）
- 页面一开始渲染的时候
- 因为回流是根据视扣大小来计算元素的位置和大小的，所以浏览器的窗口尺寸变化也会引发回流
重绘
元素样式改变（但宽高，大小，位置等不变）
outline，visibility，color，background-color....
重绘不是很耗性能，但是回流很耗性能，一旦发生回流重新计算完后还需要重绘。
回流一定会触发重绘，而重绘不一定会回流
避免DOM的回流
- 动画效果应用到position属性为absolute或fixed的元素上（脱离文档流)
