2020年web前端最全面试题及答案【含vue,react】

语义化的好处主要有两点：

 开发者友好：使用语义类标签增强了可读性，开发者也能够清晰地看出网页的结构，也

更为便于团队的开发和维护

 机器友好：带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，语义类

还可以支持读屏软件，根据文章可以自动生成目录

这对于简书、知乎这种富文本类的应用很重要，语义化对于其网站的内容传播有很大的帮助，

但是对于功能性的web软件重要性大打折扣，比如一个按钮、Skeleton这种组件根本没有

对应的语义，也不需要什么SEO。

6, HTML5与HTML4的不同之处

文件类型声明（）仅有一型：。

新的解析顺序：不再基于SGML。

 新的元素：section, video, progress, nav, meter, time, aside, canvas, command,

datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark,

output, rp, rt, ruby, source, summary, wbr。

 input元素的新类型：date, email, url等等。

 新的属性：ping（用于a与area）, charset（用于meta）, async（用于script）。

 全域属性：id, tabindex, repeat。

 新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden,

spellcheck。

 移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset,

isindex, noframes, strike, tt

7有哪些常用的meta标签？

meta标签由name和content两个属性来定义，来描述一个HTML网页文档的元信息，

例如作者、日期和时间、网页描述、关键词、页面刷新等，除了一些http标准规定了一些

name作为大家使用的共识，开发者也可以自定义name。

 charset，用于描述HTML文档的编码形式

 http-equiv，顾名思义，相当于http的文件头作用,比如下面的代码就可以设置http

的缓存过期日期

 viewport，移动前端最熟悉不过，Web开发人员可以控制视口的大小和比例

 apple-mobile-web-app-status-bar-style,开发过PWA应用的开发者应该很熟悉，为

了自定义苹果工具栏的颜色。

8, src和href的区别？

 src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求

src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等

元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、

编译、执行完毕，所以一般js脚本会放在底部而不是头部。

 href是指向网络资源所在位置（的超链接），用来建立和当前元素或文档之间的连接，

当浏览器识别到它他指向的文件时，就会并行下载资源，不会停止对当前文档的处理。

9知道img的srcset的作用是什么？

可以设计响应式图片，我们可以使用两个新的属性srcset 和 sizes来提供更多额外的资源

图像和提示，帮助浏览器选择正确的一个资源。

srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小。

sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图

片尺寸是最佳选择。

所以，有了这些属性，浏览器会：

 查看设备宽度

 检查 sizes 列表中哪个媒体条件是第一个为真

 查看给予该媒体查询的槽大小

 加载 srcset 列表中引用的最接近所选的槽大小的图像

10, 还有哪一个标签能起到跟srcset相似作用？

元素通过包含零或多个 元素和一个 元素来为不同的显示/设

备场景提供图像版本。浏览器会选择最匹配的子 元素，如果没有匹配的，就选

择 元素的 src 属性中的URL。然后，所选图像呈现在元素占据的空间中

11, script标签中defer和async的区别？

 defer：浏览器指示脚本在文档被解析后执行，script被异步加载后并不会立刻执行，

而是等待文档被解析完毕后执行。

 async：同样是异步加载脚本，区别是脚本加载完毕后立即执行，这导致async属性下

的脚本是乱序的，对于script有先后依赖关系的情况，并不适用。

12, 有几种前端储存的方式？

cookies、localstorage、sessionstorage、Web SQL、IndexedDB

13, 这些方式的区别是什么？

 cookies： 在HTML5标准前本地储存的主要方式，优点是兼容性好，请求头自带

cookie方便，缺点是大小只有4k，自动请求头加入cookie浪费流量，每个domain

限制20个cookie，使用起来麻烦需要自行封装

 localStorage：HTML5加入的以键值对(Key-Value)为标准的方式，优点是操作方便，

永久性储存（除非手动删除），大小为5M，兼容IE8+

 sessionStorage：与localStorage基本类似，区别是sessionStorage当页面关闭后

会被清理，而且与cookie、localStorage不同，他不能在所有同源窗口中共享，是会

话级别的储存方式

 Web SQL：2010年被W3C废弃的本地数据库数据存储方案，但是主流浏览器（火狐

除外）都已经有了相关的实现，web sql类似于SQLite，是真正意义上的关系型数据

库，用sql进行操作，当我们用JavaScript时要进行转换，较为繁琐。

 IndexedDB： 是被正式纳入HTML5标准的数据库储存方案，它是NoSQL数据库，

用键值对进行储存，可以进行快速读取操作，非常适合web场景，同时用JavaScript

进行操作会非常方便。

CSS篇

1, CSS选择器的优先级是怎样的？

CSS选择器的优先级是：内联 > ID选择器 > 类选择器 > 标签选择器

到具体的计算层面，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

 A 的值等于 1 的前提是存在内联样式, 否则 A = 0;

 B 的值等于 ID选择器 出现的次数;

 C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;

 D 的值等于 标签选择器 和 伪元素 出现的总次数 。

2,link和@import的区别？

link属于XHTML标签，而@import是CSS提供的。

页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。

import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。

link方式的样式权重高于@import的权重。

使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用

link标签，因为@import不是dom可以控制的

2,empxrem区别？

 px：绝对单位，页面按精确像素展示。

 em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算

（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

 rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3

新加属性，chrome/firefox/IE9+支持

3,块级元素水平居中的方法？

 margin:0 auto方法

 flex布局，目前主流方法

 table方法

4, CSS有几种定位方式？

 static: 正常文档流定位，此时 top, right, bottom, left 和 z-index 属性无效，块级

元素从上往下纵向排布，行级元素从左向右排列。

 relative：相对定位，此时的『相对』是相对于正常文档流的位置。

 absolute：相对于最近的非 static 定位祖先元素的偏移，来确定元素位置，比如一个

绝对定位元素它的父级、和祖父级元素都为relative，它会相对他的父级而产生偏移。

 fixed：指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在

屏幕滚动时不会改变，比如那种回到顶部的按钮一般都是用此定位方式。

 sticky：粘性定位，特性近似于relative和fixed的合体，其在实际应用中的近似效果

就是IOS通讯录滚动的时候的『顶屁股』。

5, 如何理解z-index？

CSS 中的z-index属性控制重叠元素的垂直叠加顺序，默认元素的z-index为0，我们可

以修改z-index来控制元素的图层位置，而且z-index只能影响设置了position值的元素。

6, 如何理解层叠上下文？

是什么？

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏

幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占

用层叠上下文的空间。

如何产生？

触发一下条件则会产生层叠上下文：

根元素 (HTML),

z-index 值不为 "auto"的 绝对/相对定位，

一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-

flex，

 opacity 属性值小于 1 的元素（参考 the specification for opacity），

 transform 属性值不为 "none"的元素，

 mix-blend-mode 属性值不为 "normal"的元素，

 filter值不为“none”的元素，

 perspective值不为“none”的元素，

 isolation 属性被设置为 "isolate"的元素，

 position: fixed

7, 清除浮动有哪些方法？

 空div方法：

 Clearfix 方法：上文使用.clearfix类已经提到

 overflow: auto或overflow: hidden方法，使用BFC

8,你对css sprites的理解，好处是什么？

是什么 ？

雪碧图也叫CSS精灵， 是一CSS图像合成技术，开发人员往往将小图标合并在一起之后

的图片称作雪碧图。

如何操作？

使用工具（PS之类的）将多张图片打包成一张雪碧图，并为其生成合适的 CSS。 每张图片

都有相应的 CSS 类，该类定义了background-image、background-position和

background-size属性。 使用图片时，将相应的类添加到你的元素中。

好处：

减少加载多张图片的 HTTP 请求数（一张雪碧图只需要一个请求）

提前加载资源

不足：

CSS Sprite维护成本较高，如果页面背景有少许改动，一般就要改这张合并的图片

加载速度优势在http2开启后荡然无存，HTTP2多路复用，多张图片也可以重复利用一个

连接通道搞定

9, 你对媒体查询的理解？

是什么

媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式

组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范

围的输出设备而进行裁剪，而不必改变内容本身,非常适合web网页应对不同型号的设备而

做出对应的响应适配。

如何使用？

媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，

这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类

型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的

结果为true.那么媒体查询内的样式将会生效。

10, 你对盒模型的理解

是什么？

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础

框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决

定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。

盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成

11, 标准盒模型和怪异盒模型有什么区别？

在W3C标准下，我们定义元素的width值即为盒模型中的content的宽度值，height值

即为盒模型中的content的高度值。

因此，标准盒模型下：

元素的宽度 = margin-left + border-left + padding-left + width + padding-right +

border-right + margin-right

而IE怪异盒模型（IE8以下）width的宽度并不是content的宽度，而是border-left +

padding-left + content的宽度值 + padding-right + border-right之和，height同理。

在怪异盒模型下：

元素占据的宽度 = margin-left + width + margin-right

虽然现代浏览器默认使用W3C的标准盒模型，但是在不少情况下怪异盒模型更好用，于是

W3C在css3中加入box-sizing

12, 谈谈对BFC的理解

是什么？

书面解释：BFC(Block Formatting Context)这几个英文拆解

Block: Block在这里可以理解为Block-level Box,指的是块级盒子的标准

Formatting context：块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规

则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

BFC是指一个独立的渲染区域，只有Block-level Box参与， 它规定了内部的Block-level

Box如何布局，并且与这个区域外部毫不相干.

它的作用是在一块独立的区域，让处于BFC内部的元素与外部的元素互相隔离.

如何形成？

BFC触发条件:

根元素，即HTML元素

 position: fixed/absolute

 float 不为none

 overflow不为visible

 display的值为inline-block、table-cell、table-caption

作用是什么？

 防止margin发生重叠

 两栏布局，防止文字环绕等

 防止元素塌陷

13, 为什么有时候人们用translate来改变位置而

不是定位？

translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局

（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重

新布局，进而触发重绘和复合。transform使浏览器为元素创建一个 GPU 图层，但改变绝

对定位会使用到 CPU。 因此translate()更高效，可以缩短平滑动画的绘制时间。

而translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发生这种情况。

14, 伪类和伪元素的区别是什么？

是什么？

伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当

你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的

伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before

来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是

这些文本实际上不在文档树中。

区别

其实上文已经表达清楚两者区别了，伪类是通过在元素选择器上加入伪类改变元素状态，而

伪元素通过对元素的操作进行对元素的改变。

我们通过p::before对这段文本添加了额外的元素，通过 p:first-child改变了文本的样式。

15, 你对flex的理解？

web应用有不同设备尺寸和分辨率，这时需要响应式界面设计来满足复杂的布局需求，Flex

弹性盒模型的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方

式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑

弹性盒布局

JS篇

1, 解释下变量提升？

JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运

行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量

提升（hoisting）。

2, 理解闭包吗？

闭包是什么

MDN的解释：闭包是函数和声明该函数的词法环境的组合。

按照我的理解就是：闭包 =『函数』和『函数体内可访问的变量总和』

闭包的作用

闭包最大的作用就是隐藏变量，闭包的一大特性就是内部函数总是可以访问其所在的外部函

数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后

基于此特性，JavaScript可以实现私有变量、特权变量、储存变量等

我们就以私有变量举例，私有变量的实现方法很多，有靠约定的（变量名前加_）,有靠Proxy

代理的，也有靠Symbol这种新数据类型的。

但是真正广泛流行的其实是使用闭包。

3, JavaScript的作用域链理解吗？

JavaScript属于静态作用域，即声明的作用域是根据程序正文在编译时就确定的，有时也称

为词法作用域。

其本质是JavaScript在执行过程中会创造可执行上下文，可执行上下文中的词法环境中含

有外部词法环境的引用，我们可以通过这个引用获取外部词法环境的变量、声明等，这些引

用串联起来一直指向全局的词法环境，因此形成了作用域链。

4, ES6模块与CommonJS模块有什么区别？

ES6 Module和CommonJS模块的区别：

CommonJS是对模块的浅拷贝，ES6 Module是对模块的引用,即ES6 Module只存只读，

不能改变其值，具体点就是指针指向不能变，类似const

import的接口是read-only（只读状态），不能修改其变量值。 即不能修改其变量的指针

指向，但可以改变变量内部指针指向,可以对commonJS对重新赋值（改变指针指向），但

是对ES6 Module赋值会编译报错。

ES6 Module和CommonJS模块的共同点：

CommonJS和ES6 Module都可以对引入的对象进行赋值，即对对象内部属性的值进行改

变。

5,js有哪些类型？

JavaScript的类型分为两大类，一类是原始类型，一类是复杂(引用）类型。

原始类型:

 boolean

 null

 undefined

 number

 string

 symbol

复杂类型:

 Object

6, null与undefined的区别是什么？

null表示为空，代表此处不应该有值的存在，一个对象可以是null，代表是个空对象，而

null本身也是对象。

undefined表示『不存在』，JavaScript是一门动态类型语言，成员除了表示存在的空值外，

还有可能根本就不存在（因为存不存在只在运行期才知道），这就是undefined的意义所在。

7, 谈谈你对原型链的理解？

这个问题关键在于两个点，一个是原型对象是什么，另一个是原型链是如何形成的

原型对象

绝大部分的函数(少数内建函数除外)都有一个prototype属性,这个属性是原型对象用来创

建新对象实例,而所有被创建的对象都会共享原型对象,因此这些对象便可以访问原型对象的

属性。

原型链

原因是每个对象都有 __proto__ 属性，此属性指向该对象的构造函数的原型。

对象可以通过 __proto__与上游的构造函数的原型对象连接起来，而上游的原型对象也有一

个__proto__，这样就形成了原型链。

8, 谈一谈你对this的了解？

this的指向不是在编写时确定的,而是在执行时确定的，同时，this不同的指向在于遵循了

一定的规则。

首先，在默认情况下，this是指向全局对象的，比如在浏览器就是指向window。

其次，如果函数被调用的位置存在上下文对象时，那么函数是被隐式绑定的。

再次，显示改变this指向，常见的方法就是call、apply、bind

最后，也是优先级最高的绑定 new 绑定。

用 new 调用一个构造函数，会创建一个新对象, 在创造这个新对象的过程中,新对象会自动

绑定到Person对象的this上，那么 this 自然就指向这个新对象。

9, 那么箭头函数的this指向哪里？

箭头函数不同于传统JavaScript中的函数,箭头函数并没有属于自己的this,它的所谓的this

是捕获其所在上下文的 this 值，作为自己的 this 值,并且由于没有属于自己的this,而箭头

函数是不会被new调用的，这个所谓的this也不会被改变.

10, async/await是什么？

async 函数，就是 Generator 函数的语法糖，它建立在Promises上，并且与所有现有的

基于Promise的API兼容。

Async—声明一个异步函数(async function someName(){...})

自动将常规函数转换成Promise，返回值也是一个Promise对象

只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数

异步函数内部可以使用await

Await—暂停异步的功能执行(var result = await someAsyncCall()

本文标签： 元素 浏览器 文档 使用 指向