从用户在浏览器地址栏输入网址，到看到整个页面，中间发生了那些事情

分为三个阶段 1.http请求阶段 2.http响应阶段 3.浏览器渲染阶段

第一阶段： 输入url ，浏览器端向服务器端发送请求，开始进入Request阶段，该阶段包含：DNS解析， HTTPS协议，TCP协议3次握手4次挥手等

第二阶段

在浏览器端的磁盘中存放着相对应的源代码的页面，请求到以后进入Response阶段：HTTP状态码，304缓存，HTTP报文

第三阶段

浏览器拿到源代码，浏览器在内存条中开辟一块栈内存，用来给代码执行提供环境，同时浏览器只分配一个主线程进栈出栈的一行一行的解析和执行代码，当代码遇到link img script audio video这些需要额外加载外部资源的文件的请求后，会单独开辟新的线程去加载资源文件，同时浏览器会开辟新的内存空间 等待任务队列，主线程继续向下执行，直到最后一行代码

1.DOM树渲染完成后，等待任务队列中，哪个任务完成哪个任务那回到栈内存中执行,如此循环往复(事件循环)

等待任务队列中还分为宏任务(setTimeOut, setInterval) 和微任务(promise)，微任务优先于宏任务执行，之后 2， 3， 4，最后gpu展现页面

浏览器的渲染机制

1.html由html解析器解析为DOM树

2.css由css解析器解析为CSSOM树

3.DOM树和CSSOM结合生成一棵渲染树

4.生成布局layout(回流，重排) 5.将布局绘制paint(重绘)在屏幕上

性能优化： 减少http请求次数和大小

 

重排(回流): 元素大小位置发生改变

重绘：元素样式发生改变

回流一定重绘

优化重排

1.分离读写操作

2.样式集中改变

3.缓存需要修改的DOM

4.减少回流不操作dom 基于vue/react数据影响视图