2024年5月10日发(作者：)

前端面试题及答案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 浏览器缓存

nStorage

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

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

torage

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

除。

缺点：存在大小限制，IE8以上的IE版本才支持这个属性；目前所有的浏览器

中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见

的JSON对象类型需要一些转换

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

缺点：大小有限制，而且每次发送请求，请求头里会带着cookie一起发过去，

现在基本大多数登录的合法性验证都是用cookie验证的

ta

优点：出现的时间比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

临时性重定向。该状态码表示请求的资源已被分配了新的

URI

，希望用户（本次）能使用

新的

URI

访问。

该状态码表示由于请求对应的资源存在着另一个

URI

，应使用

GET

方法定向获取请求的

资源。

该状态码表示客户端发送附带条件的请求时，服务器端允许请求访问资源，但未满足条件的

情况。

临时重定向。该状态码与

302 Found

有着相同的含义。

302

303

304

307

3.

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

状态

码

含义

400

该状态码表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送

请求。

该状态码表示发送的请求需要有通过

HTTP

认证（

BASIC

认证、

DIGEST

认证）的认

证信息。

401

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的区别

•

HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证

书，一般免费证书较少，因而需要一定费用

HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的

SSL 加密传输协议。

HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，

前者是80，后者是443。

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 说说你对语义化的理解？

语义化的优点有:

•

•

•

•

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

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

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

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

不同的权重

语义化标签主要有

title,header,nav,main,article,h1~h6,ul,ol,address,canvas,dialog,aside,secti

on,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. 语义化标签

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

标签

描述

定义了文档的头部区域

定义了文档的尾部区域

定义文档的导航

定义文档中的节（

section

、区段）

定义页面独立的内容区域

定义页面的侧边栏内容

用于描述文档或文档某个部分的细节

标签包含

details

元素的标题

定义对话框，比如提示框

2.增强型表单

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

输入类型

描述

color

主要用于选取颜色

输入类型

描述

date

从一个日期选择器选择一个日期

datetime

选择一个日期（UTC 时间）

datetime-local

选择一个日期和时间 (无时区)

email

包含 e-mail 地址的输入域

month

选择一个月份

number

数值的输入域

range

一定范围内数字值的输入域

search

用于搜索域

tel

定义输入电话号码字段

time

选择一个时间

url

URL 地址的输入域

week

选择周和年

3.新增表单元素：

表单元素

描述

元素规定输入域的选项列表，使用 元素的 list 属性与 元素的 id 绑定