浏览器输入 URL 发生了什么

输入url

输入url时候，地址栏会判断输入的url是不是url结构的字符串，不是的话使用浏览器默认的搜索引擎搜索
是url结构的字符串,浏览器进程会通过进程间的通讯将url发送给网络进程
网络进程接受到url后，会进行DNS解析，获得所对应的IP
DNS解析域名的步骤分为以下几个步骤:

• 询问浏览器缓存
• 浏览器缓存没有找到，就会询问本地操作系统缓存
• 本地操作系统缓存没有找到，就会访问互联网服务商的DNS服务器
• 还是没有找到，就会询问根服务器

建立连接

建立TCP连接，即三次握手过程：

• 客服端发送标有SYN的数据包，告诉服务端说，我要发送请求了
• 服务端发送SYM/ACK数据包，告诉客户端说，我收到了，你可以发送请求了
• 客服端发送ACL数据包，说，我发送请求了，准备接受

然后通过TCP通道，进行数据的传输：

• 服务器接受到数据包后，发送确认数据包收到的信息给客户端，不断重复这个过程
• 客服端在发送数据包后未接受到服务端的确定消息，会重新发送该数据包
• 接收端接受完数据包后，会通过TCP头中需要进行排序，形成完整的数据包

断开TCP连接，即四次挥手过程:

• 客服端发送请求，说我要断开连接了，这时，客户端进入等待阶段，不会发送数据，会继续接受数据
• 服务端接受请求后，会告知客户端说，我收到了，这时候服务端也处于等待阶段，不在接受数据，会继续发送数据
  客户端接受后，会进入下一阶段等待
• 服务端发送完数据后，会告知客服端说，可以断开连接了，这时服务端不会接收数据，也不会发送数据
• 客服端接受到后，会告知服务端，说，我要开始断开连接了
  服务端接受到后，开始断开连接

渲染页面

浏览器是多线程的，js是单线程，浏览器拿到代码后会开辟一个内存块，为代码执行提供环境，浏览器只会提供一个主线程去执行解析代码，
当遇到link、script、img标签时，浏览器会分配新的线程去加载资源(任务队列：任务1，任务2...)

当代码第一次自上往下执行完后，只会生成dom树
然后回去等待队列中查看哪个任务执行完，把执行完的任务放到栈内存中执行，
执行完后，再去任务队列中查看哪个任务执行完，一直不停地循环，直到执行完等待任务队列中的任务（这个过程叫event Loop）
event Loop：分为微任务和宏任务，所有的微任务都优先于宏任务先执行

css处理完后，会生成CSSOM,这时候浏览器会把dom树和CSSOM结合生成渲染树，

根据渲染树来计算他们在视口确切的大小和位置（这叫回流）
根据渲染树和回流得到的几何信息，得到节点的绝对像素（这叫重绘）
发送给CPU进行渲染

此处的性能优化：

• 1、减少http请求，合并资源
• 2、图片懒加载
• 3、cdn、304缓存
• 4、减少回流和重绘

怎么减少回流和重绘：

• 1、分离读写
• 2、集中修改样式
• 3、缓存处理
• 4、元素批量修改
• 5、动画效果运用到postion属性为absolute或fixed的元素上（脱离文档流）
• 6、开启css3硬件加速（GPU加速）(能用transform,就不要用其他，因为transform开启了css3硬件加速，而硬件加速可以规避回流
• 7、牺牲平滑度换取速度（比如做一个动画，如果一像素一像素的移动，如果使用了100%CPU,动画会看上去是跳动的， 因为浏览器正在与更新回流作斗争，每次移动3像素，虽然平滑度低了，但是不会导致cpu在较慢的机器中抖动）
• 8、避免table布局和使用css的JavaScript表达式