前端面试题目会根据面试者的经历、岗位要求和面试官本身等因素而变化。大前端背景下，每个领域 1-2 个问题成为了更常见的面试提问规则。面试者的回答往往会影响面试官对其在这个领域的技术评价。如果无话可答，则意味着一个领域没有分数，如果这个领域是岗位的必要项，便会直接影响面试结果。于是，面试者总是希望，尽可能地多答上题目，怎么才能做到这点呢？第一，基础，包括原理，语言特性，设计模式，算法和数据结构，网络协议等。当我们可以从设计者或架构者的角度来看待一门语言、框架、协议时，即使不知道某个特性、用法，依然有可能类比推敲出答案。第二，积累。前端技术发展极快，规范、语言、框架、工具、思想日新月异，关注相关更新，特别是我们正在使用的技术栈的变化，广度可以跨越经历的局限，让自己满足更多岗位的要求。第三，引导。一方面，通过简历中技术熟练程度、项目和工作经历描述，擅长的要突出，不会的可以不写。另一方面，问题完全不会时，可以征询面试官意见，引导至我们会的问题。例如，XX 我不了解，但 XX 与之原理相同，我可以介绍一下吗？问题非常会时，可以引导面试官进一步提问。例如，XX 可以继续优化。需要注意的是：多答不是硬答。确实不会，大方承认，尽快进入下个问题，能减少对面试官主观上的影响。反之，完全不沾边，甚至错误的回答容易减少印象分。多答不是唠叨。会的题目，应该答出尽可能多的得分点，除非面试官追问，请避免在一个得分点上展开过多，让面试官有更多时间提新问题，考核完全部领域，面试者也能有更多展示机会。常见考点了解了前端面试的基本原则，可以进入实战准备阶段了。对此，我们按照语言，将常见考点的基础知识结构整理了出来，帮助扣友们梳理知识结构，快速查漏补缺。高频题测试学海无涯「题」作舟，用一些题目来练习一下吧。下面的这些前端面试高频题，你都能答得出来吗？Q：CSS 优先级规则是什么？选择器与元素的相关度越高，优先级越高，具体规则如下：开发者定义选择器 > 用户定义选择器 > 浏览器默认选择器内联样式（ style="" ） > 内（ <style> ）、外部样式（ <link/> ）ID 选择器 > 类选择器、属性选择器、伪类选择器 > 类型选择器、伪元素选择器相同优先级，书写顺序后 > 前同级选择器，复合选择器 > 单选择器自身的选择器 > 继承自父级的选择器用户配置 !important 声明 > 开发者 !important 声明 > 其它Q：什么是重排和重绘？当DOM的样式或内容会被修改时，将触发重新渲染。除了属性值计算、单位换算外，渲染主要分为三个步骤：布局：计算盒模型的位置，大小绘制：填充盒模型的文字、颜色、图像、边框和阴影等可视效果合并：所有图层绘制后，按层叠顺序合并为一个图层重新渲染一般有三种执行路径：重排：布局 → 绘制 → 合并重绘：绘制 → 合并合并：不同属性的修改，会触发不同的渲染路径Q：Cookie 和 Session 的区别？项目CookieSession存取值类型字符串大多数类型存取位置客户端服务端，sessionId 非主动传参时，依赖 Cookie存取方式文件文件、内存、关系或非关系型数据库等大小受客户端限制自行配置过期时间写入时设置，用户可清除自行配置，用户可清除对应Cookie，服务端自动清除过期 Session兼容性需浏览器开启，用户同意不依赖 Cookie 时，通过 Get 或自定请求字段传入作用范围可设置跨子域，不可跨主域用户身份唯一标识符不变时，可跨域，跨服务器。默认受限于 Cookie，仅限会话期间有效Q：判断一个对象是不是数组 ArrayisPrototypeOf-测试一个对象是否在另一个对象的原型链上-prototype 不可省略JavaScrpit function isArray(o) {
return Array.prototype.isPrototypeOf(o)
}instanceof-用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上JavaScrpitfunction isArray(o) {
return o instanceof Array
}Array.isArray-用于确定传递的值是否是一个 ArrayJavaScrpitfunction isArray(o) {
return Array.isArray(o)
} *Object.prototype.toString-方法返回一个表示对象的字符串JavaScrpitfunction 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 节省面试者的时间，提高投入产出比，在准备面试的过程中，真正获得知识和能力的提升。最后，祝福所有扣友都能找到满意的工作！