当前位置：网站首页 > 技术文章 > 正文

精选前端核心面试题及解答 - 基础篇

zhezhongyun 2025-01-19 01:48 82 浏览

网上的面试题集很多。有些面试题集很零碎，刷完后，也没太大用。有些面试题集数量太大，没有重点，根本刷不完。

Freemen App是一款专注于IT程序员求职招聘的一个求职平台，旨在帮助IT技术工作者能更好更快入职及努力协调IT技术者工作和生活的关系，让工作更自由！

Freemen为了做好大家面试路上的助攻手，特整理前端核心面试试题，让你面试不慌，争取Offer拿到手软！

本文精选了一些核心的夯实基础的面试题。选面试题时，兼顾了数量和质量。本文具体包含内容 HTML，CSS，JavaScript，DOM，BOM 和网络知识。

HTML

说几个 HTML5 新增的标签？这些标签的语义是什么?

新增了结构标签: article, aside, header, footer, hgroup 等。多媒体标签: audio, video 等。表单标签: datalist, output等。

标签的语义见: https://www.runoob.com/html/html5-new-element.html

什么是标签语义化？标签语义化有什么好处？

标签语义化指：写 HTML 选标签时，选择语义上合适的标签。反例：通篇 div 一把梭。

标签语义化的好处：

利于开发者理解 HTML。标签语义化的代码可读性好，易于维护。
利于机器理解 HTML。有利于 SEO(搜索引擎优化)。有利于盲人屏幕阅读器的解析。

DOCTYPE 是什么？有什么用？

DOCTYPE 是 HTML 的文档类型声明。浏览器根据文档类型来决定该用何种渲染模式来渲染页面。渲染模式包括：怪癖模式（quirks mode），准标准模式（almost standards mode）和标准模式（standards mode）。不同模式的不同主要在CSS 方面，如盒模型的处理，垂直方向的默认对齐方式等。

标准模式的文档类型声明写法：

<!DOCTYPE html>

CSS

选择器

样式生效的优先级是怎样的？

优先级从高到低: !important > 内联样式 > ID 选

优先级从高到低: !important > 内联样式 > ID 选择器 > 类名选择器，属性选择器，伪类选择器 > 标签选择器 > *(通用选择器) > 继承的样式 > 浏览器默认样式。

优先级相同的样式，在源码中后面出现的会覆盖前面出现的。

如何提升 CSS 选择器性能？

右侧的选择器放执行效率高的选择器。因为浏览器是从右往左匹配选择器的。因此，Google 资深web开发工程师 Steve Souders 对 CSS 选择器的执行效率从高到低做了一个排序：id 选择器 > 类选择器 > 标签选择器 > 相邻选择器 > 子选择器 > 后代选择器 > 通配符选择器。
选择器尽可能少。多个选择器，就多个匹配的过程。如用 .block-item 而不是 .block .item。

根据上面 2 条规则，具体来说：避免使用通用选择器。避免使用多层标签选择器。避免使用标签或类选择器限制 id 选择器。避免使用标签选择器限制类选择器。

样式规则

哪些属性会继承？

font 相关的属性(font-family, font-size 等), color, text-align, cursor, visibility 等。

如何实现单行文字的超出隐藏?

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

如何实现多行文字的超出隐藏?

.ellipsis-multi {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 行数 */
}

background-size 的 contain, cover 的相同点和不同点什么？

相同点：背景图会保持原图的宽高比例，不会拉伸。
不同点：contain 会在容器中，把背景图显示全。cover 会用背景图撑满容器，背景图可能不显示全。

如何用 visibility, display，opacity 隐藏元素？有什么区别？

设置 visibility: hidden 会隐藏元素。但是其位置还存在与页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘。
设置 display: none 会隐藏元素。且其位置不会被保留下来，所以会触发浏览器渲染引擎的回流和重绘。
设置 opacity: 0 会隐藏元素。但其位置也在页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘。

opacity: 0.5 和 background: rgba(0, 0, 0, .5) 有什么不同？

opacity 让整个元素透明度是 0.5。
background: rgba(0, 0, 0, .5) 只是背景色的透明度是 0.5。

硬件加速有什么用？如何触发硬件加速？

硬件加速指用 GPU 来渲染元素。硬件加速能让动画更流畅。

触发硬件加速方式，设置: transform: translateZ(0);。

布局

什么是盒模型? content-box 和 border-box 的区别是什么？

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）

一个盒子由四个部分组成：content、padding、border、margin

块级元素，行内元素，行内块级元素有什么区别？

块级元素宽度默认撑满父元素，占一行。
行内元素。多个行内元素会显示在一行(宽度够的情况下)。行内元素设置宽度无效。设置上下的 margin 无效，左右有效。
行内块级元素的部分特性和块级元素一样，部分特性和行内元素一样。能设置高度。多个能显示在一行。

什么是 BFC，有哪些使用场景？

BFC 是块级格式化上下文，简单的来说，BFC就是创建一个盒子，盒子内部的元素布局不影响盒子外部的元素。

使用场景:

解决垂直方向 margin 重叠。
避免浮动元素父元素塌陷。
解决文本不环绕浮动元素。

如何用 Flex 布局实现水平，垂直方向的居中对齐，两端对齐？换多行显示？如何撑满容器的剩余部分？容器空间不够，如何缩小？

flex-direction属性决定的是主轴的方向，即是项目的排列方向

row：flex容器的主轴与当前写入模式的内联轴具有相同的方向。主开始方向和主结束方向分别相当于当前写入模式的开始方向和结束方向。

row-reverse: 与'row'相同，只是主开始方向和主结束方向交换了。

column: flex容器的主轴与当前写入模式的块轴方向相同。主开始方向和主结束方向分别相当于当前书写模式的前/头和后/脚方向。

column-reverse: 与'column'相同，只是主开始方向和主结束方向交换了。

flex-wrap属性：根据伸缩容器中的可用空间，指定伸缩项是否换行以及它们换行到多行或多列的方向。

flex-wrap: nowrap: 不换行。（所有弹性项目都将在一行上）

flex-wrap: wrap: 换行，第一行在上方。（弹性项目将从上到下缠绕在多行上）

wrap-reverse: 换行，第一行在下方。（弹性项目将从下到上缠绕在多行上）

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content属性:指定在解析了任意灵活长度和自动边距后，伸缩项如何沿伸缩容器的主轴对齐。(定义了项目在主轴上的对齐方式)

flex-end弹性物品被打包到行尾。第一个伸缩项的结束边缘被放置在伸缩容器的末端

center弹性物品被打包在线的中间。flex项目在直线上放置冲洗彼此对齐线的中心,与等量的main-start边缘之间的空白行和第一项之间的线,主要目的的边缘线,最后一项

space-between弹性项目均匀地分布在这条线上。如果剩余的自由空间是负的，或者一行上只有一个flex项目，这个值与' flex-start '相同。

space-around弹性项目均匀地分布在线中，在两端有一半大小的空间。

align-items属性：指定伸缩容器中伸缩项的对齐值。

flex-start：交叉轴的起点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性：指定当与flex-direction属性定义的轴垂直的轴上有额外空间时，flex项目的行如何在flex容器内对齐。

flex-start：交叉轴的起点对齐

flex-end：与交叉轴的终点对齐

center：与交叉轴的中点对齐

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

space-around：每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍

stretch：轴线占满整个交叉轴

绝对定位的定位规则是怎样的？

绝对定位元素根据更加离它最近的 position 不为 static 的父元素来定位。

如何实现绝对定位元素的水平居中?

.elem {
  left: 50%;
  transform: translateX(-50%);
}

position 属性有哪些值？

static, relative, absolute, fixed, sticky。

两个元素有重叠部分，哪个显示在上面的规则是怎么样的？

如果在同一个堆叠上下文中进行比较，则直接按照堆叠层级的7条规则进行比较。
如果不在同一个堆叠上下文（如 A 元素与 B 元素的父级元素在同一个堆叠上下文或 A、B 元素的父级元素在同一个堆叠上下文），则向上找父级元素，直接找到它们在同一个堆叠上下文，再按照堆叠层级的7条规则进行比较。

详细: http://layout.imweb.io/article/z-index.html

容器的 y 方向 overflow：auto。子元素要超出容器的 x方向怎么处理？

子元素 Portal 到容器上级元素里。

响应式

怎么做响应式布局？

设置 viewport。<meta name="viewport" content="width=device-width, initial-scale=1" />。
需要做响应式处理的地方用媒体查询(Media Queries) 配合 Flex 布局，以及rem，vw，vh 等单位。

如何适配移动端 1px 的问题?

在高清屏下，CSS 中的 1px 比较粗。常见的解决方案: 媒体查询配合高度是1px 的伪类元素，用 transform 来缩放。代码比较多，就不放了，网上搜下一大把。

如何实现宽度是屏幕宽度的正方形？

用 vw 实现。

.block {
  width: 100vw;
  height: 100vw;
}

用 rem 实现。JS 监听页面初始化和页面窗口变化，设置 html 元素的字体大小，保证 1rem 的值是宽度为 750px 设计稿里的 100px。

.block {
  width: 7.5rem;
  height: 7.5rem;
}

兼容性

你遇到过哪些兼容性问题，是怎么解决的？

ios 滚动不流畅。解决方法: 加样式 -webkit-overflow-scrolling: touch;。
touch 事件点击穿透。解决方案: 用 fastClick.js这个库。
部分 Android 手机，border-radius:50% 不圆。解决方案: border-radius 用具体的px值。
低版本的 ios，日期转化有问题。new Date('2020-11-12 00:00:00') 是 NaN。解决方案: 把日期格式化成 new Date('2020/11/12 00:00:00')。

如何减少兼容性问题？

使用新的 CSS 特性时，查询兼容性情况。该加浏览器前缀的加浏览器前缀(-webkit-, -moz 等)。

JavaScript

数据类型和操作符

== 和 === 有什么区别？

区别在于比较两个值的数据类型不一样前，会不会做类型转化。=== 比较会， == 不会。

如何实现保留两位小数?

(3.555).toFixed(2) // => 3.56

哪些值在 if 中是 false 的?

false，null，undefined，0，空字符串，NaN。

去掉字符串前后的空格?

用字符串自带的方法 str.trim() 或用正则 str.replace(/^\s*$/g,'')。

实现：_风格的字符串改成驼峰的风格的字符串。如 hello_joel 改成 helloJoel。

function toCamel (str) {
  if (!str) return
  const res = 
    str.split('_')
        .map((item, i) => {
          if (i === 0) return item
          return `${item.charAt(0).toUpperCase()}${item.substr(1)}`
        }).join('')
  return res
}

函数的参数 arguments 如何转化成数组？

[...arguments]

哪些数组方法会遍历数组?

forEach, map, filter, every, some, reduce 等。

去掉数组中 id 相同的。数组: [{id: 3}, {id: 4}, {id: 3}, {id: 5}]。

function uniq (arr) {
  const res = []
  const exist = {}
  arr.forEach(item => {
    const { id } = item
    if(exist[id]) {
      return
    }
    exist[id] = true
    res.push(item)
  })
  return res
}

如何判断一个对象是不是空对象?

Object.keys(obj).length === 0

或

try {
  JSON.stringify(obj) === '{}'
} catch(e) {
  // obj 存在属性循环引用时会报错。
}

如何遍历对象的属性?

用 for ... in

for (let key in obj) {
  console.log(`${key}: ${obj[key]}`)
}

用 Object.keys

Object.keys(obj)
    .forEach(key => `${key}: ${obj[key]}`)

基础语法

var 和 let 有什么差别?

var 和 let 的作用域不同。var 是函数作用域，let 是块作用域。

什么是闭包？闭包有哪些使用场景？

闭包：定义在一个函数内部的函数，可以重用函数内部变量，又保护变量不被污染的一种机制

使用场景：

场景一：保护私有变量
场景二：延迟执行

场景三：延续局部变量的寿命

this 在五种场景（默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定）的指向是怎样的？

this默认绑定：函数调用时无任何调用前缀的情景，默认绑定时this指向全局对象（非严格模式），但需要注意的是，在严格模式环境中，默认绑定的this指向undefined，如果在严格模式下调用不在严格模式中的函数，并不会影响this指向

隐式绑定：如果函数调用时，前面存在调用它的对象，那么this就会隐式绑定到这个对象上，如果函数调用前存在多个对象，this指向距离调用自己最近的对象。

this显式绑定：通过call、apply以及bind方法改变this的行为，如果在使用call之类的方法改变this指向时，指向参数提供的是null或者undefined，那么 this 将指向全局对象。

new绑定：js中的构造函数只是使用new 调用的普通函数，它并不是一个类，最终返回的对象也不是一个实例，只是为了便于理解习惯这么说罢了。

那么new一个函数究竟发生了什么呢，大致分为三步：

1.以构造器的prototype属性为原型，创建新对象；

2.将this(可以理解为上句创建的新对象)和调用参数传给构造器，执行；

3.如果构造器没有手动返回对象，则返回第一步创建的对象

箭头函数的this：箭头函数的this指向取决于外层作用域中的this，外层作用域或函数的this指向谁，箭头函数中的this便指向谁，一旦箭头函数的this绑定成功，也无法被再次修改，

聊聊 JavaScript 的基于原型链的继承？

把一个对象做为一个函数的原型对象。用 new 这个函数创建对象。访问对象上某个属性，如果在对象上找不到，会从对象的原型对象上找。如果原型对象上也找不到，会从原型对象的原型对象上找。这样不断的找下去。如果还是找不到，该对象的属性值为 undefined。

DOM

事件

事件的冒泡和捕获是什么? 哪些事件会冒泡？如何阻止事件冒泡?

事件捕获: 当一个事件触发后，它会从 Window 上触发，不断经过下级节点,直到目标节点。

事件冒泡: 事件发生在一个元素上后，它会不断往其上级节点触发。和事件捕获的路径正好相反。

会冒泡的事件有：click，dblclick，wheel，mousemove，input，keyup，keydown，scroll 等

阻止事件冒泡:

event.stopPropagation()

什么是事件委托? 有什么用？

给父元素绑定事件，用来监听子元素的事件。只有能冒泡的事件才能做事件委托。

事件委托技术可以避免对每个字元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。

window.onload 和 DOMContentLoaded 的区别?

DOMContentLoaded 在 DOM 加载和解析好时触发。
window.onload 在样式表，脚本，图片等所有资源都加载好后才触发。

先触发 DOMContentLoaded，再触发 window.onload。

BOM

异步编程

Promise 解决了什么问题？

能很好的解决多个异步顺序执行导致的回调地狱。

除 Promise 外还有哪些异步编程解决方案？

Generator。async/await。

微任务和宏任务的差别是什么？

macro-task(宏任务)：定时器(setTimeout，setInterval)，用户交互事件等等。
micro-task(微任务)：Promise，process.nextTick。

同一层级下,微任务永远比宏任务先执行。从全局上下文退出前（全局的同步代码执行完毕后）,开始收集当前层级的微任务和宏任务，然后先清空微任务队列，再执行宏任务。

存储

本地存储 storage 和 Cookie 有什么差别？

数据传输方面: 在同源的 HTTP 请求中，会自动带上 Cookie 是数据。但不会带 storage 数据。

存储大小限制方面: storage 和 Cookie 都有存储大小的限制。但 storage 比 Cookie 能存的数据大得多，可以达到5M或更大。

有效期方面：localStorage 是数据一直有效。sessionStorage 关闭浏览器窗口前有效。Cookie 在设置的过期时间前有效。

能读取 cookie 策略是什么？

满足如下条件的 url 才能读取 cookie:

url 的 host 和 cookie 的 domain 属性值相同或者是 domain 的子域名。
url 的路径与 cookie 的 path 属性值相同。

其他

什么是防抖？什么是节流？有哪些使用场景？

节流指在一段时间内，只执行一次。用来控制事件发生的频率。如控制为 1秒发生一次，甚至 1分钟发生一次。例如：1分钟内，多次点击按钮提交表单，只有第一次点击有效。

防抖只执行最后一个被触发的，清除之前的异步任务。用来防止因事件触发次数过频繁，导致性能浪费。例如：窗口的 resize 事件，列表的 scroll 事件，输入框 input 事件，触发频繁很高，都可以用防抖来优化。

本文转载自前端GOGOGO

HTML5 标签

上一篇：Java9新特性及使用
下一篇：HTML和HTML5，css和css3的区别有哪些?

精选前端核心面试题及解答 - 基础篇

HTML

CSS

JavaScript

DOM

BOM

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?