TypeScript 面试专题

interface 与 type 异同点

这可能是最经典的一道 TS 面试题了，因此这里我们放在第一个知识点来讲解。

及格线

不论如何，以下这些概念是你需要基本了解的，否则很容易被怀疑是否真的深入使用过 TypeScript 。

• 在对象扩展情况下，interface 使用 extends 关键字，而 type 使用交叉类型（&）。
• 同名的 interface 会自动合并，并且在合并时会要求兼容原接口的结构。
• interface 与 type 都可以描述对象类型、函数类型、Class 类型，但 interface 无法像 type 那样表达元组、一组联合类型等等。
• interface 无法使用映射类型等类型工具，也就意味着在类型编程场景中我们还是应该使用 type 。

参照

「2021」高频前端面试题汇总之计算机网络篇

计网面试题汇总

一、HTTP协议

1. GET和POST的请求的区别⭐⭐

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

• 应用场景： GET 请求是一个幂等的请求，一般 Get 请求用于对服务器资源不会产生影响的场景，比如说请求一个网页的资源。而 Post 不是一个幂等的请求，用于产生新的资源（201状态码），一般用于对服务器资源会产生影响的情景，比如注册用户这一类的操作。
• 是否缓存： 因为两者应用场景不同，浏览器一般会对 Get 请求缓存，但很少对 Post 请求缓存。
• 发送的报文格式： Get 请求的报文中实体部分为空，Post 请求的报文中实体部分一般为向服务器发送的数据。
• 安全性： Get 请求可以将请求的参数放入 url 中向服务器发送，这样的做法相对于 Post 请求来说是不太安全的，因为请求的 url 会被保留在历史记录中。
• 请求长度： 浏览器由于对 url 长度的限制，所以会影响 get 请求发送数据时的长度。这个限制是浏览器规定的，并不是 RFC （Request for Comments 请求意见稿）规定的。
• 参数类型： post 的参数传递支持更多的数据类型，JSON、表单、XML等等。

CDN 内容分发网络

CDN（Content Delivery Network 或 Content Distribution Network），中文名叫“内容分发网络”。

为什么要有网络加速？

你可能要问了，HTTP 的传输速度也不算差啊，而且还有更好的 HTTP/2，为什么还要再有一个额外的 CDN 来加速呢？是不是有点“多此一举”呢？

这里我们就必须要考虑现实中会遇到的问题了。你一定知道，光速是有限的，虽然每秒 30 万公里，但这只是真空中的上限，在实际的电缆、光缆中的速度会下降到原本的三分之二左右，也就是 20 万公里 / 秒，这样一来，地理位置的距离导致的传输延迟就会变得比较明显了。

HTML 高频

引用URL的标签属性href与src的区别是什么？

• 区别

  • href

    • 表示超文本引用，指向网络资源的所在位置，用来建立当前文档和引用资源的联系

    • 浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理，这也是在文档中不使用@import的原因

      <link href="./style.css" rel="stylesheet" />
      

      <a href="https://xdclass.net" />
      

  • src

    • 引用资源（js脚本、图片），将目标资源下载应用到当前文档

      <script src="script.js"></script>
      

    • 当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕，这也是js脚本放到底部的原因

• 总结

  • src用于引入文件，href用于在当前文档和引用资源之间建立联系。

Vue 3 面试题集合（系统整理升级变动）

web前端面试 - 面试官系列

https://zhuanlan.zhihu.com/p/335478785

https://segmentfault.com/a/1190000038848131

https://juejin.cn/post/7063370784244236325

参照：

「2021」高频前端面试题汇总之Vue篇（上）

Vue 面试（上）

一、Vue 基础

1. Vue的基本原理 ⭐⭐

当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使用proxy ）将它们转为 getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。

参照：

「2021」高频前端面试题汇总之Vue篇（下）

Vue 面试（下）

四、路由

1. Vue-Router 的懒加载如何实现

非懒加载：

import List from '@/components/list.vue'
const router = new VueRouter({
  routes: [
    { path: '/list', component: List }
  ]
})

参照 「2021」高频前端面试题汇总之React篇（上）

React 面试题（一）

一、组件基础

1. React 事件机制 ⭐⭐

<div onClick={this.handleClick.bind(this)}>点我</div>

参照 「2021」高频前端面试题汇总之React篇（下）

https://juejin.cn/post/7066951709678895141

https://juejin.cn/post/6944863057000529933

https://juejin.cn/post/7119102104337121316

HTML知识点汇总

参照： 「2021」高频前端面试题汇总之HTML篇 补充

1. src和href的区别 ⭐⭐

src和href都是用来引用外部的资源，它们的区别如下：t

• src： 表示对资源的使用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。（优先权高）
• href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上。