国内前端开发面试题

换个角度看待八股文，每日三省吾身。

面试流程

技术⾯试通常⾄少三轮:

1. 基础⾯试: 主要考察对岗位和简历中涉及到基础知识部分的提问,包括⼀部分算法和场景设计的⾯试题,这⼀⾯可能会 涉及现场coding.
2. 项⽬⾯试: 主要考察简历中涉及的项⽬,会涉及你项⽬的相关业务知识、 扮演⻆⾊、 技术取舍、 技术攻坚等等.
3. HR⾯试: 这⼀⾯通常是HR把关,主要涉及⾏为⾯试,考察候选⼈是否价值观符合公司要求、 ⼯作稳定性如何、 沟通协 作能⼒如何等等

基础面试

自我介绍

• 个人信息：姓名，岗位，工作年限
• 技术栈：
• 技能擅长：

做题，可以和面试官沟通，让面试官给予适当的引导，提示。

项目面试

人事面试

⾯对⼤量超过⾃⼰承受能⼒且时间有限的⼯作时你会怎么办?

时间管理：将⼤量任务分解为紧急且重要、 重要但不紧急、 紧急但不重要、 不重要且不紧急,依次完成上述任务

沟通能力：与⾃⼰的领导沟通将不重要的任务放缓执⾏或者砍掉,或者派给组内的新⼈处理

为什么从上⼀家公司离职?

学习方面：团队太小，没人沟通交流技术

你还有其他公司的Offer吗?

• 表明⾃⼰有确认过的offer，但是不要透露具体公司

• 第⼀意向是本公司,如果薪资差距不⼤,会优先考虑本公司

HTML 面试题

DOCTYPE 的作用是什么

DOCTYPE 是 html 标准网页声明，且必须声明在HTML文档的第一行来告知浏览器的解析器用什么文档标准解析这个文档。

HTML、XHTML、XML有什么区别

HTML: 网页的基本描述语言 XML：主要用于存储数据和结构，其作用现已被JSON替代

HTML 语义化的理解

使用恰当语义的标签让页面具有良好的结构与含义。

语义化的好处主要有两点：

• 开发者友好：使用语义类标签增强了代码的可读性
• 机器友好：带有语义的文字表现力更丰富，更适合爬虫爬取有效信息，支持语音阅读
• 无障碍友好：更方便无障碍工具分析页面，提升无障碍体验。

有哪些常用的 meta 标签

<!-- 指定文档编码 -->
<meta chartset="UTF-8">
<!-- 相当于HTTP Header -->
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:12:00 GMT">
<!-- 视口控制 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--PWA相关  -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

用于设计响应式的图片

• srcset 定义了我们允许浏览器选择的图像集
• sizes 定义了一组媒体条件

script 标签中 defer 和 async 的区别

• defer 异步加载脚本，该脚本在文档解析后后执行
• async 异步加载脚本，当该脚本加载完成时立即执行，会打断文档的解析

前端数据持久化的方式

• cookie
• sessionStorage
• localStorage
• IndexedDB
• Web SQL

CSS 面试题

CSS 选择器的优先级

非常基础，略过

link 和 @import 的区别

• link 属于 HTML，@import 是 CSS 提供的
• 页面被加载时 link指向的css文件会被加载，@import引用的css会等待页面被加载完再加载
• @import 必须放在引入它的文件的头部

隐藏页面元素的方式

• opacity: 0 依然占据空间，可以交互
• visibility: hidden 占据空间，不可交互
• overflow: hidden 隐藏溢出部分
• display: none 彻底隐藏元素
• z-index: -9999 将层级放大底部，切忌使用
• transform: scale(0, 0) 占据空间，不可交互，切忌使用

px em rem 的区别

• px：绝对单位
• em，相对单位，如果自身定义了font-size，以自身字体大小为准，否则以父字体大小元素为准
• rem，相对单位，相对于根元素 html 的字体大小

CSS 定位属性

• static
• relative
• fixed
• sticky

为什么动画中常用translate改变元素的位置

translate 是 transform 的一个值，改变 transform 或 opacity 不会触发浏览器重新布局(reflow)或重新绘制(repaint)，只会触发复合（compositons）。

transform 使浏览器为元素创建一个 GPU 图层，但改变绝对定位会导致 DOM 树的更新，进行 CPU 计算。

JS 面试题

基础

如何判断是否是数组

数组对象的静态方法：Array.isArray(arg)

对象原型的toString：Object.prototype.toString.call(arg)

如何实现不可变对象

• 深度拷贝 _.deepClone()
• immutable.js https://github.com/immutable-js/immutable-js
• immer.js https://github.com/immerjs/immer
• Object.freeze()

类型转换的原理和规则

JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换 (Type Conversion ) 将值转换为布尔值，例如条件语句和循环语句。

在 JavaScript 中只有 8 个 falsy 值。它们分别是

• false
• '', ""
• 0
• -0
• 0n
• NaN
• null
• undefined。

为什么 0.1 + 0.2 不等于 0.3

• 存储精度
• IEEE754标准，浮点数在内存中的存储

JS 的 Number 类型遵循的是 IEEE 754 标准， 使⽤的是 64 位固定⻓度来表示。

• 1位符号位
• 11位指数位
• 52位数值位

console.log(0.1 + 0.2)
// 0.30000000000000004
// 17位数之后会丢失精度
console.log(1234567890123456789)
// 1234567890123456800
console.log(0.1234567890123456789)
// 0.12345678901234568

说一下 esm 和 cjs 的区别

• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
• CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。

机制

一段js代码是如何执行的

• 加载js
• 执行，变量提升，字节码，JIT
• 单线程，任务队列，事件循环

解释一下变量提升

JS 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。

这造成的结果就是所有的声明语句，都会被提升到代码的头部，这就叫变量提升。

谈谈对作用域链的理解

JS 属于静态作用域，声明的作用域是根据程序在编译时确定的，有时也称作词法作用域。

JS 在执行过程中会创造可执行上下文，可执行上下文的词法环境中含有外部词法环境的引用，我们可以通过这个引用获取外部词法环境的变量，声明等，这些引用串联起来一直指向全局的词法环境，因此形成了作用域链。

谈谈对 闭包 的理解

闭包是什么，闭包就是一个函数和该函数体内可访问的变量总和。

闭包的产生，为了实现作用域链。

闭包的作用，闭包最大的作用就是隐藏内部变量。

谈谈对 this 的理解

普通函数和作用域 指向 执行时上下文 箭头函数 指向 声明时上下文

this ==> this绑定 ==> 执行上下文

谈谈对原型链的理解

原型对象，原型链

工厂模式 ==> 原型模式 ==> 享元模式

内存

js 的变量存储在哪里

一般认为

• 基本类型存储在栈中，被闭包引用时成为常驻内存，存储在内存堆中
• 复杂类型存储在内存堆中

js 垃圾回收机制

• 根
• 可达性
• 引用计数

异步

async 和 await 是什么？

生成器函数的语法糖，是对 Promise 的 语法优化

异步 ==> 协程 ==> 进程 线程 协程

async 相对 Promise 的优势

• 写法更加优化
• 调试更加友好

HTTP 面试题

HTTP有哪些方法

HTTP1.0: GET POST HEAD

HTTP1.1: OPTIONS PUT DELETE TRACE CONNECT

• GET 请求资源
• HEAD 请求资源的头部信息
• OPTIONS 获取资源所支持的通信选项，常见于CORS
• POST 发送数据给服务器
• PUT 发送数据给服务器，一般表示新增
• DELETE 用于删除指定资源
• PATCH 用于修改资源
• CONNECT 预留给使用管道方式的代理服务器
• TRACE 回显服务器收到的请求，一般用于测试

GET VS POST

• 数据传输方式，GET 参数在 URL中，POST 参数在 Body 中
• 安全性：相同
• 易用性：GET 携带参数方便进行分享
• 缓存：GET 请求一般可以缓存
• 特性：GET 只读幂等，POST 非幂等。当然最终还是要看服务端的实现

报文的结构

请求报文4部分组成

• 请求行
• 请求头
• 空行
• 请求体

响应报文4部分组成

• 响应行
• 响应头
• 空行
• 响应体

报文头字段

通用头字段

• Cache-Control
• Connection
• Upgrade
• via
• Wraning
• Transfor-Encoding
• Trailer
• Pragma
• Date

请求头字段

• Accept
• Accept-Encoding
• Accept-Language
• Accept-Charset
• Range
• Authorization
• Proxy-Authorization
• Host
• From
• User-Agent
• Referer
• Expect

响应头字段

• Accept-Ranges
• Age
• Location
• Content-MD5
• Content-Location
• Content-Ranges
• Etag
• Last-Modified
• Expires

状态码

1xx

• 101 Switch

2xx 成功

• 200 OK 正确处理
• 201 Ceated
• 202 Accepted
• 206 Partial Content 范围请求

3xx 重定向

• 301 Moved Permanetly 永久重定向
• 302 Found 临时重定向
• 303 See Other 请使用另一个URL获取
• 304 Not Modified 未修改，可使用缓存资源
• 307 Temporary Rediect 临时重定向

4xx 客户端错误

• 400 Bad Request 语法错误
• 401 Unauthorized 未授权，一般提示需要登录
• 402 Payment Required 未付费，大多不实现此状态码
• 403 Forbidden 拒绝访问资源
• 404 Not Found 资源未能找到
• 408 Request Timeout 客户端请求超时
• 409 Conflict 冲突

5xx 服务端错误

• 500 Internal Server Error 服务端执行出错
• 501 Not Implemented 服务端未实现
• 503 Service Unavailable 服务不可用
• 505 HTTP Version Not Supported 不支持的HTTP版本

keep-alive

表示长连接，后续HTTP请求重用相同的TCP连接。

Connection: keep-alive

keep-alive的优点

• 减少了cpu和内存的使用
• 允许请求管线化（并发多个请求）
• 降低拥塞控制成本
• 减少后续请求的延迟（无需再次TCP握手）
• 报告错误，无需关闭TCP连接

HTTPS 是如何保证安全的

• DH 密钥交换 （diffie-hellman）
• RSA 非对称加密 （原理：大质数的因式分解）（不能避免中间人攻击）
• CA 证书 （针对中间人攻击）

HTTP2 的进步

• 二进制分帧，比文本格式解析更高效
• 头部压缩，使用首部表进行存储之前的报文头，类似动态规划的备忘录
• 服务端推送，服务端可以在发送HTML是主动推送其他资源，提高页面加载速度
• 多路复用，1.x 中浏览器为了控制资源，会对单个域名有6-8个连接数的限制，2.x中，同域名的所有通信都在单个连接上完成。

HTTP 缓存

一个HTTP通信的过程通常是这样的：

1. 客户端向服务器发出请求，请求资源
2. 服务器返回资源，并通过响应头决定缓存策略
3. 客户端根据响应头的策略决定是否缓存资源，并将响应头与资源缓存下来
4. 在客户端再次请求且命中资源的时候，此时客户端去检查上次缓存的缓存策略，根据策略的不同、是否过期等判断是直接读取还是与服务器协商缓存

什么时候触发强缓存和协商缓存

强缓存

强缓存离不开两个响应头 Expires 与 Cache-Control

• Expires：表示资源过期的时间，是一个绝对的时间，由客户端直接进行时间比对，所以受限于本地时间，如果修改了本地时间，可能会造成缓存失效。
• Cache-Control：优先级高于 Expires，表示一个相对时间，一个时间长度。

Expires: Wed, 11 May 2018 07:20:00
Cache-Control:public, max-age=31536000

• public 可以被所有用户缓存，包括终端，CDN，各级代理服务器
• private 只能被终端浏览器缓存
• no-cache 需要重新验证（协商缓存）
• no-store 禁止缓存

协商缓存

当第一次请求时，服务器返回的响应头里，没有 Cache-Control 和 Expires 或者这两个字段都过期，或者 Cache-Control 设置为 no-cache 时，那么浏览器第二次就会与服务器进行协商。

如果缓存和服务器资源一致，那么服务端直接返回 304 Not Modified，否则服务器就会将新的资源返回给浏览器，状态码是 200 OK。

协商缓存对应两组字段它们分别是

• Last-Modified/If-Modified-Since 客户端将上次请求的响应头 Last-Modified 作为 If-Modified-Since 发送给服务器，服务器通过这个字段来判断是否命中缓存。
• ETag/If-None-Match 的流程跟 Last-Modified 类似，将上次请求响应头的 ETag 作为 If-None-Match 发送给服务，区别在于 ETag 是根据资源内容进行哈希，生成一个信息摘要。通常这个要比 Last-Modified 的精确度更高。

示例： 使用stat命令查看文件属性

stat cet4.json

File: cet4.json
Size: 950629    	Blocks: 1864       IO Block: 4096   regular file
Device: fc01h/64513d	Inode: 671588      Links: 1
Access: (0755/-rwxr-xr-x)  Uid: (    0/    root)   Gid: (    0/    root)
Access: 2022-08-07 21:13:01.576726636 +0800
Modify: 2022-07-30 16:38:19.549403632 +0800
Change: 2022-07-30 16:38:19.549403632 +0800
Birth: -

DOM 面试题

textContent

innerText

innerHTML

前端工程化

Typescipt

Vue Setup

性能优化

前端安全

Content-Sercuity-Policy

操作系统面试题

解释一下什么是操作系统

操作系统是运行在计算机上最重要的一种软件，它管理计算机的资源和进程以及所有的硬件和软件。它为计算机硬件和软件提供了一种中间层。

解释一下操作系统的主要目的是什么

操作系统是一种软件，它的主要目的有三种

• 管理计算机资源，这些资源包括 CPU、内存、磁盘驱动器、打印机等。
• 提供一种图形界面，就像我们前面描述的那样，它提供了用户和计算机之间的桥梁。
• 为其他软件提供服务，操作系统与软件进行交互，以便为其分配运行所需的任何必要资源。

操作系统的种类有哪些

1、批处理操作系统(Batch Processing Operation System)； 2、分时操作系统(Time Sharing Operating System)；
3、实时操作系统(Real Time Operating System)；
4、个人操作系统(Personal Operating System)；
5、网络操作系统(NOS, Network Operating System)；
6、分布式操作系统(Distributed Operating System)。

什么是内核

在计算机中，内核是一个计算机程序，它是操作系统的核心，可以控制操作系统中所有的内容。内核通常是在 boot loader 装载程序之前加载的第一个程序。

boot loader 又被称为引导加载程序，它是一个程序，能够将计算机的操作系统放入内存中。在电源通电或者计算机重启时，BIOS 会执行一些初始测试，然后将控制权转移到引导加载程序所在的主引导记录(MBR) 。

什么是虚拟内存

基于局部性原理，在程序装入时，将程序的一部分装入内存，而将其余部分留在外存，就可以启动程序进行执行。在程序执行过程中，当所访问的信息不在内存时，由操作系统将所需要的部分调入内存，然后继续执行程序。

另一方面，操作系统将内存中暂时用不到的内容换出到外存上，从而腾出空间存放调入内存的信息。

这样一来，系统好像为用户提供了一个比实际内存大得多的存储器，即为虚拟内存。

什么是进程和进程表

进程就是正在执行程序的实例，比如说 Web 程序就是一个进程，shell 也是一个进程，文章编辑器 typora 也是一个进程。

操作系统负责管理所有正在运行的进程，操作系统会为每个进程分配特定的时间来占用 CPU，操作系统还会为每个进程分配特定的资源。

操作系统为了跟踪每个进程的活动状态，维护了一个进程表。在进程表的内部，列出了每个进程的状态以及每个进程使用的资源等。

什么是线程，线程和进程的区别

线程的最直接理解就是“轻量级进程”，是一个基本的 CPU 执行单元，也是程序执行流的最小单元。

在引入线程的操作系统中，进程是拥有资源的基本单位，线程是独立调度的基本单元。在不同进程中进行线程切换，会引起进程切换。

什么是 DMA

Direct Memory Access，直接存储器访问，允许不同速度的硬件装置来沟通，而不需要依赖于 CPU 的大量中断负载。否则，CPU 需要从来源把每一片段的资料复制到暂存器，然后把它们再次写回到新的地方。在这个时间中，CPU 对于其他的工作来说就无法使用。

什么是僵尸进程

僵尸进程是已完成且处于终止状态，但在进程表中却仍然存在的进程。僵尸进程通常发生在父子关系的进程中，由于父进程仍需要读取其子进程的退出状态所造成的。

进程的通信方式

• 共享存储
• 消息传递：直接通信和间接通信
• 管道通信

浏览器

TODO

网络热门面试题

什么是重排和重绘？

浏览器原理

• reflow
• relayout
• repaint

如何理解闭包的概念？

什么情况下会触发BFC？

说一下深拷贝和浅拷贝的区别

针对对象数据类型的不同操作

深度优先和广度优先

JS变量那些在堆区那些在栈区

从操作系统角度来说，JS的变量都在堆区，有执行上下文

讲一讲你的职业规划

拟定回答：
1-2年，目前，掌握初级工程师基本知识，掌握计算机基础知识。
2-3年，掌握中级前端工程师的知识，通过中级软件设计师认证，通过可信专业级认证。建立领域知识。
4-5年，掌握高级前端工程师的知识，通过高级系统架构师认证，通过雅思/托福认证。熟练使用外语。
5年以后，成为全栈工程师或独立产品人。