web前端面试之浏览器相关

最新推荐文章于 2024-04-19 05:12:04 发布

qq_36987708

最新推荐文章于 2024-04-19 05:12:04 发布

阅读量165

点赞数

分类专栏： web前端面试题文章标签：面试经验分享

本文链接：https://blog.csdn.net/qq_36987708/article/details/108057787

版权

web前端面试题专栏收录该内容

8 篇文章 0 订阅

订阅专栏

浏览器缓存

如何实现浏览器多标签页之间的通信？

说说你对浏览器内核的理解？

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

浏览器禁用cookie该如何处理

解释一下requestAnimationFrame

DNS是如何解析的？如何优化

强缓存和协商缓存

名称	大小	网络请求	生命周期
cookie	4kb左右	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	默认是关闭浏览器后失效, 但是也可以设置过期时间
localstorage	5M	仅在浏览器中保存，不参与和服务器的通信	除非手动被清除，否则永久保存
SessionStorage	5M	仅在浏览器中保存，不参与和服务器的通信	仅在当前会话(窗口)下有效，关闭窗口或浏览器后被清除, 不能设置过期时间

名称

大小

网络请求

生命周期

4kb左右

每次都会携带在HTTP头中，

如果使用cookie保存过多数据会带来性能问题

默认是关闭浏览器后失效, 但是也可以设置过期时间

localstorage

仅在浏览器中保存，不参与和服务器的通信

除非手动被清除，否则永久保存

SessionStorage

仅在浏览器中保存，不参与和服务器的通信

仅在当前会话(窗口)下有效，

关闭窗口或浏览器后被清除, 不能设置过期时间

cookie：是存储在本地的数据，有时候也用cookies，通常经过加密，应用最经典的就是判断注册用户是否已经登录过该网站。
localStorage：仅在客户端保存（即浏览器），不参与和服务器的通信；没有时间限制，即使浏览器关闭，数据依然存在；

创建和访问localStorage：

1）、设置数据：

var forgetData = {phone:vm.phone};
localStorage.setItem("forgetData",JSON.Stringfy(forgetData)); // forgetData是存储在localStorage里边的本地数据； JSON.Stringfy(forgetData)是将数据转化为字符串格式；

获取数据：
vm.forgetData=JSON.parse(localStorage.getItem("forgetData")); //将字符串转化为JSON化；

2）、设置：localStorage.name = "zhao";
获取：localStorage.name //zhao
localStorage.setItem(key,value);//设置数据
localStorage.getItem(key);//获取数据
localStorage.removeItem(key);//删除单个数据
localStorage.clear();//清除所有localStorage的数据

sessionStorage：当用户的浏览器窗口关闭时，数据会被清除；

共同点：都是保存在浏览器端，且同源的。

区别：

cookie数据始终在同源的http请求中携带9即使不需要)，即cookie在浏览器和服务器之间来回传递；cookie数据还有路径的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据大小不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只能保存很小的数据。

sessionStorage和localStorage不会自动把数据发给服务器，只在本地保存，虽然也有大小限制，但是要比cookie大得多，可以达到5M或者更大。

数据有效期不同：

sessionStorage仅在当前浏览器窗口关闭前有效，不能持久保存；
localStorage：始终有效，浏览器窗口关闭也一直保存；
cookie：只在cookie设置的过期时间之前保存，即使浏览器窗口关闭。

作用域不同:

sessionStorage在不同浏览器窗口的数据不能共享，即使是同一个页面；
localStorage在所有的同源窗口中都是共享的；
cookie也是在同源窗口中共享的。

浏览器缓存

1、sessionStorage
优点：可以临时存储，关闭页面标签自动回收，不支持跨页面交互
缺点：只能作为临时存储，不能存储持久化
2、localStorage
优点：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
缺点：存在大小限制，IE8以上的IE版本才支持这个属性；目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3、cookie
优点：兼容性最好，几乎所有的浏览器都支持
缺点：大小有限制，而且每次发送请求，请求头里会带着cookie一起发过去，现在基本大多数登录的合法性验证都是用cookie验证的
4、userData
优点：出现的时间比sessionStorage要早
缺点：IE专门的存储方式，存储大小有限，单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB

如何实现浏览器多标签页之间的通信？

调用localStorage、cookie本地存储方式。

说说你对浏览器内核的理解？

浏览器内核主要包括以下三个技术分支：排版渲染引擎、 JavaScript引擎，以及其他。
排版渲染引擎：主要负责取得网页的内容(HTML、XML、图像等)、整理信息，以及计算网页的显示方式，然后输出至显示器
JavaScript引擎：是用来渲染JavaScript的，JavaScript的渲染速度越快，动态网页的展示也越快