1.输入一个URL到页面过程中发生了什么?
1.首先在浏览器中输入URL
2.查找缓存,首先先查看浏览器缓存-系统缓存-路由缓存这个顺序中查找是否有该地址,如果有则显示页面内容,没有则进行下一步
3.DNS域名解析:浏览器向DNS服务器发起请求,解析该URL种域名对应的IP地址(DNS服务器基于UDP,因此会用到UDP协议)
4.建立TCP连接:解析出IP地址后,根据IP地址和默认80端口,和服务器建立TCP连接
5.发起HTTP请求:浏览器发起读取文件的HTTP请求,该请求报文作为TCP三次握手的第三次数据发送给服务器
6.服务器响应请求并返回结果:服务器对浏览器请求做出响应,并把对应的html文件发送给浏览器
7.关闭TCP连接:通过四次挥手释放TCP连接
8.浏览器渲染:浏览器解析HTML内容并渲染出来,浏览器接收到数据包后的解析流程为
- 构建DOM树:词法分析然后解析成DOM树,由dom元素及属性节点组成,树的根是document对象
- 构建css规则树:生成css规则树
- 构建render树:浏览器将DOM和CSSOM结合,并构建出渲染树
*布局:计算出每个节点在屏幕中的位置 - 绘制:遍历render树,并使用UI后端层绘制每个节点
2.vue生命周期
create阶段:vue实例被创建 beforeCreate:创建前,此时data和methods中的数据都还没有初始化;created:创建完毕,data中有值,未挂载
mount阶段:vue实例被挂载到真实DOM节点 beforeMount:可以发起服务器请求;mounted:此时可以操作DOM
update阶段:当vue实例里面的data数据发生变化时,触发组件的重新渲染(beforeUpdate updated)
destory阶段:vue实例被销毁 beforeDestroy:实例被销毁前 destroyed
3.vue2.0和vue3.0有什么区别
1.响应式系统的重新配置,双向数据绑定的原理不同,使用es6的ProxyAPI(代理)替换对象.define属性。使用代理优势
- 可直接监控列类型的数据变化
*监听的对象是对象本身,不需要像Object.defineProperty那样遍历每个属性,有一定的性能提升 - 省去for循环,闭包等内容来提升效率
- 直接添加对象属性/删除
- 直接监听数组,不需要再去单独对数组做特异性操作
2.支持碎片(多个根节点)
vue2不支持碎片,而vue3支持