前端面试题目会根据面试者的经历、岗位要求和面试官本身等因素而变化。大前端背景下，每个领域 1-2 个问题成为了更常见的面试提问规则。面试者的回答往往会影响面试官对其在这个领域的技术评价。

如果无话可答，则意味着一个领域没有分数，如果这个领域是岗位的必要项，便会直接影响面试结果。于是，面试者总是希望，尽可能地多答上题目，怎么才能做到这点呢？

• 第一，基础，包括原理，语言特性，设计模式，算法和数据结构，网络协议等。当我们可以从设计者或架构者的角度来看待一门语言、框架、协议时，即使不知道某个特性、用法，依然有可能类比推敲出答案。
• 第二，积累。前端技术发展极快，规范、语言、框架、工具、思想日新月异，关注相关更新，特别是我们正在使用的技术栈的变化，广度可以跨越经历的局限，让自己满足更多岗位的要求。
• 第三，引导。一方面，通过简历中技术熟练程度、项目和工作经历描述，擅长的要突出，不会的可以不写。另一方面，问题完全不会时，可以征询面试官意见，引导至我们会的问题。例如，XX 我不了解，但 XX 与之原理相同，我可以介绍一下吗？问题非常会时，可以引导面试官进一步提问。例如，XX 可以继续优化。

需要注意的是：

多答不是硬答。确实不会，大方承认，尽快进入下个问题，能减少对面试官主观上的影响。反之，完全不沾边，甚至错误的回答容易减少印象分。

多答不是唠叨。会的题目，应该答出尽可能多的得分点，除非面试官追问，请避免在一个得分点上展开过多，让面试官有更多时间提新问题，考核完全部领域，面试者也能有更多展示机会。

常见考点

了解了前端面试的基本原则，可以进入实战准备阶段了。对此，我们按照语言，将常见考点的基础知识结构整理了出来，帮助扣友们梳理知识结构，快速查漏补缺。

高频题测试

学海无涯「题」作舟，用一些题目来练习一下吧。下面的这些前端面试高频题，你都能答得出来吗？

Q：CSS 优先级规则是什么？

选择器与元素的相关度越高，优先级越高，具体规则如下：

开发者定义选择器 > 用户定义选择器 > 浏览器默认选择器

内联样式（ style="" ） > 内（ <style> ）、外部样式（ <link/> ）

ID 选择器 > 类选择器、属性选择器、伪类选择器 > 类型选择器、伪元素选择器

相同优先级，书写顺序后 > 前

同级选择器，复合选择器 > 单选择器

自身的选择器 > 继承自父级的选择器

用户配置 !important 声明 > 开发者 !important 声明 > 其它

Q：什么是重排和重绘？

当DOM的样式或内容会被修改时，将触发重新渲染。除了属性值计算、单位换算外，渲染主要分为三个步骤：

• 布局：计算盒模型的位置，大小
• 绘制：填充盒模型的文字、颜色、图像、边框和阴影等可视效果
• 合并：所有图层绘制后，按层叠顺序合并为一个图层

重新渲染一般有三种执行路径：

• 重排：布局 → 绘制 → 合并
• 重绘：绘制 → 合并
• 合并：不同属性的修改，会触发不同的渲染路径

Q：Cookie 和 Session 的区别？

Q：判断一个对象是不是数组 Array

• isPrototypeOf-测试一个对象是否在另一个对象的原型链上-prototype 不可省略

JavaScrpit

 function isArray(o) {
  return Array.prototype.isPrototypeOf(o)
}

• instanceof
• -用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

JavaScrpit

function isArray(o) {
  return o instanceof Array
}

• Array.isArray-用于确定传递的值是否是一个 Array

JavaScrpit

function isArray(o) {
  return Array.isArray(o)
}    *

• Object.prototype.toString-方法返回一个表示对象的字符串

JavaScrpit

function isArray(o) {
  return Object.prototype.toString.call(o) === '[object Array]'
}

Q：如何实现一个组件，前端组件的设计原则是什么？

• 单一原则：一个组件只做一件事
• 通过脑图、结构图，标识组件的 State Props Methods 生命周期，表示层次和数据流动关系
• State 和 Props-扁平化：最多使用一层嵌套，便于对比数据变化，代码更简洁-无副作用：State 仅响应事件，不受其他 State 变化影响
• 松耦合-组件应该独立运行，不依赖其它模块
• 配置、模拟数据、非技术说明文档、helpers、utils 与 组件代码分离
• 视图组件只关心 视图，数据获取，过滤，事件处理应在外部 JS 或 父组件 中处理
• Kiss原则（Keep it Simple Stupid）-不需要 State 时，使用 函数组件-不要传递不需要的 Props-及时抽取复杂组件为独立组件-不要过早优化
• 参考 CSS 的 OOSS 方法论，分离 位置 和 样式，利于实现皮肤
• 考虑 多语言、无障碍 等后期需求

Q：对比 express 和 koa？

• Handler 处理方式-Express：回调函数-Koa：Async / Await
• 中间件-Express：同一线程，线性传递-Koa：洋葱模型，级联传递
• 响应机制-Express：res.send 立即响应
• -Koa：设置 ctx.body ，可累加，经过中间件后响应

前端通关手册

上面分享的这些前端考点和高频题都来自于本次 LeetBook 的上新。想要解锁更多内容，点击下面的图片查看吧。

《前端通关手册：JavaScript》：力扣

《前端通关手册：HTML&CSS》： 力扣

实用的前端面试突围指南书，以面试题目作为线索，从基础到更新，通过多方法，讲概念，让面试者的回答在广度或深度上能够脱颖而出，带你轻松掌握 JavaScript、HTML、CSS 的面试考点。

编者介绍：

吴小宇，做网站 13 年，2 次创业，土木、教育、前端 3 次跨领域转行，入行 1 年成为组长，热爱技术，尊重商业和人性，擅长多角度解决问题。

当然，在面试时除了前端方面的专业知识，也会问到一些计算机通用基础问题，因此本次上新还特别为扣友们准备了一本校招通用的通关手册。

《校招基础知识详解》: 力扣

互联网校招基础考点一网打尽，用简单易懂的讲解将面试知识串连起来，帮你快速理清多而杂的知识点，构建起校招技能树，面试游刃有余。

编者介绍：

CyC2018，Github 校招面试项目 CS-Notes 作者，排名 10。校招期间收获多家大厂 Offer，具有丰富的面试经验。

针对这部分基础，我们同样整理了一份实用的考点大纲：

技术会迭代，我们也会与时俱进，不断精益内容。希望能够通过 LeetBook 节省面试者的时间，提高投入产出比，在准备面试的过程中，真正获得知识和能力的提升。

最后，祝福所有扣友都能找到满意的工作！