第 027 期精选前端核心面试题解答

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

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

HTML

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

标签的语义见: www.runoob.com/html/html5-…

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

标签语义化的好处：

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

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

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

<!DOCTYPE html>

CSS

选择器

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

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

右侧的选择器放执行效率高的选择器。因为浏览器是从右往左匹配选择器的。因此，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; /* 行数 */
}

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

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

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

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

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

布局

见:说说你对CSS盒模型的理解?

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

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

使用场景:

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

见：哪吒闹海，席卷图文学习前端Flex布局

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

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

static, relative, absolute, fixed, sticky。

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

详细: layout.imweb.io/article/z-i…

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

响应式

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

在高清屏下，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

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

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

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]

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

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 是块作用域。

见: 面试必会|闭包并不可怕

见: 彻底理解js中的this指向

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

DOM

事件

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

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

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

阻止事件冒泡:

event.stopPropagation()

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

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

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

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

BOM

异步编程

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

Generator。 async/await。

见:深入解析价值25k的蚂蚁金服异步串行面试题。

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

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

存储

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

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

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

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

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

其他

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

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

网络知识

见: HTTP灵魂之问，巩固你的 HTTP 知识体系

见: TCP协议灵魂之问，巩固你的网路底层基础

第 027 期精选前端核心面试题解答

HTML

CSS

选择器

样式规则

布局

响应式

兼容性

JavaScript

数据类型和操作符

基础语法

DOM

事件

BOM

异步编程

存储

其他

网络知识

常见问题FAQ

掘金(前端GoGoGo) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

HTML

CSS

选择器

样式规则

布局

响应式

兼容性

JavaScript

数据类型和操作符

基础语法

DOM

事件

BOM

异步编程

存储

其他

网络知识

常见问题FAQ

掘金(前端GoGoGo) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式