web前端面试之浏览器相关

目录

cookie、localStorage、sessionStorage的区别和使用？

浏览器缓存

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

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

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

浏览器禁用cookie该如何处理

解释一下requestAnimationFrame

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

强缓存和协商缓存

---

 

cookie、localStorage、sessionStorage的区别和使用？

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

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的渲染速度越快，动态网页的展示也越快

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

1、浏览器根据请求的URL交给DNS域名解析，找到真实IP；
2、浏览器根据 IP 地址向服务器发起 TCP 连接，与浏览器建立 TCP 三次握手

• a.客户端向服务器发送一个建立连接的请求
• b.服务器接到请求后发送同意连接的信号
• c.客户端接到同意连接的信号后，再次向服务器发送了确认信号，然后客户端与服务器的连接建立成功

3、浏览器发送HTTP请求
      浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等；
4、服务器处理请求并返回HTTP报文（HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。）：

• a…服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；
• b.服务器将得到的 HTML 文件发送给浏览器；
• c.在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页；
• d在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML 。

5、断开连接

浏览器禁用cookie该如何处理

一般会用到url重写的技术来进行会话跟踪，每一次的交互，都会在url后面加上sid=xxx类似的参数。服务端根据这种方式来识别用户。

解释一下requestAnimationFrame

1. 浏览器专门为DOM动画，canvas动画，SVG动画等等有一个统一的刷新机制。
2. 按帧对网页进行重绘。该方法告诉浏览器希望执行动画并请求浏览器在下一次重绘之前调用回调函数来更新动画，
3. 由系统来决定回调函数的执行时机，在运行时浏览器会自动优化方法的调用。

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

浏览器缓存 -> 本地缓存-> hosts文件 -> 路由器缓存 -> ISP DNS缓存 -> DNS递归查询

强缓存和协商缓存

强缓存和协商缓存。强缓存通过响应头实现：expires和cache-control。它表示在缓存期间不需要在发起请求。协商缓存：如果缓存过期，可以使用协商缓存解决问题。

协商缓存是需要发起请求。协商缓存需要客户端和服务端共同实现。