前端面试都有什么题（前端面试考什么）

忙族 2023-06-04 18:22:39 549

前端面试都有什么题（前端面试考什么）选择器与元素的相关度越高，优先级越高，具体规则如下：Q：CSS 优先级规则是什么？多答不是唠叨。会的题目，应该答出尽可能多的得分点，除非面试官追问，请避免在一个得分点上展开过多，让面试官有更多时间提新问题，考核完全部领域，面试者也能有更多展示机会。了解了前端面试的基本原则，可以进入实战准备阶段了。对此，我们按照语言，将常见考点的基础知识结构整理了出来，帮助扣友们梳理知识结构，快速查漏补缺。学海无涯「题」作舟，用一些题目来练习一下吧。下面的这些前端面试高频题，你都能答得出来吗？

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

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

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

需要注意的是：

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

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

常见考点

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

前端面试都有什么题（前端面试考什么）(1)

前端面试都有什么题（前端面试考什么）(2)

高频题测试

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

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

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

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

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

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

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

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

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

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

Q：什么是重排和重绘？

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

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

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

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

Q：Cookie 和 Session 的区别？

项目	Cookie	Session
存取值类型	字符串	大多数类型
存取位置	客户端	服务端，sessionId 非主动传参时，依赖 Cookie
存取方式	文件	文件、内存、关系或非关系型数据库等
大小	受客户端限制	自行配置
过期时间	写入时设置，用户可清除	自行配置，用户可清除对应Cookie，服务端自动清除过期 Session
兼容性	需浏览器开启，用户同意	不依赖 Cookie 时，通过 Get 或自定请求字段传入
作用范围	可设置跨子域，不可跨主域	用户身份唯一标识符不变时，可跨域，跨服务器。默认受限于 Cookie，仅限会话期间有效

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？