前端面试题

发表于 | 分类于

前端面试题。

HTTP协议

(1).常见的请求方法

HTTP 1.0

  • 1.GET：从指定的资源请求数据
  • 2.POST：向指定的资源提交要被处理的数据，例如
    • 1.提交表单
    • 2.将消息发布到公告板，新闻组，邮件列表，博客或类似的文章组；
  • 3.HEAD
    • 1.类似于get请求，只不过返回的响应中没有具体的内容，只有头部
    • 2.只请求资源的首部
    • 3.检查超链接的有效性
    • 4.检查网页是否被修改

HTTP1.1

  • 1.PUT：替换或创建指定资源
  • 2.DELETE：对指定资源进行删除

HTTP2.0

  • 1.OPTIONS： 用于获取目的资源所支持的通信选项，比如说服务器支持的请求方式等等。

  • 2.TRACE：实现沿通向目标资源的路径的消息环回（loop-back）测试 ，提供了一种实用的 debug 机制。

  • 3.CONNECT

    • 1.为代理服务器准备的

    • 2.在 HTTP 协议中，CONNECT 方法可以开启一个客户端与所请求资源之间的双向沟通的通道。它可以用来创建隧道（tunnel）。例如，CONNECT 可以用来访问采用了 SSL (HTTPS) 协议的站点。客户端要求代理服务器将 TCP 连接作为通往目的主机隧道。之后该服务器会代替客户端与目的主机建立连接。连接建立好之后，代理服务器会面向客户端发送或接收 TCP 消息流。

所有通用服务器必须支持GET和HEAD方法。所有其他方法都是可选的。

  • 1.安全性：在此规范定义的请求方法中，GET，HEAD，OPTIONS和TRACE方法被定义为安全的
  • 2.幂等性：PUT，DELETE和安全Method是幂等的。
  • 3.可缓存性：GET, HEAD, and POST。但大多数是只实现GET和HEAD可缓存
    • 1.表示浏览器是会自动缓存的，以应用于后续请求。除非response中有相关策略

(2).GET 和 POST 的区别

  • 1.get参数通过url传递，post放在request body中。

  • 2.get请求在url中传递的参数是有长度限制的，而post没有。

  • 3.get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。

  • 4.get请求只能进行url编码，而post支持多种编码方式

  • 5.get请求会浏览器主动cache，而post支持多种编码方式。

  • 6.get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。

  • 7.GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

(3).HTTP 状态码

  • 1xx (Informational): 收到请求，正在处理
  • 2xx (Successful): 该请求已成功收到，理解并接受
  • 3xx (Redirection): 重定向
  • 4xx (Client Error): 该请求包含错误的语法或不能为完成
  • 5xx (Server Error): 服务器错误

(4).301 和 302 有什么具体区别

  • 301：永久移动，请求的网页已永久移动到新的位置，服务器返回此响应，会自动将请求者转到新位置

  • 302：历史移动，服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来继续以后的请求。

MVVM和MVC
  • MVC: MVC是应用最广泛的软件架构之一,一般MVC分为:Model(模型),View(视图),Controller(控制器)。 这主要是基于分层的目的,让彼此的职责分开.View一般用过Controller来和Model进行联系。Controller是Model和View的协调者,View和Model不直接联系。基本都是单向联系。

    1.View传送指令到Controller。

2.Controller完成业务逻辑后改变Model状态。

3.Model将新的数据发送至View,用户得到反馈。

  • MVVM: MVVM是把MVC中的Controller改变成了ViewModel。

    View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示,通过数据来显示视图层。

2.MVVM模式的优点以及与MVC模式的区别

  • MVVM模式的优点:

    • 低耦合:View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
    • 可重用性: 可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。
    • 独立开发: 开发人员可以专注于业务逻辑和数据的开发,设计人员可以专注于页面的设计。

  • MVVM和MVC的区别:

    • MVC中Controller演变成MVVM中的ViewModel
    • MVVM通过数据来显示视图层而不是节点操作
    • MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低,加载速度变慢,影响用户体验
ajax

(1).实现一个Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var xhr = new XMLHttpRequest()
// 必须在调用 open()之前指定 onreadystatechange 事件处理程序才能确保跨浏览器兼容性
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status ==== 304) {
      console.log(xhr.responseText)
    } else {
      console.log('Error:' + xhr.status)
    }
  }
}
// 第三个参数表示异步发送请求
xhr.open('get', '/api/getSth',  true)
// 参数为作为请求主体发送的数据
xhr.send(null)

(2).Ajax状态

0–未初始化。尚未调用 open()方法。
1–启动。已经调用 open()方法，但尚未调用 send()方法。
2–发送。已经调用 send()方法，但尚未接收到响应。
3–接收。已经接收到部分响应数据。
4–完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

(3).将原生的 ajax 封装成 promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const ajax = (url, method, async, data) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.onreadystatechange = () => {
      // 已经接收到全部响应数据，而且已经可以在客户端使用了
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText))
        } else if (xhr.status > 400) {
          reject('发生错误')
        }
      }
    }
    xhr.open(url, method, async)
    xhr.send(data || null)
  })
}

有补充或者有更通俗易懂的小伙伴可以私信或者加QQ群：163958730（已满） 145454260 一起讨论~

shadow wechat
扫一扫，关注微信公众号。