输入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表达式