写在前面

CSDN话题挑战赛第1期

• 活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f

• 参赛话题：前端面试宝典

• 话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
  总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！

• 创作模板：

🍄简述一下src与href的区别

🥦考点

主要考察HTML中src和href在使用中的不同之处。

🥦答案

href 是指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

💐一次http的请求过程

🌸考点

主要考察http的基本流程。

🌸答案

1. 域名解析

2. 发起TCP的3次握手

3. 建立TCP连接后发起http请求

4. 服务器端响应http请求，浏览器得到html代码

5. 浏览器解析html代码，并请求html代码中的资源

6. 浏览器对页面进行渲染呈现给用户
   

🌰同步和异步的区别

🥜考点

这是前端面试中一个常见的考点，主要考察学生对同步和异步的理解
。

🥜答案

同步是阻塞模式，异步是非阻塞模式

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去;

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

🌳深拷贝和浅拷贝

🌵考点

这道题也是前端面试中的重点，主要考察前端同学对深/浅拷贝的理解以及它们之间的区别。

🌵答案

浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型.拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址。
深拷贝是将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟个新的区域存放新对象。
区别：浅拷贝基本类型之前互不影响，引用类型其中一个对象改变了地址，就会影响另一个对象；深拷贝
改变新对象不会影响原对象，他们之前互不影响。

🍁前端界面又哪三层组成

🍂考点

本题主要考察了前端界面的三层结构。

🍂答案

网页分成三个层次，即：结构层、表示层、行为层。

1.网页的结构层（structurallayer）由HTML 或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出这些标签不包含任何关于如何显示有关内容的信息。
2.网页的表示层（presentationlayer）由CSS 负责创建。
3.网页的行为层（behaviorlayer）负责回答"内容应该如何对事件做出反应"这一问题。

🌼html中action方法的get和post的区别

🌹考点

这道面试题主要考察form表单中的get和post的差异。

🌹答案

1. Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据。
2. Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用"?“连接，而各个变量之间使用”&"连接。Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。
3. Get是不安全的，因为在传输过程，数据被放在请求的URL中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。Post的所有操作对用户来说都是不可见的。
4. Get传输的数据量小，这主要是因为受URL长度限制。而Post可以传输大量的数据，所以在上传文件只能使用Post。
5. Get限制Form表单的数据集的值必须为ASCII字符。而Post支持整个ISO10646字符集。
6. Get是Form的默认方法。

🌾cookie与session的区别

🌿考点

这道面试题是前端面试经常问的问题，主要考察了浏览器会话session和cookie的不同。

🌿答案

cookie保存在客户端（浏览器）；session保存在服务端（redis）
Session是由应用服务器维持的一个服务器端的存储空间，用户在连接服务器时，会由服务器生成一个唯一的SessionID,用该SessionID 为标识符来存取服务器端的Session存储空间。

cookie的优点：

1.极高的扩展性和可用性
2.通过良好的编程，控制保存在cookie中的session对象的大小。
3.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
4.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
5.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

cookie的缺点：

1.cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

🍀谈谈你对MVVM开发模式的理解

☘考点

本问题主要考察考生对Vue中MVVM模式的理解

☘答案

MVVM分为Model、View、ViewModel三者。
Model 代表数据模型，数据和业务逻辑都在Model层中定义；
View 代表UI视图，负责数据的展示；
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；
Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。
这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

🌽Vue 有哪些指令

🍆考点

本题主要考察Vue框架的指令。

🍆答案

vue常用指令有：v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等。

其中，v-show和v-if的区别如下：
v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

🍅http和https的区别

🌶考点

本题主要考察对协议的理解，求职者可以从它们的相同点和不同点答起。

🌶答案

http传输的数据都是未加密的，也就是明文的，网景公司设置了SSL协议来对http协议传输的数据进行加密处理，简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。
区别：
Https协议需要ca证书，费用较高。
http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443
http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

文章写到这里就结束了，本文主要讲解了前端面试中常见的面试题，如对找工作有需求的小伙伴儿可以在牛客上看更多的大厂的面经，这里给小伙伴儿们附上连接😉😉😉（点击注册牛客账号），有需要的小伙伴可以注册哦~

写在最后

CSDN话题挑战赛第1期

• 活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f