前端面试问题（白话回答，便于记忆）

1.href 和 src的区别

href和src都是对外部资源进行引入，比如图片，css，js等资源

但href不会阻塞页面的加载和解析，src会阻塞，遇到标签含有src属性时，页面的加载和解析会暂停，只到对应的资源加载完成

关于详细的区别可以参考这篇文章：谈谈src和href的区别 - 简书

2.对HTML语义化的理解

使用语义化标签能让代码看起来更好理解，增强可读性，也能够更清晰的看懂网页的结构。同时使用语义化标签也有利于SEO

常见的语义化标签：

<header></header>  头部<nav></nav>  导航栏<section></section>  区块（有语义化的div）<main></main>  主要区域<article></article>  主要内容<aside></aside>  侧边栏<footer></footer>  底部

3. DOCTYPE(⽂档类型) 的作用

告诉浏览器用什么样的文档类型来解析文档

html5的doctype为

<!DOCTYPE html>

4. script标签中defer和async的区别

不带defer和async的话，加载js的话是会阻塞后面页面的解析和加载的。可以看一下下面的示例图：

加了async后，js加载（下载）就会和页面解析异步进行，但是执行还是会阻塞后面的加载和解析

加了defer后，js加载和页面解析会异步进行，但执行会等待页面解析完成后再去执行

总之，async会在加载完js脚本后立即执行，执行部分阻塞页面解析，加载部分不阻塞页面解析

defer会一开始先加载脚本，但会等到页面解析完成后再进行执行

具体区别可参考这篇文章：

https://segmentfault.com/q/1010000000640869

5.meta标签的作用？常⽤的meta标签有哪些

meta标签可以存放一些数据，例如关键词，编码，页面描述等。这些数据用于浏览器解析，搜索引擎爬取和解析数据，或者其他web服务

meta标签作用文章：

https://www.w3cplus.com/html5/meta-tags-and-seo.html

①定义charset编码类型

<meta charset="UTF-8" >

②页面关键词

<meta name="keywords" content="关键词" />

③页面定时刷新和重定向

<meta http-equiv="refresh" content="0;url=" />

④适配移动端

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

6.HTML5新特性

①新增语义化标签

②表单增加更多输入类型，便于检查填写格式和类型，且表单新增了一些属性便于验证，比如required，pattern属性

③dom查询操作优化，可以用document.querySelector()，查询起来更方便

④web存储，新增local storage和session storage

⑤新增画布canvas，可以使用JavaScript在网页上绘制图像

⑥提供了音频和视频的标准，可以使用audio和video标签更好的处理音频和视频

html5新特性文章：HTML5的十大新特性 - Vicky_YU - 博客园

7.清除浮动的办法

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

3.使用after伪元素清除浮动（推荐使用）

清除浮动的最常用的四种方法，以及优缺点_h_qingyi的博客-CSDN博客_清除浮动

8.BFC是什么

BFC叫块格式化上下文，对应的英文为Block Formatting Context，

BFC可以简单的理解为是一个独立的布局环境，BFC内部的元素布局与外部互不影响

用bfc可以解决一些问题，例如

浮动元素令父元素高度坍塌的问题
非浮动元素被浮动元素覆盖（一个div是float，另外一个div是普通的div，但这两个div会重叠）
外边距垂直方向重合的问题

BFC的产生条件：（）

a)、float的值不为none

b)、overflow的值不为visible

c)、display的值为table-cell, table-caption, inline-block中的任何一个

d)、position的值不为relative和static

CSS3触发BFC方式则可以简单描述为：在元素定位非static,relative的情况下触发，float也是一种定位方式。

一次弄懂css的BFC - 知乎

9.HTTP Cache的作用

缓存就是将已经请求得到的内容放在一个就近的仓库存放起来，下次请求可以不再向服务器请求，而是直接从这个缓存仓库获取。
Web缓存主要有以下几个优势：

加快页面响应速度。增强用户体验。
减少网络带宽的消耗
减轻服务器压力

http缓存的具体过程：

1.浏览器第一次加载资源，服务器返回200，浏览器将资源文件从服务器上请求下载下来，并把response header及该请求的返回时间一并缓存；

2.下一次加载资源时，先比较当前时间和上一次返回200时的时间差，如果没有超过cache-control设置的max-age，则没有过期，命中强缓存，不发请求直接从本地缓存读取该文件（如果浏览器不支持HTTP1.1，则用expires判断是否过期）；如果时间过期，则向服务器发送header带有If-None-Match和If-Modified-Since的请求

3.服务器收到请求后，优先根据Etag的值判断被请求的文件有没有做修改，Etag值一致则没有修改，命中协商缓存，返回304；如果不一致则有改动，直接返回新的资源文件带上新的Etag值并返回200；；

4.如果服务器收到的请求没有Etag值，则将If-Modified-Since和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回304；不一致则返回新的last-modified和文件并返回200；；

http缓存详解，http缓存推荐方案 - 听风是风 - 博客园

深入理解HTTP Cache（HTTP Caching译文+理解）_奋斗的小绿萝-CSDN博客

10.border-box和conten-box区别（字节面试原题）

border-box就是用元素内容和padding和border一起决定width和height

content-box就是用元素的width和height决定元素的宽高，也就是说元素的宽高与padding和border大小无关

并说出以下代码两个div蓝色区域大小

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style type="text/css">div.box{width: 10px;height: 10px;border: 1px solid red;margin: 2px;padding: 2px;background: blue;}.borderBox{box-sizing: border-box;}.contentBox{box-sizing: content-box;}</style>
</head>
<body>
<div class="borderBox box"></div>
<div class="contentBox box"></div>
</body>
</html>

首先说一下答案，第一个蓝色空间是4x4大小，第二个div是10x10大小

设置为content-box，内容大小只和width和height属性有关，设置为border-box的话，内容大小还需要考虑padding和border的值，所以第一个是10- 1*2 - 2*2 = 4 (10-border占用的空间-padding值)

11.说出以下js代码执行答案（字节面试原题）

var x = 1;function fn() {const x = 2;const a = {x: 3,fn1() {console.log(this.x);},fn2: () => {console.log(this.x);}}const fn3 = a.fn1a.fn1();a.fn2();fn3();
}fn.call({x: 4});

答案分别为3,4,1

第一个，a.fn1() 是a调用的，所以this.x为a里面的3，输出3

第二个，a.fn2() 是一个箭头函数，this指向它所在的上下文为a，a是在fn中定义的，fn的this指向为{x:4} (由于call方法修改this指向导致)，所以箭头函数this指向为{x:4}这个对象，最后输出为4

第三个，fn3(), fn3可以看成是fn1，fn1是普通函数，fn3是由window对象调用的，this执行window，所以输出1

彻底搞懂JavaScript中的this指向问题 - 知乎

12.箭头函数和普通函数的区别

①写法上不一样，箭头函数写起来更简洁

②箭头函数不能作为构造函数，不能使用new

③箭头函数不绑定arguments，取而代之用rest参数...解决

④箭头函数没有原型属性

箭头函数与普通函数的区别 - biubiu小希希 - 博客园

13.JS实现继承的方式

①原型链继承

②ES6已经支持通过extends关键字支持继承

ES6的继承 - 简书

js实现继承的几种方式 - 简书

14.vue是如何实现数据双向绑定的？

vue的双向绑定原理及实现 - ____chen - 博客园

15.vue2和vue3的区别

1.vue实例创建方式不同，vue2中是使用new Vue（），vue3是使用 createApp（）

2.data属性必须是一个函数

3.vue3可以使用composition api来创建vue组件，使用set up函数，而不是像vue2一样，需要以此去定义data，methods等属性

总的来说，vue3相比于vue2的性能更好，更好的支持typescript，支持使用composition api

可以参考这个视频，是英文版的

VUE3.0正式发布？它与2.0有啥不同？它的优势在哪？我要不要迁移？学不动了！看看油管大佬怎么说吧！_哔哩哔哩_bilibili

https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api

16.cookie，localstorage，sessionstorage的区别和使用场景

区别：

1、cookie包含的内容比localstorage和sessionstorage要多，包括name,value，过期时间，域名，请求路径等。localstorage和sessionstorage则是key，value的形式

2.cookie会有过期时间，当前时间超过这个时间则会过期，localstorage永久保存，一直有效，sessionstorage只对当前会话有效，关闭浏览器则存储丢失

3.cookie大小不能超过4k，localstorage和sessionstorage存储大小可以达到5M

4.cookie会发送给服务端，webstorage只会存在本地，安全性会比webstorage差。这里cookie的安全性问题可以再解释下，如果攻击者获取到了用户的cookie（例如XSS攻击），他可以用这个获取到的cookie对服务器进行请求，所以cookie是不安全的

使用场景：

cookie用于存储用户登录状态，或者用户名信息，达到记住用户登录的功能，

sessionstorage可以用来统计当前页面中某个按钮被点击次数，一般用来存储一些临时性数据，

localstorage可用来长期保存用户登录信息，以及一些长期保存的数据

17.如何实现0.5px边框

主要是使用伪元素，代码中有注释

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>0.5px边框</title><style>[class^=border]{margin: 40px auto;width: 100px;height: 100px;background-color: #69bf63;position: relative;}.border1:after{content: '';left: 0;top: 0;width: 100%;height: 1px;position: absolute;background-image: linear-gradient(to bottom,black 50%,transparent 50%);/*  这里用了linear-gradient 函数，颜色从上到下渐变，black和透明各占50%，所以显得下半部为空*/}.border2:after{content: '';left: 0;top: 0;width: 100%;height: 1px;position: absolute;background-color: black;transform: scaleY(0.5);transform-origin: 0 0;}.border3:after{content: '';position: absolute;left: 0;top: 0;width: 200%;height: 200%;border: 1px solid black;transform: scale(0.5);transform-origin: 0 0;box-sizing: border-box; /*这个也需要设置*/}</style>
</head>
<body><!--使用伪元素，伪元素宽度设置为父元素100%，高度设置1px，然后使用 background-image + linear-gradient函数，使得背景一半透明--><div class="border1"></div><!--使用伪元素，伪元素使用 transform: scaleY(0.5); 来缩小高度"--><div class="border2"></div><!--四面都需要设置边框--><div class="border3"></div></body>
</html>

18.如何实现宽度自适应input框

简单一点的，用contenteditable属性，然后设置min-width和max-width属性就好了，但这样不能无限增大

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自适应input框</title><style>.adaptableBox{color: #66757f;display: inline-block;height: 22px;min-width: 20px;max-width: 100px;border: 1px solid grey;}</style>
</head>
<body><div contenteditable="true" class="adaptableBox"></div>
</body>
</html>

input根据内容自适应宽度_优雅的王德奥的博客-CSDN博客_input根据内容自适应宽度

19.HTTP1.1和HTTP2的区别

①HTTP2采用了二进制进行数据传输，Http1.1是采用文本格式

②多路复用，只采用一条tcp连接进行传输，且单个连接可以承载任意数量的数据流。之前的http1.1是采用多条tcp连接进行传输，浏览器为了控制资源，会对单个域名有 6-8个的TCP连接请求限制

③头部压缩，http2协议对头部进行压缩，能够节省传输流量

④服务端资源推送

服务端可以在发送页面HTML时主动推送其它资源，而不用等到浏览器解析到相应位置，发起请求再响应。例如服务端可以主动把JS和CSS文件推送给客户端，而不需要客户端解析HTML时再发送这些请求。

HTTP 2.0_哔哩哔哩_bilibili

HTTP1.0、HTTP1.1 和 HTTP2.0 的区别 - _浪潮之巅.☆ - 博客园

20.HTTP是如何组成的，有什么请求方法，一般哪些场景会使用，

HTTP由请求和响应组成

HTTP请求由请求头，请求行，请求体组成

请求行例子（由请求方法请求路径，请求协议组成）：

GET /css_learning/test.html HTTP/1.1

请求头例子：

accept-encoding: gzip, deflate, br

origin: https://blog.csdn.net
referer: https://blog.csdn.net/qq_43163943/article/details/109402291

user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36

请求体例子(需要附带的数据信息)：

name=bowenyang

HTTP响应由响应头，响应行，响应体组成

响应行中包含了状态码，例如常见的200，404等，响应头则是一些http头部信息，响应体是服务器返回的数据

HTTP请求方法主要有8个：GET、POST、PUT、DELETE、OPTIONS、PATCH、HEAD、TRACE

一般向服务器请求一些数据时需要用GET

需要发送比较敏感数据可以采用POST，比如验证密码是否正确

PUT话可以用来修改资源

DELETE话用来删除某个资源

HEAD话只会返回头部信息，所以可以用来判断某个请求的资源是否存在

OPTIONS可以询问可以执行哪些方法

Http协议的组成_嘤嘤樱桃小丸子的博客-CSDN博客_http的组成

HTTP 请求方法和应用场景_thelastsinger的博客-CSDN博客

21、HTTP-ONLY是有什么用

http-only是响应头set-cookie里面的一个flag，设置了之后，通过js代码不能访问到浏览器里面对应的cookie，可以有效的防止XSS攻击

Cookie中的httponly的属性和作用_YG青松的博客-CSDN博客_httponly

22.jwt如何实现用户认证？

jwt的话，是服务器生成的一个token，后续客户端可以拿着这个token继续请求服务器，token的认证流程为：第一次输入用户名密码登录，服务器会为你生成一个token并传给你，之后你可以把这个token存在浏览器，后续请求服务器带着这个token。

基于jwt的用户登录认证 - xccjk - 博客园

如何存储 JWT - 简书

23.HTTPS加密的过程，非对称加密和对称加密的区别，性能如何？

首先，浏览器访问服务器，服务器返回证书内容，随后，浏览器验证证书是否有效。验证为有效后，会随机生成一个值，作为后续加密传输的钥匙，然后将这个钥匙用证书公钥加密，这样，就能保证只有服务器能够解密（只有服务器有对应的证书私钥），之后，服务器收到了加密的秘钥，用自己的私钥去解密，得到各个客户端随机生成的值，之后服务器就可以用这个值进行加密和解密传输数据了。

所以，一开始随机生成的对称秘钥（客户端随机生成的值），会使用非对称秘钥加密并传输，后续服务器和客户端之间的通信通过对称秘钥加密和解密，这样性能更高

性能而言，对称加密性能优于非对称加密

HTTPS加密（握手）过程 - 简书

24、js双等号和三等号的区别？双等号具体怎么判断的？

双等号在判断时会将左右两边的变量进行一个类型转换（如果类型不同的话），再进行值的比较。三等号还会去判断两个变量的值是否相等。

双等号判断具体过程：

比较number类型和string类型时，会尝试将string转化为number类型
有一个是boolean类型的时候，将boolean类型转化为0或1
如果一个是object类型，另外一个是number或string类型，则会将调用这个对象的valueOf()和toString()方法

mdn文档关于双等号的解释

Equality (==) - JavaScript | MDN

24.js严格模式的概念：

js严格模式可以用来调整代码的严谨性，避免一些不合理的错误，在编程时，可在js头部使用'use strict'; 语句开启严格模式。

严格模式的约束比较多，也没有必要记完，这里说一下比较好记的

1、变量必须先声明再使用，如下语句执行时会报错

'use strict';
obj1 = {};  // ReferenceError: obj1 is not defined

2、不允许删除变量

'use strict';
var obj1 = {};
delete obj1 //SyntaxError: Delete of an unqualified identifier in strict mode.var a = '123'
delete a // SyntaxError: Delete of an unqualified identifier in strict mode.

3、不允许对只读属性赋值:

'use strict';
var obj1 = {}
Object.defineProperty(obj1,'name',{value:'Jack',writable:false})
obj1.name = 'Tom'

4.eval语句内创建的变量不会影响外部变量

'use strict';
var x = 17;
var evalX = eval("'use strict'; var x = 42; x;");
console.log(x); // 17

5.this不会指向全局对线，例如window

    'use strict';function fun() { return this; }console.log(fun() === undefined); // 输出true，说明this是undefined//在未开启strict模式下，this指向window

具体的规则可查阅mdn文档：

Strict mode - JavaScript | MDN

25.js垃圾回收机制

js会定时的清理不使用的对象，进行内存的释放

判断对象是否在使用主要有两种算法：

1、引用计数（reference-counting）

2、标记清除（mark and sweep）

引用计数是对每一个对象保持一个引用计数，当没有变量引用的时候，就可以去清除这个对象，但引用计数不能解决循环引用的问题

标记清除算法的话相对高级一些，也是目前用的更多的算法。

标记清除算法会从一个根对象（全局对象）开始遍历，从此可以遍历到哪些对象是还在引用的，没有访问到的对象就是可以被回收的对象。标记清除算法是可以解决之前说的循环引用的问题的

js垃圾回收mdn文档：

Memory Management - JavaScript | MDN

26.对vue生命周期的理解

vue的生命周期是vue实例从创建到销毁的一个过程

主要的生命周期函数有，beforeCreate，Created，beforeMount，Mounted，beforeDestroy，destroyed，beforeUpdate，Updated

执行到beforeCreate时，vue已经最好了生命周期钩子函数的初始化，执行到created，data，methods这些属性都已经绑定，此时可以访问到data里面的数据以及调用methods里面的方法。

在created和beforeMount之间，会进行模板的编译（如果没有el选项）。

执行到beforeMount时，模板以及编译完成，但是没有挂载到dom，使用document获取对象是不存在的

在执行到mounted时，已经完成了Dom的挂载和渲染

当vue实例将要被销毁之前，会调用beforeDestroy函数，这时候还能够访问vue实例里面的方法和数据，当调用了destroyed时，实例已经被销毁

beforeUpdated是在数据修改后进行调用，这时候页面还没有重写渲染，在beforeUpdate和updated直接，虚拟dom更新以及对dom对象修改，在执行updated时界面已经更新了

持续更新中。。。

参考文章：

掘金