前端面试题

1.闭包

闭包就是能够读取其他函数内部变量的函数。
闭包的缺点：滥用闭包函数会造成内存泄露，因为闭包中引用到的包裹函数中定义的变量都
永远不会被释放，所以我们应该在必要的时候，及时释放这个闭包函数本

2.数据类型

基本数据类型：String,Boolean,number,Null,undefined,object,
字符串 布尔 数值 空值 未定义 对象
引用数据类型：Object(Array,Date,RegExp,Function)

3.javascript 中 == 和 === 的区别是什么？举例说明。

===会自动进行类型转换，==不会

4.请尽可能详尽的解释 ajax 的工作原理

思路：先解释异步，再解释 ajax 如何使用
Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，
然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。
要清楚这个过程和原理，我们必须对 XMLHttpRequest 有所了解。
XMLHttpRequest 是 ajax 的核心机制，它是在 IE5 中首先引入的，是一种支持异步请求的
技术。简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，而不阻塞用户。
达到无刷新的效果。
特点：Ajax 可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；
按需获取数据，节约带宽资源

HTTP协议类型题目：
5. HTTP 状态消息 0 200 2 302 4 304 3 403 4 404 0 500 分别表示什么

200：请求已成功，请求所希望的响应头或数据体将随此响应返回。
302：请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当
继续向原有地址发送以后的请求。只有在Cache-Control或 Expires中进行了指定的情况下，
这个响应才是可缓存的
304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上
次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304 响应禁
止包含消息体，因此始终以消息头后的第一个空行结尾。
403：服务器已经理解请求，但是拒绝执行它。
404：请求失败，请求所希望得到的资源未被在服务器上发现。
500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这
个问题都会在服务器端的源代码出现错误时出现。

6.说一下什么是Http协议

对客户端和服务器端之间数据传输的格式规范，格式简称为“超文本传输协议”

7.什么是Http协议无状态协议?怎么解决Http协议无状态协议?

(1)、无状态协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息
(2)、无状态协议解决办法： 通过1、Cookie 2、通过Session会话保存。

8.Http协议中有哪些请求方式?

GET:用于请求访问已经被URI(统一资源标识符)识别的资源,可以通过URL传参给服务器
POST:用于传输信息给服务器,主要功能与GET方法类似,但一般推荐使用POST方式
PUT:传输文件,报文主体中包含文件内容,保存到对应URI位置
HEAD:获得报文首部,与GET方法类似,只是不返回报文主体,一般用于验证URI是否有效
DELETE:删除文件,与PUT方法相反,删除对应URI位置的文件
OPTIONS:查询响应URI支持的HTTP方法

9.Http协议由什么组成?

请求报文包括三部分:
(1).请求行:包含请求方法,URI,HTTP版本协议 (2).请求首部字段 (3).请求内容实体
响应报文包含三部分:
(1).状态行:包含HTTP版本,状态码,状态码原因短语 (2).响应首部字段 (3).响应内容实体

10.HTTP协议的工作原理?

HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息，通常情况下会配合数字证书实现。

11.你如何对网站的文件和资源进行优化？

文件合并
文件最小化/文件压缩
使用 CDN 托管
缓存的使用

12.什么是响应式设计？

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有
的人能在这些设备上让网站运行正常

13.ajax的同步和异步区别：

同步：阻塞的：浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返
回数据，浏览器才能显示页面
异步：非阻塞的:浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），
服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新

14.如何解决跨域问题? ?

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域
出于安全考虑，服务器不允许 ajax 跨域获取数据，但是可以跨域获取文件内容，所以
基于这一点，可以动态创建 script 标签，使用标签的 src 属性访问 js 文件的形式获取 js
脚本，并且这个 js 脚本中的内容是 函数调用，该函数调用的参数是服务器返回的数据，为
了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的
数据，这就是解决跨域问题的主流解决方案

15.简述 ajax 的过程。

创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
设置响应 HTTP 请求状态变化的函数
发送 HTTP 请求
获取异步调用返回的数据
使用 JavaScript 和 DOM 实现局部刷新
16.axios和ajax的区别

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
优缺点：
①ajax：
本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务
②axios：
从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）

17.JavaScript 链 原型，原型链 ? 有什么特点？

原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也有可能有自
己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链
原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链
VUE方面的问题：
1.谈谈你对MVVM开发模式的理解

Vue是一个 MVVM框架，其各层的对应关系如下:
View层：在Vue中是绑定dom对象的HTML(代表UI视图，负责数据的展示；)
ViewModel层：在Vue中是实例的vm对象 (负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；)
Model层：在Vue中是data、computed、methods等中的数据(代表数据模型，数据和业务逻辑都在Model层中定义；)
在 Model 层的数据变化时，View层会在ViewModel的作用下，实现自动更新

2、Vue的响应式原理？

Vue响应式底层实现方法是 Object.defineProperty() 方法，该方法中存在一个getter和setter的可选项，可以对属性值的获取和设置造成影响
Vue中编写了一个wather来处理数据
在使用getter方法时，总会通知wather实例对view层渲染页面
同样的，在使用setter方法时，总会在变更值的同时，通知wather实例对view层进行更新
————————————————
版权声明：本文为CSDN博主「BEYOND-小明」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39940684/article/details/102939078

欢迎使用Markdown编辑器

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

1. 全新的界面设计 ，将会带来全新的写作体验；
2. 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
3. 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
4. 全新的 KaTeX数学公式 语法；
5. 增加了支持甘特图的mermaid语法¹ 功能；
6. 增加了 多屏幕编辑 Markdown文章功能；
7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
8. 增加了 检查列表 功能。

功能快捷键

加粗样式
撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

• 项目
  • 项目
    • 项目

1. 项目1
2. 项目2
3. 项目3

• 计划任务
• 完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	'Isn't this fun?'	‘Isn’t this fun?’
Quotes	"Isn't this fun?"	“Isn’t this fun?”
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

创建一个自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。²

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通过欧拉积分

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

• 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

这将产生一个流程图。:

• 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

• 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

---

1. mermaid语法说明 ↩︎

2. 注脚的解释 ↩︎