计网&浏览器面试题

Frank
  • 前端面试
  • 面试复盘
  • 计网
  • 浏览器
大约 5 分钟约 1360 字...

说一下 http 和 https 的区别?

https=http+ssl

https 有 CA 证书,http 一般没有

http 是超文本传输协议,信息是明文传输的。https 则是具有安全性的 SSL 加密传输协议。

http 默认 80 端口,https 默认 443 端口

tcp 和 udp 的区别?

  1. 基于连接与无连接;
  2. 对系统资源的要求(TCP 较多,UDP 少);
  3. UDP 程序结构较简单;
  4. 流模式与数据报模式 ;
  5. TCP 保证数据正确性,UDP 可能丢包,TCP 保证数据顺序,UDP 不保证。

一文搞懂 TCP 与 UDP 的区别open in new window

如何解决跨域问题?

跨域open in new window

同源策略

  • JSONP
  • CORS

手写一个简易的 ajax

const xhr = new XMLHttpRequest()
xhr.responseType = 'json'
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.response)
    } else if (xhr.status === 404) {
      console.log('404 not found')
    }
  }
}
xhr.open('GET', 'https://www.imooc.com/api/http/search/suggest?words=js', true)
xhr.send(null)
// promise版
function ajax(url) {
  return new Promise(function (resolve, reject) {
    const xhr = new XMLHttpRequest()
    xhr.responseType = 'json'
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.response)
        } else if (xhr.status === 404) {
          reject(new Error('404 not Found'))
        }
      }
    }
    xhr.open('GET', url, true)
    xhr.send(null)
  })
}
ajax('https://www.imooc.com/api/http/search/suggest?words=js').then(res =>
  console.log(res)
)

Cookie、LocalStorage、SessionStorage 区别

同源:协议相同/域名相同/端口相同

  1. 存储大小

cookie:4k

sessionStorage:5M

localStorage:5M

  1. 生命周期

cookie:一般由服务器生成,可以设置失效时间;若没有设置时间,关闭浏览器 cookie 失效,如果设置了时间,过期后失效

Web Storage 的目的是为了克服由 cookie 带来的一些限制,当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器。Web Storage 的两个主要目标是:

  • 提供一种在 cookie 之外存储会话数据的途径。
  • 提供一种存储大量可以跨会话存在的数据的机制。

sessionStorage:仅在当前浏览器窗口关闭之前有效,关闭页面或者浏览器会被清除

localStorage:永久有效,窗口或者浏览器关闭也会一直保存,除非手动永久删除

  1. 作用域

cookie:Cookie 的作用域仅仅由 domain(cookie 的作用域是 domain 本身以及 domain 下的所有子域名。例如设置xxx.com为 domain 的 cookie 时,只有该域名或者其子域名才能获取到这个 cookie)和 path 决定(path限定了访问cookie的范围(同一域名),使用 JS 只能读写当前路径和上級路径的 Cookie,无法读写下级路径的 Cookie ),与协议和端口无关

在访问子路径时,会包含其父路径的 Cookie,而在访问父路径时,不包含子路径的 Cookie

sessionStorage:当前会话窗口

localStorage:在所有同源窗口中共享

  1. 通信

cookie:cookie 在浏览器和服务器之间来回传递,如果使用 cookie 保存过多数据会造成性能问题

sessionStorage:仅在客户端(浏览器)中保存,不参与服务器的通信

localStorage:仅在客户端(浏览器)中保存,不参与服务器的通信

  1. 应用场景

cookie:保存用户登录状态;跟踪用户行为

sessionStorage:敏感账号一次性登录,单页面用的较多

localStorage:用于长期登录,适于长期保存在本地的数据

从输入 URL 到看到页面发生了什么?

  • 浏览器地址栏输入 URL 并回车
  • 浏览器查找当前 URL 是否存在缓存,并比较缓存是否过期
  • DNS 解析 URL 对应的 IP
  • 根据 IP 建立 TCP 连接(三次握手)
  • 发送 http 请求
  • 服务器处理请求,浏览器接受 HTTP 响应
  • 浏览器解析并渲染页面
  • 关闭 TCP 连接(四次挥手)

get 和 post 请求有什么区别?

Post 和 Get 是 HTTP 请求的两种方法,其区别如下:

  • 应用场景: GET 请求是一个幂等(是指可以使用相同参数重复执行,并能获得相同结果的函数。)的请求,一般 Get 请求用于对服务器资源不会产生影响的场景,比如说请求一个网页的资源。而 Post 不是一个幂等的请求,一般用于对服务器资源会产生影响的情景,比如注册用户这一类的操作。

  • 是否缓存: 因为两者应用场景不同,浏览器一般会对 Get 请求缓存,但很少对 Post 请求缓存。

  • 发送的报文格式: Get 请求的报文中实体部分为空,Post 请求的报文中实体部分一般为向服务器发送的数据。

  • 安全性: Get 请求可以将请求的参数放入 url 中向服务器发送,这样的做法相对于 Post 请求来说是不太安全的,因为请求的 url 会被保留在历史记录中。

  • 请求长度: 浏览器由于对 url 长度的限制,所以会影响 get 请求发送数据时的长度。这个限制是浏览器规定的,并不是 RFC 规定的。

  • 参数类型: post 的参数传递支持更多的数据类型。

上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1