2020 年前端面试题及答案，~~~呕心沥血熬夜整理

工作以来，感觉自己会的东西还算多，但是面试时就答不出来、答不全面，究其原因，则是自己从来没有认真深挖、整理所有的知识点，每个知识点，都只是了解了皮毛，所以还是决定从今天开始，重新学习，并记录重要的知识点。

1. 浏览器篇

1.1 常用那几种浏览器测试？主流浏览器的内核有哪些？

Q1：IE、Safari、Chrome、Mozilla Firefox、Opera
Q2:
1、Trident内核

代表产品为Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎 。

2、Gecko内核

代表作品为Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox。

3、WebKit内核

代表作品有Safari、Chrome。WebKit是一个开源项目，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。

4、Presto内核

代表作品Opera。Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。

1.2 说说你对浏览器内核的理解？

浏览器内核主要包括以下三个技术分支：排版渲染引擎、 JavaScript引擎，以及其他。
排版渲染引擎：主要负责取得网页的内容(HTML、XML、图像等)、整理信息，以及计算网页的显示方式，然后输出至显示器

JavaScript引擎：是用来渲染JavaScript的，JavaScript的渲染速度越快，动态网页的展示也越快

1.3 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

1.浏览器根据请求的URL交给DNS域名解析，找到真实IP；

2.浏览器根据 IP 地址向服务器发起 TCP 连接，与浏览器建立 TCP 三次握手

a.客户端向服务器发送一个建立连接的请求

b.服务器接到请求后发送同意连接的信号

c.客户端接到同意连接的信号后，再次向服务器发送了确认信号，然后客户端与服务器的连接建立成功

3.浏览器发送HTTP请求

浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等；

4.服务器处理请求并返回HTTP报文（HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。）：

a…服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；

b.服务器将得到的 HTML 文件发送给浏览器；

c.在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页；

d在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML 。

5.断开连接

1.4 浏览器缓存

1.sessionStorage

优点：可以临时存储，关闭页面标签自动回收，不支持跨页面交互

缺点：只能作为临时存储，不能存储持久化

2.localStorage

优点：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

缺点：存在大小限制，IE8以上的IE版本才支持这个属性；目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3.cookie
优点：兼容性最好，几乎所有的浏览器都支持

缺点：大小有限制，而且每次发送请求，请求头里会带着cookie一起发过去，现在基本大多数登录的合法性验证都是用cookie验证的

4.userData

优点：出现的时间比sessionStorage要早

缺点：IE专门的存储方式，存储大小有限，单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB

1.5. HTTP

1.5.1 http状态码

1. 以 2xx 为开头的都表示请求成功响应.

状态码	含义
200	请求成功
204	请求处理成功，但是没有资源可以返回
206	对资源某一部分进行响应，由Content-Range 指定范围的实体内容。

2. 以 3xx 为开头的都表示需要进行附加操作以完成请求

状态码	含义
301	永久性重定向，该状态码表示请求的资源已经重新分配 URI，以后应该使用资源现有的 URI
302	临时性重定向。该状态码表示请求的资源已被分配了新的 URI，希望用户（本次）能使用新的 URI 访问。
303	该状态码表示由于请求对应的资源存在着另一个 URI，应使用 GET 方法定向获取请求的资源。
304	该状态码表示客户端发送附带条件的请求时，服务器端允许请求访问资源，但未满足条件的情况。
307	临时重定向。该状态码与 302 Found 有着相同的含义。

3. 以 4xx 的响应结果表明客户端是发生错误的原因所在。

状态码	含义
400	该状态码表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。
401	该状态码表示发送的请求需要有通过 HTTP 认证（BASIC 认证、DIGEST 认证）的认证信息。
403	该状态码表明对请求资源的访问被服务器拒绝了。
404	该状态码表明服务器上无法找到请求的资源。

4. 以 5xx 为开头的响应标头都表示服务器本身发生错误

状态码	含义
500	该状态码表明服务器端在执行请求时发生了错误。
503	该状态码表明服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。

1.5.2 URL和URI有什么区别？

URI是统一资源标识符，相当于一个人身份证号码

Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个来URI来定位的
URI一般由三部组成

①访问资源的命名机制

②存放资源的主机名

③资源自身的名称，由路径表示，着重强调于资源。

URL 是统一资源定位符，相当于一个人的家庭住址

URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上，特别是著名的Mosaic。采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。

URL一般由三部组成

①协议(或称为服务方式)

②存有该资源的主机IP地址(有时也包括端口号)

③主机资源的具体地址。如目录和文件名等

1.5.3 HTTP和HTTPS的区别

1. HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用

2. HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。

3. HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4. HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

2. HTML篇

2.1 Doctype作用？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型

1. Doctype作用

告知浏览器的解析器用什么文档标准解析这个文档。

2. 标准模式与兼容模式各有什么区别?

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。

在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

简单的说，就是尽可能的显示能显示的东西给用户看。

3. 你知道多少种Doctype文档类型

HTML 4.01中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）

2.2 说说你对语义化的理解？

语义化的优点有:

1）代码结构清晰，易于阅读，利于开发和维护

2）提高用于体验，在样式加载失败时，页面结构清晰

3）方便其他设备解析（如屏幕阅读器）根据语义渲染网页。

4）有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

语义化标签主要有

title,header,nav,main,article,h1~h6,ul,ol,address,canvas,dialog,aside,section,figure,details,mark

2.3 HTML与XHTML有什么区别?

一、其基础语言不同

1、XHTML是基于du可扩展标记语言（XML）。

2、HTML是基于标准通用标记语言（SGML）。

二、语法严格程度不同

1、XHTML语法比较严格，存在DTD定义规则。

2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。

三、可混合应用不同

1、XHTML可以混合各种XML应用，比如MathML、SVG。

2、HTML不能混合其它XML应用。

四、大小写敏感度不同

1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。

2、HTML对大小写不敏感。

五、公布时间不同

1、XHTML是2000年W3C公布发行的。

2、HTML4.01是1999年W3C推荐标准。

2.4 页面导入样式时，使用link和@import有什么区别？

1 属性差别。link属于XHTML标签，而@import完全是CSS提供的语法规则。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

2 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显.

3 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

4 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

2.5 HTML5有哪些新特性？

1. 语义化标签
语义化标签使得页面的内容结构化，见名知义

标签	描述
<header></header>	定义了文档的头部区域
<footer></footer>	定义了文档的尾部区域
<nav></nav>	定义文档的导航
<section></section>	定义文档中的节（section、区段）
<article></article>	定义页面独立的内容区域
<aside></aside>	定义页面的侧边栏内容
<detailes></detailes>	用于描述文档或文档某个部分的细节
<summary></summary>	标签包含 details 元素的标题
<dialog></dialog>	定义对话框，比如提示框

2.增强型表单

新增表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。

输入类型	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC 时间）
datetime-local	选择一个日期和时间 (无时区)
email	包含 e-mail 地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字值的输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	URL 地址的输入域
week	选择周和年

新增表单元素：

表单元素	描述
<datalist>	元素规定输入域的选项列表，使用 元素的 list 属性与 元素的 id 绑定
<keygen>	提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段。
<output>	用于不同类型的输出

新增表单属性

1）placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。

2）required 属性，是一个 boolean 属性。要求填写的输入域不能为空

3）pattern 属性，描述了一个正则表达式用于验证 元素的值。

4）min 和 max 属性，设置元素最小值与最大值。

5）step 属性，为输入域规定合法的数字间隔。

6）height 和 width 属性，用于 image 类型的 标签的图像高度和宽度。

7）autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。

8）multiple 属性 ，是一个 boolean 属性。规定 元素中可选择多个值。

3. 新增视频 和音频 标签

4. Canvas绘图

5. SVG绘图

6. 地理定位

7. 拖放API

8. Web Worker

9. Web Storage

10. WebSocket

2.6 iframe的优缺点？

优点：

1.iframe能够原封不动的把嵌入的网页展现出来。

2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：

1.会产生很多页面，不容易管理。

2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。

3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。

4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

2.7 img中的alt与title属性

alt是图片加载失败时，显示在网页上的替代文字；

title是鼠标放在图片上面时显示的文字，title是对图片的描述与进一步说明；

alt是img必要的属性，而title不是；

对于网站seo优化来说，title与alt还有最重要的一点：

搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要的文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里进一步对图片说明。

2.8 HTML 的中，如何写一个值为 “a”=‘b’ 的属性值？

3. CSS篇

3.1 行内元素有哪些？块级元素有哪些？CSS的盒模型？

3.2 清除浮动有哪些方式？

3.3 CSS选择符都有哪些？哪些属性可以继承？优先级算法如何计算？

3.4 CSS3新增伪类有哪些？

3.5 如何居中div？

3.6 为什么要初始化CSS?

3.7 说说你对BFC规范的理解？

一、什么是BFC？

　　BFC全称：块级格式化上下文（block formatting context），简单来说它就是一种属性，这种属性会影响元素与元素之间的位置、间距

二、形成BFC的条件

　　1、float：给元素添加浮动（属性值为left、right，但none除外）

　　2、position：给元素添加定位（属性值为absolute或fixed）

　　3、display：给元素添加display属性（属性值为 inline-block、table-cell或table-caption）

　　4、overflow：给元素添加overflow 属性（属性值为hidden、auto或scroll，但visible除外）

三、BFC形成后出现的常见问题

　　1、margin重叠问题

　　2、浮动相关问题

3.8 讲讲 position float display 各有哪些取值，它们互相之间会如何影响？

3.9 纯CSS实现三角形

.box {
width:0px;
height:0px;
border-top:50px solid rgba(0,0,0,0);
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid red;
border-left:50px solid rgba(0,0,0,0);
}

4. JS篇

4.1 面向对象

4.2 什么是闭包？闭包的特性是什么？

闭包其实只是一个绑定了执行环境的函数

闭包的特性：

1.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；

2.持久性：一般的函数，调用完之后，系统会自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包依然存在。

4.3 继承

4.4 DOM操作（添加、移除、移动、复制、创建和查找节点）

4.5 介绍一下new 操作符。New操作符具体干了什么？

1.创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。
2.属性和方法被加到this引用的对象中。
3.新创建的对象由this所引用，并且最后隐式的返回this。

4.6 HTML5离线存储

4.7 JS的数据类型

基本数据类型：Number、String、Boolean、Null、 Undefined、Symbol（ES6），
引用数据类型：Object(在JS中除了基本数据类型以外都是对象)

4.8 null和undefined的区别

4.9 call()和apply()的区别

传参方式不同

fun.call(thisArg,arg1,arg2,arg3,...);
fun.apply(thisArg,[arg1,arg2,arg3,...])

4.10 深拷贝和浅拷贝

4.11 ajax

4.12 数组去重

4.13 this对象

4.14 eval()

1.eval的功能是把对应的字符串解析成JS代码并运行

2.应该避免使用eval，不安全，而且非常消耗性能（2次，一次是解析成js语句，一次是执行）

3.由JSON字符串转换为JSON对象的时候可以用eval()

let obj = eval('(' + str + ')');

4.15 什么是UA?

4.16 什么是事件委托？

4.17 promise

Promise 是 JavaScript 语言提供的一种标准化的异步管理方式，它的总体思想是，需要进行 io、等待或者其它异步操作的函数，不返回真实结果，而返回一个“承诺”，函数的调用方可以在合适的时机，选择等待这个承诺兑现（通过 Promise 的 then 方法的回调）。

4.18 window.onload和document.ready的区别？哪一个先执行？

一般情况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。

window.onload是在DOM文档树加载完和所有文件加载完之后执行一个函数，也就是在页面响应加载的顺序中的“加载图片等其他信息”之后，可以操作DOM。只能执行一次，如果有多个，那么第一次的执行会被覆盖

document.ready是在DOM加载完成后就可以可以对DOM进行操作，也就是在在“加载js和css”和“加载图片等其他信息”之间，就可以操作DOM了。可以执行多次
所以，document.ready函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快

4.19 var、let和const有什么区别

1.var定义的变量可以跨块作用域访问，不可以跨函数作用域访问。
2.let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问；不允许在相同作用域内，重复声明同一个变量。
3.const定义的常量，初始化时必须赋值，只能在块作用域里使用，不能修改。
详细请查看：var、let、const三者的区别

4.20 JavaScript 启动后，内存中有多少个对象？如何用代码来获得这些信息？

5. 前端安全问题

5.1 XSS

跨站脚本攻击（XSS）通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。

常用的XSS攻击手段和目的有：

1、盗用cookie，获取敏感信息。

2、利用植入Flash，通过crossdomain权限设置进一步获取更高权限；或者利用Java等得到类似的操作。

3、利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻击）用户的身份执行一些管理动作，或执行一些一般的如发微博、加好友、发私信等操作。

4、利用可被攻击的域受到其他域信任的特点，以受信任来源的身份请求一些平时不允许的操作，如进行不当的投票活动。

5、在访问量极大的一些页面上的XSS可以攻击一些小型网站，实现DDoS攻击的效果。

5.2 CSRF

跨站请求伪造（CSRF）是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。

攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。

防御CSRF攻击：

目前防御 CSRF 攻击主要有三种策略：验证 HTTP Referer 字段；在请求地址中添加 token 并验证；在 HTTP 头中自定义属性并验证。
跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。

6. 跨域

6.1 什么是跨域？

6.2 什么是同源策略？

6.3 解决跨域的方法有哪些？

7. 性能优化

7.1 你都用过那种性能优化的方法？

1.尽可能的减少http请求

使用CSS Sprites；JS、CSS源码压缩；图片大小控制合适；启用Gzip压缩，CDN托管，data缓存；图片服务器

2.避免在CSS中使用 Expression

Expression（css表达式)又称Dynamic properties(动态属性)

3.添加expire/Cache-Control头

4.少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

5.图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。

6.当需要设置的样式很多时设置className而不是直接操作style。

7.用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

8.前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

7.2 CSS Sprite是什么，谈谈这个技术的优缺点

作者：盼盼盼

blog.csdn.net/come0across/article/details/104895118

推荐阅读  点击标题可跳转

觉得本文对你有帮助？请分享给更多人

关注「前端知音」加星标，提升前端技能

关注「前端知音」看更多干货