金九前端面试总结！

小小小十七
13,678 阅读17分钟

前言

  • 又至一年金九银十，笔者不知道是幸运呢还是不幸，笔者也再一次加入到了换工作的大流中，经历过大大小小 10 多家公司的洗礼。连肝三天整理记下一些常问和笔者碰见的不常见问题（但却重要的）问题，涉及 HTML、CSS、JavaScript、TypeScript、Vue、React、Webpack、浏览器、手撕代码及其他问题。

HTML

HTML5 有哪些新特性？

  1. 拖拽释放(Drag and drop) API；
  2. 语义化更好的内容标签（header,nav,footer,aside,article,section）；
  3. 音频、视频 API (audio,video)；
  4. 画布 (Canvas) API、矢量图SVG；
  5. 地理 (Geolocation) API；
  6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除；
  7. 表单控件，calendar、date、time、email、url、search...；
  8. 新的技术 Web Worker, WebSocket...；
  9. SVG。

对 HTML5 语义化的理解？列举一些废弃及新增的标签？

  • 语义化

    1. 页面的 内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;

    2. 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;

    3. 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

  • 新增标签
    1. header、footer、section、nav、article、hgroup、aside、video、audio...
  • 移除标签
    1. 纯表现的元素：basefont、big、center、font、s、strike、tt、u；
    2. 对可用性产生负面影响的元素：frame、frameset、noframes。

meta 标签有什么作用？介绍一下？

行内元素和块级元素的区别？

  1. 行内元素会在一条直线上排列，都是同一行的，水平方向排列。块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
  2. 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
  3. 行内元素设置 width 无效，height 无效(可以设置 line-height)，margin、padding 上下无效。

什么是渐进增强和优雅降级？

  • 渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  • 优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

iframe 如何和父窗口通信？

iframe 内部打开一个链接会发生什么？

areaObject.target=_blank|_parent|_self|_top
  • 当设置 iframe 内部的 a 标签 target 属性为 _black 时，无论嵌套多少层 iframe 都会在最外层的网页中新开一个页面；
  • 当设置 iframe 内部的 a 标签 target 属性为 _parent 时，会把当前 iframe 的父级页面替换；
  • 当设置 iframe 内部的 a 标签 target 属性为 _self 时，会把 iframe 自身替换；
  • 当设置 iframe 内部的 a 标签 target 属性为 _top 时，无论嵌套多少层 iframe 都会替换最外层的网页。

CSS

CSS3 有哪些新增属性？

  • box-shadow、text-shadow、animate、transfrom、 transition 、border-radius等等。

animate、transfrom 和 transition 有什么区别？

CSS 动画如何优化性能？

  • will-change 属性：在浏览器执行动画之前，提前告诉浏览器，此处需要 GPU 加速，提高显示效果，但动画结束后要及时去除这个属性。
  • translate3d 进行 GPU 加速。
  • requestAnimationFrame API。

position 属性有哪些值？介绍下？

不使用 position:sticky; 属性如何实现相应效果？

  • 滚动添加事件，获取滚动高度，判断滚动高度改变对应需要粘性定位的元素的 position 属性；
  • 滚动添加事件，通过元素的 getBoundingClientRect 方法，通过 top 值判断距离顶部的高度（适用于不易获取滚动高度的情况），改变对应需要粘性定位的元素的 position 属性。

如何使一个元素不可见？有哪些方式？

  • display: none;
  • visibility: hidden;
  • position 移除可是区域
  • position index 负值
  • transform
  • opacity: 0; filter:Alpha(opacity=0）
  • height: 0; overflow: hidden;
  • background-color: transparent;

重绘和回流？哪些情况重绘，哪些回流？

  • 回流：Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。
  • 重绘：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），这些属性只是影响元素的外观，风格，而不会影响布局的，浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
  • 回流必将引起重绘，而重绘不一定会引起回流。

九宫格，使用 CSS 如何实现鼠标移入显示不同的边框（不额外占用格子宽度）？

怎么实现一个 9/16 自适应的的区域？

  • padding-bottom: 56.25%;.

padding 的百分比基于什么？

  • 父级对象的 width。

移动端适配1px问题？

  • 使用 transform: scale(0.5)。

选择器的优先级？

  • !important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)

伪类和伪元素的区别？举例。

元素水平垂直居中方法？定宽高和不定宽高。

flex 和 grid 介绍？

双飞翼布局实现方式有哪些？

BFC、IFC、GFC、FFC 的区别？

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

JavaScript

什么是原型和原型链？

JavaScript 实现继承的几种方式?

JavaScript 的基本数据类型有哪些？

  • String、Number、Boolean、Null、Undefined、Symbol、BigInt。

如何判断数据类型？有哪些方式？

  • typeof
  • instanceof
  • 特殊：isNaN、isArray、prototype、constructor...
  • 最好：Object.prototype.toString.call()

new 操作做了什么事情？

什么是闭包？有什么作用？

  • 什么是闭包
    • 定义：闭包是指有权访问另一个函数作用域中的变量的一个函数。简单的说，你可以认为闭包是一个特别的函数，他能够读取其他函数内部变量的函数。
    • 自由变量：在当前作用域没有定义，在父作用域及以上定义了，他会一层一层的往上找。闭包的中那个没有被回收的变量就是自由变量。自由变量是在函数定义的那里一层层的往上找。
  • 作用
    1. 希望变量长期驻扎在内存当中（一般函数执行完毕，变量和参数会被销毁）；
    2. 避免全局变量的污染。

什么是内存泄漏？哪些情况会造成？

介绍一下垃圾回收机制？

事件委托？

ES6 有哪些新特性？

模块化有哪些方式？

CommonJS 和 ES6 模块化有什么区别？

数组哪些方法会改变原属组？

  • push、pop、shift、unshift、splice、reverse、sort。

for, for...in,for...of,forEach, map 的区别？

  • 返回值：for, for...in,for...of 无返回值，forEach 返回 undefined，map 返回操作后数组。
  • 空位：for...in,forEach,map 跳过空位，for,for...of 不跳过空位。
  • break、continue：for,for...of,for...in 可以打断，forEach,map 语法错误；代码无法执行。

深拷贝和浅拷贝的区别？怎么实现一个深拷贝？

  • B 复制了 A，当修改 A 时，看 B 是否会发生变化，如果 B 也跟着变，说明这是浅拷贝；如果 `B 没变，那就是深拷贝。

...、concat 和 slice 是深拷贝还是浅拷贝？

  • ...对基本数据类型是深拷贝，引用类型是浅拷贝。
  • concat 和 slice是浅拷贝。

介绍一下 Promise ？

Promise 可以一直执行 then 方法吗？

  • 可以
const promise = new Promise(function(resolve, reject) {
    // ... some code
});
promise.then().then()

Proxy 的作用？有哪些方法？

防抖、节流区别及实现？

虚拟 Dom 一定比真实 Dom 快吗？什么情况下不是？

  • 不一定；仅仅是一个元素或较少元素，那么后者还是最快的。
  • 虚拟 Dom VS 真实 Dom 虚拟Dom | 真实Dom | | ------------------------------------ | ------------------------------------ | | 更新的更快 | 更新的较慢 | | 不能直接更新HTML | 可以直接更新HTML | | Dom操作非常便利 | Dom操作非常昂贵 | | 内存无浪费 | 内存浪费严重

公众号打开浏览器，JavaScript 如何关闭浏览器回到公众号窗口？

  • WeixinJSBridge.call('closeWindow')

TypeScript

TypeScript 有哪些基本数据类型？

  • 原始数据类型：boolean、number、string、null、undefined、Symbol；
  • 非原始数据类型：数组、Tuple、enum、never、void、any、联合类型、函数类型。

interface 和 type 的区别？

  1. interface 能够声明合并，type 不能；
  2. type 可以声明 基本类型，联合类型，元组 的别名，interface 不行；
  3. type 语句中可以使用 typeof 获取类型实例；
  4. type 支持类型映射，interface 不支持。

void 和 never 的区别？

  • void 类型表示没有任何类型。 一般用于一个方法没有返回值的情况。（方法没有返回值将得到 undefined，但是我们需要定义成 void 类型，而不是 undefined 类型。）
  • never 类型表示的是那些永不存在的值的类型，包括 null 和 undefined。（never 类型是不会有返回值的函数表达式，或箭头函数表达式的返回值类型，也可以是永远不会为真的变量。）

怎么声明一个函数既可以接受字符串返回字符串也可以接受数值返回数值？

  • 声明两个同名函数、泛型

泛型的作用？常用的泛型有哪些？

Vue

为什么 Vue 叫渐进式框架？

  • 渐进式的含义：没有多做职责之外的事。
  • Vue 没有强 主张（每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求），你可以在原有大系统的上面，把一两个组件改用它实现，当 jQuery 用；也可以整个用它全家桶开发，当 Angular 用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用 OO（object-oriented） 和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

介绍一下 Vue 的生命周期？

diff 算法原理？

父子组件渲染及卸载的流程？

双向绑定原理？

Vue3.0 的变化有哪些？

为什么替换 defineProperty 为 Proxy ？两者有什么优缺点？

v-if 和 v-for 优先级？

  • 2.0 v-for 高于 v-if，3.0 v-if 高于 v-for。

watch 和 computed 有什么区别？

nextTick 的原理及使用场景？

Vue3 的 composition 解决了什么问题？

  • data、method 重名的问题；
  • 隐形依赖的问题: 项目大时一个页面几十个 mixin 模块混入，然后各个 mixin 之间还有 data 参数和 method 相互调用。

React

介绍下 React 生命周期（16前、16.3、16.4）？

React 和 Vue 的区别？

Component 和 PureComponent 的区别？

  • PureComponent 通过 props 和 state 的浅对比来实现shouldComponentUpdate()。
  • 注意：在 PureComponent 中，如果包含比较复杂的数据结构，当深层的数据发生变化的时候，因为浅对比所以导致界面不会更新。

受控组件 和 非受控组件 的区别？

受控组件非受控组件
1. 没有维持自己的状态1. 保持着自己的状态
2.数据由父组件控制2.数据由 DOM 控制
3. 通过 props 获取当前值，然后通过回调通知更改3. Refs 用于获取其当前值

有状态 和 无状态的区别？

有状态组件无状态组件
1. 在内存中存储有关组件状态变化的信息1. 计算组件的内部的状态
2. 有权改变状态2. 无权改变状态
3. 包含过去、现在和未来可能的状态变化情况3. 不包含过去，现在和未来可能发生的状态变化情况
4. 接受无状态组件状态变化要求的通知，然后将 props 发送给他们。4.从有状态组件接收 props 并将其视为回调函数。

组件传值有哪些情况，对应有哪些方式？

React 和 Vue 的 diff 算法比较？

setState 是同步还是异步？

知道 Fiber 吗？介绍一下？

路由实现方式，与常规路由区别？

  • react-router的实现原理
  • 常规路由 VS React 路由 主题 | 常规路由 | React 路由 | | ---------- | ----------------------------- | ---------------- | | 参与的页面 | 每个视图对应一个新文件 | 只涉及单个HTML页面 | | URL 更改 | HTTP 请求被发送到服务器并且接收相应的 HTML 页面 | 仅更改历史记录属性 | | 体验 | 用户实际在每个视图的不同页面切换 | 用户认为自己正在不同的页面间切换

Hooks 有什么优缺点？

useMemo 和 useCallback 的区别？

  • 相同：

    1. useMemo 和 useCallback 接收的参数都是一样,第一个参数为回调 第二个参数为要依赖的数据
    2. 仅仅依赖数据发生变化, 才会重新计算结果，起缓存作用。

  • 不同：

    1. useMemo 计算结果是 return 回来的值, 主要用于缓存计算结果的值 ，应用场景如： 需要计算的状态
    2. useCallback 计算结果是函数, 主要用于缓存函数，应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 state 的变化 整个组件 都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。

  • 不要滥用会造成性能浪费，react 中减少 render 就能提高性能，所以这个仅仅只针对缓存能减少重复渲染时使用和缓存计算结果。

useEffect 有什么作用？

Hooks 使用有遇到什么问题？

Hooks 如何判断子组件是否需要更新？

  • useMemo 将变化需要更新子组件的数据放入依赖（第二个参数）中。

有自己封装过 Hooks 吗？介绍一下？

  • useWinSize：window size 变化返回变化后的宽高。

有做过性能优化吗？有哪些方式？

Webpack

Webpack 有哪些配置项？

Webpack 构建流程？

热更新原理？

dev-server 解决跨域原理？

Babel 的原理？

loader 和 plugin 的作用？有自己实现过吗？

如何提高 Webpack 的构建速度？

  1. CommonsChunkPlugin 来提取公共代码
  2. externals 配置来提取常用库
  3. 利用 DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引用但是绝对不会修改的 npm 包来进行预编译，再通过 DllReferencePlugin 将预编译的模块加载进来。
  4. Happypack 实现多线程加速编译。
  5. webpack-uglify-parallel（多核并行压缩来提升压缩速度）提升 uglifyPlugin 的压缩速度。
  6. Tree-shaking 和 Scope Hoisting 来剔除多余代码。

浏览器

cookie、session 和 token 的区别？

地址栏输入 URL 发生了什么？

浏览器缓存策略？

浏览器缓存方式有哪些？

DNS 域名解析过程?

http 三次握手和四次挥手？

HTTP1.0、HTTP1.1 和 HTTP2.0 的区别？

https 加密过程？

什么是事件循环？

如何区分任务是微任务还是宏任务？

  • 宿主环境（使javascript完美运行的环境，常见的有浏览器和 Node）提供的叫宏任务，由语言标准提供的叫微任务。
  • 常见的 macrotask 有：
    • <script>（同步的代码执行）
    • setTimeout
    • setInterval
    • setImmediate (Node 环境中)
    • requestAnimationFrame
    • I/O
    • UI rendering
  • 常见的microtask有：
    • process.nextTick (Node 环境中)
    • Promise.then()
    • Object.observe (基本上已经废弃)
    • MutationObserver

什么是跨域？有哪些解决方案？

ajax、fetch 和 axios 的区别？

页面间通信有哪些方式？

WebSocket 和 http 的区别？

XSS 和 CSRF 区别及防范？

手写代码

Promise

柯里化

发布订阅模式

LRU 淘汰算法

二叉树求和

多维数组扁平去重

其他

前端性能优化有哪些方式？

如何实现埋点？保持数据不丢失？

base64 的作用及优缺点？

git 常用命令？merge 和 rebase 的区别？

git submodule 知道吗？

怎么去选择一个框架或者插件（例如React、Vue，Moment.js、Day.js）呢？

你未来的职业规划是怎样的？

哪个项目是你做得最好的？介绍一下。

你对下一份工作的期望，更看重哪些方面？

面试好文

往期精彩

「点赞、收藏和评论」

❤️关注+点赞收藏+评论+分享❤️，手留余香，谢谢🙏大家。

avatar
文章
阅读
粉丝