2021前端面试点总结（持续更新中）

1、 Vue生命周期过程

创建期间生命周期方法
beforeCreate:
created:
beforeMount
mounted
运行期间生命周期方法
beforeUpdate
updated
销毁期间的生命周期方法
beforeDestroy
destroyed

2、浏览器渲染过程

①解析HTML生成DOM树。
②解析CSS生成CSSOM规则树。
③将DOM树与CSSOM规则树合并在一起生成渲染树。
④遍历渲染树开始布局，计算每个节点的位置大小信息。
⑤将渲染树每个节点绘制到屏幕
④⑤详解：Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
Display（展示）:将像素发送给GPU，展示在页面上

3、SEO搜索引擎优化

搜索引擎优化，简称为SEO，表面的含义来看，是让网站更容易被搜索引擎收录，并且当用户通过搜索引擎进行检索时在检索结果中获得好的排名位置，从而达到网站推广的目的。作为网络营销的种手段，搜索引擎优化的根本目的是让用户利用搜索引擎这种互联网工具获取有效信息。

前端需要注意哪些SEO

合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
重要内容不要用js输出：爬虫不会执行js获取内容
少用iframe：搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标

4、浏览器存储

三者都是浏览器端存储数据

Cookie

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递
设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
缺点：存储量太小，只有4kb
所有http请求都会含cookie，会影响获取资源的效率
API简单，需要封装一下才能用

LocalStorage

永久存储，单个域名存储量比较大（推荐5MB，各浏览器不同），总体数量无限制，浏览器关闭后数据不丢失除非主动删除数据

SessionStorage

在同源的同窗口中，始终存在的数据，存储量更大（推荐没有限制，但实际上各浏览器不同） 数据在当前浏览器窗口关闭后自动删除
三者使用场景：

cookie一般存储用户名密码相关信息，或者过期日期。

localStorage可以用来统计页面访问次数。

sessionStorage可以用来统计当前页面元素的点击次数。

5、 CSS属性继承

文本

color(颜色，a元素除外)
direction(方向)
font（字体）
font-family（字体系列）
font-size（字体大小）
font-style（用于设置斜体）
font-variant（用于设置小型大写字母）
font-weight（用于设置粗体）
letter-spacing（字母间距）
line-height（行高）
text-align（用于设置对齐方式）
text-indent（用于设置首航缩进）
text-transform（用于修改大小写）
visibility（可见性）
white-space（用于指定如何处理空格）
word-spacing（字间距）

6、webpack和gulp区别(模块化与流的区别)

gulp强调的是前端开发的工作流程，我们可以通过配置一系 列的task,定义task处理的事务(例如文件压缩合并、雪碧图、启动server、版本控制等) ,然后定义执行顺序，来让gulp执行这些task,从而构建项目的整个前端开发流程。
webpack是-个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源(图片、js文件、css文件等)都看成模块,通过
loader (加载器)和plugins (插件)对资源进行处理,打包成符合生产环境部署的前端资源。

7、JSONP

全称为json with padding,解决老版本浏览器跨域数据访问问题，原理是web页面调用JS文件不受浏览器同源策略限制，所以通过script标签可以进行跨域请求，流程如下:首先前端设置好回调参数，并将其作为URL的参数服务器端收到请求后，通过该参数获取到回调函数名，并将数据放在参数中返回收到结果后因为是script标签，所以浏览器当做脚本运行 仅支持GET请求

jsonp解决跨域

流程：

1、首先前端设置好回调函数，并将其作为URL的参数
2、服务器端收到请求后，通过该参数获取到回调函数名
3、收到结果后，因为是script标签，所以浏览器当做脚本运行

var script = document.createElement('script');
script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回调执行函数
function onBack(res) {
    alert(JSON.stringify(res));
}

8、跨域

跨域是指浏览器不能执行其他网站的脚本，它是由浏览器同源策略造成的，是浏览器对javaScript实施的安全措施

9、异步加载和延迟加载

1. 异步加载的方案： 动态插入 script 标签

2. 通过 ajax 去获取 js 代码，然后通过 eval 执行

3. script 标签上添加 defer 或者 async 属性

4. 创建并插入 iframe，让它异步执行 js

5. 延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的
   
   
   
   

10、GET和POST区别

GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。
表面区别：

传参方式

1. GET可以通过URL直接传参
2. 两者都可以通过body传参

长度

1. header和body都没有对长度的限制
2. URL的长度受到部分早期浏览器的限制
3. URL的长度还可能受到服务器的限制，由于URL的实际超长或者设定其Content-Length较大值会引起服务器最大并发数下降或者资源空耗
4. 2和3间接限定了URL方式发起GET方法的长度

安全性

GET不会修改服务端数据，POST可以修改数据
URL方式发起GET请求，参数会明文暴露
使用GET提交数据还可能会造成Cross-site request forgery攻击
本质上安全性无区别

GET请求在URL中传送的参数是有长度限制的，而POST没有限制(★)

对参数的数据类型，GET值接收ASCII字符，而POST没有限制

对参数的数据类型，GET只接收ASCII字符，而POST没有限制

GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息

GET参数通过URL传递，POST放在Request body中(★)

11、什么是页面重构

页面重构是一种思想，目前在实际应用中我个人直观的认为是页面的二次构造（在实现层次）：包括设计稿的重构、过时页面的重构、功能不全页面的重构、代码重构。

设计稿的重构：设计师的设计稿可能不是特别符合页面效果，当拿到设计稿时需要通过二次重构和修改达到预期效果。
功能不全页面的重构：页面功能不符合用户体验、用户交互。
过时页面的重构：使用的是过时的代码和标签，跟不上时代的发展。
代码重构：代码质量、SEO优化、页面性能、更好的语义化、浏览器兼容、CSS优化。

12、HTTP状态码

100 Continue 继续，一般在发送post请求时，已发送了http
header之后服务端将返回此信息，表示确认，之后发送具体参数信息

200 OK 正常返回信息

201 Created 请求成功并且服务器创建了新的资源

202 Accepted 服务器已接受请求，但尚未处理

301 Moved Permanently 请求的网页已永久移动到新位置

302 Found 临时性重定向

303 See Other 临时性重定向，且总是使用 GET 请求新的 URI

304 Not Modified 自从上次请求后，请求的网页未修改过

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求

401 Unauthorized 请求未授权

403 Forbidden 禁止访问

404 Not Found 找不到如何与 URI 相匹配的资源

500 Internal Server Error 最常见的服务器端错误

503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

13、封装

封装（Encapsulation）是面向对象方法的重要原则，就是把对象的属性和操作（或服务）结合为一个独立的整体，并尽可能隐藏对象的内部实现细节，把过程和数据包围起来，对数据的访问只能通过已定义的接口

14、H5新特性

语义标签
增强型表单
多媒体标签 audio video
Canvas绘图
SVG绘图
地理定位接口 getLocation getCurrentPosition
拖拽接口
Web Worker
Web Storage
Web Socket

15、CSS3新特性

CSS3实现圆角（border-radius），阴影（box-shadow）

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

颜色: 新增RGBA , HSLA模式

盒子模型: box-sizing

背景:background-size background-origin background-clip

渐变: linear-gradient , radial-gradient

过渡 : transition 可实现动画

自定义动画 animate @keyfrom

媒体查询 多栏布局 @media screen and (width:800px) {…}

border-image

2D转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

3D转换

字体图标 font-face

弹性布局flex

增加了更多的CSS选择器 多背景 rgba

在CSS3中唯一引入的伪元素是 ::selection.

16、WebSocket

WebSocket 是一种网络通信协议，它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。WebSocket 允许服务器端与客户端进行全双工（full-duplex）的通信。举例来说，HTTP 协议有点像发电子邮件，发出后必须等待对方回信；WebSocket 则是像打电话，服务器端和客户端可以同时向对方发送数据，它们之间存着一条持续打开的数据通道。

17、HTML5行内元素和块级元素

行内元素有：a b span img input select strong
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4… p
空元素：<br> <hr> <img> <input> <link> <meta>
行内元素不可以设置宽高，不独占一行
块级元素可以设置宽高，独占一行

18、移动端 1px 被 渲染成 2px 问题

1 局部处理
meta标签中的 viewport属性 ，initial-scale 设置为 1
rem 按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩小一倍即可；
2 全局处理
meta标签中的 viewport属性 ，initial-scale 设置为 0.5
rem 按照设计稿标准走即可



’

19、如何进行网站性能优化

content方面
减少HTTP请求：合并文件、CSS精灵、inline Image、采用图片懒加载技术，在页面开始加载的时候，不请求真实图片地址，而是用默认图占位，当前页面加载完成后，在根据相关的条件依次加载真实图片（减少页面首次加载http请求的次数）随着页面滚动，再把下面区域中能够呈现出来的图片进行加载。
减少DOM元素数量

Server方面

对组件使用Gzip压缩

Cookie方面
减小cookie大小

css方面
将样式表放到页面顶部
Lazy Load Images

Javascript方面
将脚本放到页面底部
将javascript和css从外部引入
压缩javascript和css
删除不需要的脚本
减少DOM操作，避免回流或者事件委托
减少闭包使用

图片方面
优化图片：根据实际颜色需要选择色深、压缩
优化css精灵
不要在HTML中拉伸图片

你都做过哪些 Vue 的性能优化

这里只列举针对 Vue 的性能优化 整个项目的性能优化是一个大工程 可以另写一篇性能优化的文章 哈哈

对象层级不要过深，否则性能就会差
不需要响应式的数据不要放到 data 中（可以用 Object.freeze() 冻结数据）
v-if 和 v-show 区分使用场景
computed 和 watch 区分使用场景
v-for 遍历必须加 key，key 最好是 id 值，且避免同时使用 v-if
大数据列表和表格性能优化-虚拟列表/虚拟表格
防止内部泄漏，组件销毁后把全局变量和事件销毁
图片懒加载
路由懒加载
第三方插件的按需引入
适当采用 keep-alive 缓存组件
防抖、节流运用
服务端渲染 SSR or 预渲染

作者：Big shark@LX
链接：https://juejin.cn/post/6961222829979697165
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。



’

20、ajax、axios区别

jQuery ajax

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

优缺点：

本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

axios

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

优缺点：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止CSRF/XSRF

’

21、三次握手和四次握手

三次握手

客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
客户端发送ACK=Y+1， Seq=Z

四次握手

主动方发送Fin=1， Ack=Z， Seq= X报文
被动方发送ACK=X+1， Seq=Z报文
被动方发送Fin=1， ACK=X， Seq=Y报文
主动方发送ACK=Y， Seq=X报文



’

22、伪类和伪元素

伪类 ：

意义 ：是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息
功能 ：1.格式化DOM树以外的信息。比如：<a> 标签的:link、:visited 等。这些信息不存在于DOM树中。
2.不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。

伪元素：

意义 ：伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用 ::before 或 ::after。

区别：

伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息，而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。-

’

23、重绘和回流（重排）是什么，如何避免？

回流（重排）：

DOM的变化影响到了元素的几何属性（宽高）,浏览器重新计算元素的几何属性，其他元素的几何
属性和位置也会受到影响，浏览器需要重新构造渲染树

重绘：

浏览器将受到影响的部分
重新绘制到屏幕上的过程称为重绘

减少重绘和重排的方法：

不在布局信息改变时做DOM查询
使用cssText或者className一次性改变属性
使用fragment
对于多次重排的元素，如动画，使用绝对定位脱离文档流，让他的改变不影响到其他元素

’

24 左侧固定宽度，右侧自适应

方法1：左侧固定宽度，且设置成浮动：float: left，右侧div宽度会自拉升适应
方法2：左侧固定宽度，右侧绝对定位，设置left：左侧的宽度，top:0；right:0
方法3：将左侧div进行绝对定位，然后右侧div设置margin-left: 左侧宽度
方法4：flex布局

’

26、闭包

闭包 就是能够读取其他函数内部变量的函数
创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域
闭包的特性：
函数内再嵌套函数
内部函数可以引用外层的参数和变量
参数和变量不会被垃圾回收机制回收

27、Vue子组件调用父组件的方法

1、在子组件中通过this.$parent.event来调用父组件的方法
2、在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了
3、父组件把方法传入子组件中，在子组件里直接调用这个方法

28、ajax同步和异步区别

异步处理呢就是我们通过事件触发到 ajax，请求服务器，在这个期间无论服务器有没有响应，客户端的其他代码一样可以运行。

同步处理：我们通过实践触发 ajax，请求服务器，在这个期间等待服务器处理请求， 在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。

29、hash模式和history的区别

hash

1、location.hash 的值实际就是 URL 中#后面的东西 它的特点在于：hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面，仅hash符号之前的内容会被包含在请求中，如http://www.abc.com,因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误。
2、可以为 hash 的改变添加监听事件 window.addEventListener(“hashchange”, funcRef, false);
3、每一次改变 hash（window.location.hash），都会在浏览器的访问历史中增加一个记录利用 hash 的以上特点，就可以来实现前端路由“更新视图但不重新请求页面”的功能了
特点：兼容性好但是不美观

history

前端的URL必须和实际向后端发起请求的URL一致。如htttp://www.abc.com/book/id。如果后端缺少对/book/id 的路由处理，将返回404错误
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。
这两个方法应用于浏览器的历史记录站，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。这两个方法有个共同的特点：当调用他们修改浏览器历史记录栈后，虽然当前 URL 改变了，但浏览器不会刷新页面，这就为单页应用前端路由“更新视图但不重新请求页面”提供了基础。

特点：虽然美观，但是刷新会出现 404 需要后端进行配置

30、基于Vue的SPA如何优化页面加载速度

减小入口文件体积

静态资源本地缓存
HTTP缓存
Service Worker离线缓存

开启GZip压缩

使用SSR（服务端渲染）

31、Vue中的scoped及穿透方法（修改第三方组件局部的样式）

在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

scoped看起来很美，但是，在很多项目中，会出现这么一种情况，即：引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式，穿透scoped。

<style scoped>
    外层 >>> 第三方组件 {
        样式
    }
</style>

通过 >>> 可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值。

32 前端解决跨域

1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

33、http请求头有哪些字段

Accept：浏览器可接受的MIME类型。
Accept-Charset：浏览器可接受的字符集。
Accept-Encoding：浏览器能够进行解码的数据编码方式，比如gzip。
Accept-Language：浏览器所希望的语言种类，当服务器能够提供一种以上的语言版本时要用到。
Authorization：授权信息，通常出现在对服务器发送的WWW-Authenticate头的应答中。
Connection：表示是否需要持久连接。如果Servlet看到这里的值为“Keep-Alive”，或者看到请求使用的是HTTP 1.1（HTTP 1.1默认进行持久连接），它就可以利用持久连接的优点，当页面包含多个元素时（例如Applet，图片），显著地减少下载所需要的时间。要实现这一点，Servlet需要在应答中发送一个Content-Length头，最简单的实现方法是：先把内容写入ByteArrayOutputStream，然后在正式写出内容之前计算它的大小。
Content-Length：表示请求消息正文的长度。
Cookie：设置cookie,这是最重要的请求头信息之一
From：请求发送者的email地址，由一些特殊的Web客户程序使用，浏览器不会用到它。
Host：初始URL中的主机和端口。
If-Modified-Since：只有当所请求的内容在指定的日期之后又经过修改才返回它，否则返回304“Not Modified”应答。
Pragma：指定“no-cache”值表示服务器必须返回一个刷新后的文档，即使它是代理服务器而且已经有了页面的本地拷贝。
Referer：包含一个URL，用户从该URL代表的页面出发访问当前请求的页面。
User-Agent：浏览器类型，如果Servlet返回的内容与浏览器类型有关则该值非常有用。
UA-Pixels，UA-Color，UA-OS，UA-CPU：由某些版本的IE浏览器所发送的非标准的请求头，表示屏幕大小、颜色深度、操作系统和CPU

34、webpack作用

总结来说：用这个工具，帮助我们将不同的资源和文件，进行打包，也就是合并在一个文件里面。 但是不仅仅如此，它还附加了一些更好用的功能。
附加功能：
进行重新加载编译。实际就是将浏览器不认识的语法编译成浏览器认识的语法。比如less
编译成css，ES6 语法 转成 ES5等等。
减少io请求

35、less

less作为一门CSS扩展语言，也就是说CSS预处理器。（Leaner Style Sheets）简称less，它只不过是为css新增这些的功能，比如说：变量、函数、作用域等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本，根据按这样的话，那么less可以让我们写更少的代码做更多的事情

36、Vue父子组件生命周期执行顺序

加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程
　　父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程
　　父beforeUpdate->父updated

销毁过程
　　父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

37、axios拦截器

在请求或响应被 then 或 catch 处理前拦截它们。
拦截器分为请求拦截器和响应拦截器

请求拦截器（interceptors.requst）是指可以拦截每次或指定HTTP请求，并可修改配置项。

响应拦截器（interceptors.response）可以在每次HTTP请求后拦截住每次或指定HTTP请求，并可修改返回结果项。

38.浅拷贝与深拷贝

浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

39.面向对象

面向对象的思想主要是以对象为主，将一个问题抽象出具体的对象，并且将抽象出来的对象和对象的属性和方法封装成一个类。
面向对象有三大特性，封装、继承和多态

40.Vue 组件通讯有哪几种方式

props 和$emit父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit 触发事件来做到的

$parent,$children 获取当前组件的父组件和当前组件的子组件

$attrs和$listeners A->B->C。Vue 2.4 开始提供了$attrs和$listeners 来解决这个问题

父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。(官方不推荐在实际业务中使用，但是写组件库时很常用)

$refs 获取组件实例

envetBus 兄弟组件数据传递 这种情况下可以使用事件总线的方式

vuex 状态管理

41、nextTick()作用

vue响应式的改变一个值以后，此时的dom并不会立即更新，如果需要在数据改变以后立即通过dom做一些操作，可以使用$nextTick获得更新后的dom。

nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。主要思路就是采用微任务优先的方式调用异步方法去执行 nextTick 包装的方法
参考：添加链接描述

vuex 状态管理

42、echarts 数据量过大

sampling