一到三年经验前端面试题总结——看完这些月薪过万没问题（持续更新中）

Posted 2021-06-20 十九万里

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一到三年经验前端面试题总结——看完这些月薪过万没问题（持续更新中）相关的知识，希望对你有一定的参考价值。

前言：

以下是根据自己复习的资料和面试遇到的问题整理出来的，后面逐渐更新，复习用！！希望大家都能找到满意的工作
我自己的技术栈是vue加小程序，所以react这方面写的少
因为是面试题总结，我就不详细的写知识点，只写最简洁的话术，面试能直接回答上来的

一、思想

1、说一下你是怎么学习前端的？

这里每个人都不一样，自行回答就ok

二、html css html5和css3阶段

1、说一下三栏布局，两边固定，中间自适应，五种

1浮动
2定位
3flex
4圣杯布局
5双飞翼布局
css三栏布局两边固定中间自适应的五种方式

2、BFC

块级格式化上下文：
是一个独立的区域，渲染规则和外部无关
BFC产生的方法：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

3、html语义化是怎么理解的

元素本身包含了一些标签内所包含的内容类型的一些信息，浏览器或开发者能从标签知道其语义。
优点:内容呈现结构化，方便程序员进行阅读和维护，有利于浏览器的SEO

4、说一下flex

flex布局就是弹性布局，用来为盒子提供最大的灵活性，基于传统的盒子模型，依赖display属性+position属性+float属性，用起来比较方便

5、说一下rem em vw vh

px代表物理屏幕上能显示出的最小的一个点,
em 是相对于父级的字体大小,
rem是相对于HTML根元素的字体大小,
vh 和vw相对于视口的高度和宽度,1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度

6、translate transform、 transition animation

transition（过渡）
transform（变换）
animation（动画）
translate:(移动)

参考链接：
transition、transform、animation三个属性的使用与区别详解

7、css阻塞怎么办

1、使用CDN
2、对css进行压缩
3、合理使用缓存
4、减少http请求树
参考链接：
CSS加载阻塞的问题

8、介绍一下你认识的盒子模型

盒子简单来说就是用来装页面上的元素的矩形区域，CSS盒模型包括IE盒模型和标准的W3C盒模型
box-sizing有三个值：他们的主要区别是width包含的范围不一样
border-box：IE盒模型{怪异模式} width包含border和padding
padding-box：width包含padding+context+width
content-box：width包含content

9、类选择器的解析顺序，从左到右还是从右到左

从右到左
原因是遍历的时候能提高性能
参考链接：
CSS选择器从右向左的匹配规则

10、行内元素和块级元素的区别

块级元素独占一行，可以设置宽高，水平方向margin和padding设置有效，垂直方向无效，可以包含行内元素和块级元素

行内元素不独占一行，宽高设置无效，margin上下无效，padding上下无效，行内元素无法嵌套其他行内元素或者块元素
HTML行内元素和块级元素（面试必考题）

11 、根节点的字体大小是怎么确定的

JS根据设备宽度设置根节点（html）font-size字体大小
参考链接：
JS根据设备宽度设置根节点（html）font-size字体大小

12、几种隐藏方式及其不同点

7种方式：
1、display：none
2、visibility：hidden
3、opacity=0 透明度设置为0
4、position：absolute脱离文档流之后设置一个很大的负值
5、transform：scale（0），把一个元素色红孩子成为无限小，位置还在，看不见
6.HTML5 hidden attribute ，与display：none相同
7、height：0，overflow：hidden ，把元素在垂直方向上收缩为0，元素消失
8.filter：blur（0），把一个元素的模糊度设置为0，看不见了

不同点：
1、visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。性能更好一点。不会回流
2、display: none----将元素的显示设为无，即在网页中不占任何的位置。

13、css动画比js动画的优势是什么

css动画优点：
1、浏览器可以对动画进行优化
3、强制使用硬件加速
缺点：
1.对动画的控制比较弱，没有回调函数
2、想实现复杂的动画代码比较长

js动画优点：
1、对动画控制能力很强
2、动画效果比css3更丰富
3、css3有兼容性问题，js没有
缺点：代码复杂度高于css3
js在浏览器的主线程中运行，可能丢帧

14. css预处理器

知道的有三种：
sass
less
stylus
使用less，在vue-cli中安装less的依赖可以嵌套选择器混合声明继承属性
参考链接

15、清除浮动的几种方式

1.在浮动元素末尾加一个空标签加clear：both属性
2.父元素添加overflow属性触发BFC
3.使用after伪元素清除浮动
4.使用before和after双伪元素清除浮动
参考链接：
详解css浮动

16、为什么css放到前面 js放到后面

这里涉及到的知识点是dom渲染
css放头部时 css的下载解析和html是同步进行的，如果放到尾部需要花费额外的时间来解析，加载出来的先试一个html页面，这样比较丑
js放在脚部是因为浏览器遇到js代码的时候，会立即下载执行，就会中断html的解析，如果js脚本过大会造成页面假死，阻塞
参考链接

17、mate标签

mate标签是一个html头部的辅助性标签可以定义页面编码语言UTF-8 搜索引擎悠哈自动刷新页面控制页面缓存，响应式窗口等等
mate常见属性

18、 img标签中alt和title的区别

alt是局部属性，用在图片加载失败时的替代文本
title是全局属性，提供额外的信息，鼠标滑到该元素是，显示定义的提示

19、css重置的原因

css重置就是重置浏览器的css默认属性
因为浏览器的品种很多，每个浏览器的默认样式不一样，比如a链接的下划线 li的前置圆点，我们在开发的时候是不需要的，元素的内边距和外边距边框等等因此需要重置
一般开发之间会引入一个reset全局重置样式表进行重置css样式：
css重置样式表

20、css3新特性

图片优化方法
21、link和import的区别

1、link是xhtml标签，无兼容性问题，@import是css2.1提出的，低版本浏览器不支持，只有ie5以上才支持
2、link能加载css javascript @import只能加载css
3、link链接的内容是和html页面同步加载的，@import需要等到页面全部加载完成之后才能加载。
link和import区别

22、canvas是什么

canvas是html5新增的一个可以使用js在其中绘制图像的html元素简单来说就是一个画布
基本概念有坐标绘图基本图形，线条路径圆形弧等等

23.css做圆形、做三角形

画一个圆
border-radus：50%

画一个三角形：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        /* css3绘制三角形 */
        .triangle{
            width: 0px;                           /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
            height: 0px;
            border-bottom: 200px solid #00a3af;
            border-left: 200px solid transparent;    /*transparent 表示透明*/
            border-right: 200px solid transparent;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

三角形原理：
css画三角形

24、垂直居中的方法：

1、margin：auto
2、margin负值，设为宽度和高度的一半
3、display：table-cell（未脱离文档流）
4、display：flex
align-items:center
justfy-content:center

三、js JQuery

1、 js基本数据类型和基本数据类型的区别

基本数据类型：7种
string
Number
null
underfined
Boolean
object（引用型。包括object array function）
symbol（ES6中新增独一无二不会重复的）

2、 js数据类型的检测和装换
检测：四种方式：

typeof
typeof是一元运算符，返回一个字符串类型，用来判断变量是否为空或者其类型
注：typeof不能判断null和object。其他都可以正确返回
instanceof 用来检测一个对象原型链上是否存在prototype属性
constructor判断引用类型
object.prototype.toString.call() 最准确的方式可以检测出所有类型
参考链接

1、转化成为number两种方法：
number：v8底层引擎机制的转化规则
parseFloat parseInt 额外的方法

2.转化成为字符串：
tostring方法（）就是之前是什么样子在外层包一层引号

3、转化成布尔值：
‘ ’ underfined NaN null false 0这六个转化成为false 其他为true
参考链接：
javascript中类型转换

3、实现instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
所以实现instanceof的思路就是判断右边变量的原型是否存在于左边变量的原型链上。

function instanceOf(left, right) {
    let leftValue = left.__proto__;
    let rightValue = right.prototype;
    while (true) {
        if (leftValue === null) {
            return false;
        }
        if (leftValue === rightValue) {
          return true;
        }
    leftValue = leftValue.__proto__;
   }
}

4、什么是原型链

原型模式是js实现继承的一种形式所有的函数都有一个prototype属性，通过new生成一个对象时，prototype会被实例化为对象的属性
所有的引用类型都有一个-prototype-指向其构造函数的prototype，
原型链指的是当访问一个引用类型时，如果本身没有这个属性，或方法，就会通过-prototype-属性在父级原型中找，一直找到最顶层为止。原型链的最顶层是object object的-protot属性指向null
原文链接：https://blog.csdn.net/weixin_44865458/article/details/117299651
参考链接

5、判断原型链

1.getPrototypeOf，用于查找原型链的直接父原型
2.isPrototypeOf，能对原型链上的所有对象进行判断
原型链(一)：辨别原型链的两种方法

6、relpace说一下用法

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
replace方法的语法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp可以是正则表达式对象(RegExp)也可以是字符串(string)，replaceText是替代查找到的字符串
参考链接

7、ca的生成

CA证书，CA机构发行的一种电子文档，是一串能够表明网络用户身份信息的数字，提供了一种在计算机网络上验证网络用户身份的方式
生成：这道题我也不会
CA证书的生成过程

8、数组扁平化五种

数组扁平化是指将一个多维数组变为一维数组
几种办法的核心都是遍历数组添加到一个新的数组里面5种
1、reduce
2. toString & split
3. join & split
4. 递归
5. 扩展运算符
参考链接

9、 on绑定和addEventLisener的区别

on绑定是传统的，唯一性后面注册的会覆盖前面的事件
addEventLister：w3c标准的事件监听，多次复用同一个事件，函数添加多个事件
ie9之前使用attachEvent代替
参考链接

10、正则表达式字符串去重
参考链接

11、手写数组扁平化
参考链接

12、回流与重绘

回流：render树中元素的规模尺寸，布局，隐藏改变需重新构建，称为回流，每个页面至少一次回流，就是在页面第一次加载的时候。
重绘：回流时，浏览器会使渲染树中受影响的部分失效，重新构造这部分渲染树，完成回流，浏览器会重新绘制受影响的部分到屏幕上，改过程为重绘。

13、什么时候会发生回流与重绘

回流何时发生：
（1）添加或删除可见的dom元素；
（2）元素位置改变；
（3）元素尺寸改变–边距，填充，边框，高度和宽度；
（4）内容改变–文本或图片大小改变引起浏览器重新计算高度或宽度变化；
（5）页面渲染初始化；
（6）浏览器窗口尺寸改变。
重绘何时发生：
元素的属性或央视发生改变如：背景颜色，字体颜色。
减少回流和重绘：
（1）添加css样式，而不是利用js操作dom控制样式；
（2）多次回流变为一次

14.说一下闭包内存泄漏

闭包就是函数a里套一个函数b 函数b能访问函数a里的内容
闭包的特性：
函数内在嵌套函数
2、内部函数可以引用外层的参数和变量
3、参数和变量不会被垃圾回收机制回收
详细链接

内存泄漏是指由于疏忽或错误造成程序未能释放已经不在使用的内存
内存泄漏并非指内存存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该内存之前就失去了对该内存的控制，
详细链接：

15、垃圾回收机制

前端垃圾内存回收称之为GC
内存泄漏也是发生在这一步，js的内存回收机制，虽然能回收大部分的垃圾内存，但是还是存在无法回收的情况，需要手动清理
两种方法：
1、引用技术垃圾回收机制
2、标记清除法
详细链接

16、模块化

模块化的工程意义首先在于分治的思想，对功能进行分治，有利于我们的维护；其次是复用，有利于我们的开发。
将一个大问题分解成多个较为独立的与原问题性质相同的小问题，将所有的小问题的解答组合起来即可得到大问题的答案。
CommonJS
CMD (Common Module Definition，通用模块定义)
参考链接

17、generator

generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。
参考链接
 参考链接2

18、为什么0.1+0.2!=0.3

精度缺失造成的
在0.1 + 0.2这个式子中，0.1和0.2都是近似表示的，在他们相加的时候，两个近似值进行了计算，导致最后得到的值是0.30000000000000004，此时对于JS来说，其不够近似于0.3，于是就出现了0.1 + 0.2 != 0.3 这个现象。当然，也并非所有的近似值相加都得不到正确的结果。
解决办法：
将浮点数转化成整数计算。因为整数都是可以精确表示的。

19.jq和vue你在用的时候有什么区别

1.从jquery到vue的转变是一个思想想的转变，就是将原有的直接操作dom的思想转变到操作数据上去。
2.传统前端开发模式中是以jq为核心的，而vue是现在一个兴起的前端js库，是一个精简的MVVM。
3.jQuery是使用选择器（ $）选取 D O M 对象，对其进行赋值、取值、事件绑定等操作，他和原生的 H T M L 的区别只在于可以更方便的选取和操作 D O M 对象，而数据和界面是在一起的。比如需要获取 l a b e l 标签的内容：$ (“lable”).val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的
4.vue适用的场景：复杂数据操作的后台页面，表单填写页面
jquery适用的场景：一些html5的动画页面，一些需要js来操作页面样式的页面

20、深拷贝和浅拷贝

浅拷贝：内存地址的复制，让目标对象指针和源对象指向同一片内存空间，注意的是当内存销毁的时候，指向对象的指针必须重新定义，才能够使用
深拷贝：拷贝对象的具体内容，内存地址是自主分配的，拷贝结束后两个对象虽然值应用，但是内存地址不一样，两个对象互不干涉

21、写一个深拷贝

function  deepclone(obj) {
	if (typeof  obj  !==  'object') return  obj;//不是一个对象是普通类型的值，直接返回
	if (obj  ==  null) return  null;//是null，就返回null
	if (obj  instanceof  Date) return  new  Date(obj);//是一个日期对象，就返回日期对象
	if (obj  instanceof  RegExp) return  new  RegExp(obj);//是正则对象，就返回正则对象
	let  o  =  new  obj.constructor();
	for (let  key  in  obj) {
		o[key] =  typeof  obj[key] ===  'object'  ?  deepclone(obj[key]) :  obj[key];
//新克隆数组的o的key的值和需要克隆对象obj的key的值相对应，如果obj[key]的内容还是一个对象
//就继续递归调用克隆方法，否则就可以直接返回。
	}
	return  o;
}
let  o  = { a: { a:  1 } }
let  c  =  deepclone(o);
o.a.a  =  2;
console.log(o, c)

22、说一下事件捕获。冒泡怎么判断事件是捕获阶段还是冒泡阶段

判断：
onclick和attachEvent只能得到冒泡阶段
addEventLister 第三个参数默认是false为冒泡 true为捕获

23、事件代理（事件委托）

事件委托（eventdelegation）事件委托又叫事件代理，是javascript中事件常用的技巧
事件委托就是把原本需要绑定的事件委托给父元素，让父元素负责事件监听，事件代理的原理是DOM元素的事件冒泡，使用事件代理的好处是提高性能
优点：减少事件数量，提高性能，避免内存外泄，在低版本的ie中防止删除元素而没有设置移除事件容易造成内存溢出
javascript事件（零基础详解）

24、柯里化

柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术
优点：
1、参数复用
2、提前确认
3、延迟运行
参考链接

25、this指向改变方式

1、对象调用this，调用那个对象this指向那个对象
2、没有定义就直接调用this函数，this指向全局作用域
3、通过new的方式调用时，this永远指向new的新对象。
4、箭头函数中的this，this指向定义函数的继承上下文
三种改变方式：
call apply bind

26、call apply bind的区别

共同点：
三者都能改变this指向，且第一个传递的参数都是this指向的对象，都是采用后续传参的形式
不同点：
call的传参是单个传递的，而apply传递的是数组，bind没有规定，单的参数和数组都可以。
call和apply的函数都是直接执行的，而bind函数会返回一个函数，调用的时候才会执行。

27、new的过程

以构造函数.prototype为原型创建空对象，将构造函数的this绑定到建立的空对象并执行，结果是引用数据类型则返回结果否则返回创建的对象
1、创建一个对象
2、将这个空对象-proto——指向构造函数的prototype
3.将构造函数的后天指向这个对象
4.执行构造函数中的代码

28、事件循环机制

主线程要从任务队列中去实践，执行事件，执行完毕，再取事件，再执行事件…这样不断取事件，执行事件的循环机制就叫做事件循环机制
专业术语：
JS引擎常驻于内存中，等待宿主将JS代码或函数传递给它。
也就是等待宿主环境分配宏观任务，反复等待 - 执行即为事件循环。

深入理解JavaScript事件循环机制
 事件循环机制

29、宏任务和微任务

宏任务是由宿主发起的，而微任务由JavaScript自身发起。

微任务和宏任务到底是什么

30、js执行代码的顺序

在一个JavaScript文件或一个JavaScript代码块的内部，浏览器会先对代码进行预处理（编译），然后再执行。
完成预处理之后，JavaScript代码会从上到下按顺序执行逻辑操作和函数的调用。
参考链接

31、对象继承的方法

原型继承
组合继承
寄生组合继承
es6的extend继承

常见的四种继承方式

四、 ES6,7，8，9，10

1、什么是变量提升

所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）
因为js工作方式是先解析代码，在一行一行的执行，在解析这个过程中就把变量声明提升到头部了
参考链接

2、promise是什么及兼容性

promise是异步编程的一种解决方案，比传统的回调函数和事件更强大和合理，所谓promise，简单来说就会一个容器，里面保存着某个未来才会结束的事情。通常是一个异步操作，从语法上来说，promise是一个对象，从它可以获取异步操作的信息主要解决js的回调地狱问题
兼容性：
IE内核是不支持Promise
可以使用第三方插件bluebird中对ES6的原生Promise进行了封装，解决了浏览器兼容性问题

3、 promise的几种状态

pending（进行中）
fulfiled（已成功）
rejected（已失败）

4、 async和await

async和await我在项目中是用来简化promise对象的，可以直接解析后放回promise的data对象，方便渲染是 Generator 函数的语法糖。，优势在于处理 then 的调用链，能够更清晰准确的写出代码
async和await
理解 JavaScript 的 async/await

5、说一下var let和const的区别

1var声明变量存在变量提升，let和const不存在变量提升
2、let、const都是块级局部变量
3、同一作用域下let和const不能声明同名变量，而var可以
4.var是挂载在windows上的，let和const不是。所以window能访问var定义的变量而不能访问let、const定义的变量
5、.const一旦声明必须赋值,不能使用null占位；声明后不能再修改；如果声明的是复合类型数据，可以修改其属性

6、说一下symbol

ES6种引入的一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。
ES6 Symbol
Symbol是什么

7、es6有哪些新特性

挺多，一共11种：
1、let&const
2、解构赋值
3、模板字符串
4、简化对象
5、箭头函数
6、允许函数的默认值设置参数
7、symbol 独一无二的值
8、迭代器
9、生成器
10、promise
11、 set集合
12、Map
ES6 7 8 9 10新特性总结

8、axios的底层了解过吗

说实话没有了解过——面试官就跟你说拜拜了
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
底层：
createInstance底层根据默认设置新建一个Axios对象， axios中所有的请求[axios, axios.get, axios.
post等…]内部调用的都是Axios.prototype.request,将Axios.prototype.request的内部this绑定到新建的
Axios对象上,从而形成一个axios实例。新建一个Axios对象时，会有两个拦截器，request拦截器，response拦
截器。

8、axios的特点是什么

一、Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API
二、它可以拦截请求和响应
三、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
四、安全性更高，客户端支持防御 XSRF

9、axios有哪些常用方法？

一、axios.get(url[, config]) //get请求用于列表和信息查询
二、axios.delete(url[, config]) //删除
三、axios.post(url[, data[, config]]) //post请求用于信息的添加
四、axios.put(url[, data[, config]]) //更新操作

10.说下你了解的axios相关配置属性？
axios相关配置属性

11、fetch了解吗

fetch api是基于promise的设计，它是为了取代传统xhr的不合理的写法而生的。
fetch是用来取代传统的XMLHttpRequest的。它的优点很多，包括链式调用的语法、返回promise等。
Fetch的理解和使用

Fetch()方法介绍

12、说一下map和set

Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构
集合，是由一堆无序的、相关联的，且不重复的内存结构【数学中称为元素】组成的组合
字典（dictionary）是一些元素的集合。每个元素有一个称作key 的域，不同元素的key 各不相同
共同点：集合、字典都可以存储不重复的值
不同点：集合是以[值，值]的形式存储元素，字典是以[键，值]的形式存储
Map和Set两种数据结构在ES6的作用
 Map和Set

13、什么是箭头函数，和普通函数的区别

箭头函数没有原型属性
箭头函数是匿名函数，不能作为构造函数，不能使用new
箭头函数不能当做Generator函数,不能使用yield关键字
箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。
箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
箭头函数不绑定arguments，取而代之用rest参数…解决

这篇文章写了10个区别，nb
箭头函数与普通函数的区别

14、说一下CommonJS和ES模块化的区别
在这里插入图片描述

五、网络基础

1、说一下http

HTTP是超文本传输协议，是互联网应用最广泛的一种网络协议，所有的www文件都必须遵守这个标准
http特性，HTTP是无连接无状态的，HTTP一般构建于TCP/IP协议之上，默认端口是80，HTTP可以分为请求和响应，HTTP定义了在服务器上交互的不同方式，最常用的方式有四种 GET PUT POST DELECT
http响应包含一个状态码，用来表示服务器对客户端响应的结果
缺点：
通信使用明文（不加密），内容可能被窃听。
不验证通信方的身份，因此可能遭遇伪装
无法证明报文的完整性，所以可能已经被篡改

2、http2.0特性：

***多路复用：****一个域只需要一个TCP链接，同一个链接并发处理多个请求，而且并发请求数量比http1.0大了几个量级
二进制分帧：在应用层和传输层之间增加二进制分帧层自动将header和body部分区分开，在不改变http1.x的语义，语法，状态码的情况下改进传输性能
头部压缩 ：http2考虑头部信息变化并不频繁，所以在server端做了一个缓存，
服务端推送 ：服务器对客户端的一个请求发送多个响应，服务器中推送可以缓存，并且在遵循同源情况下不同页面可以共享缓存

4. http的建立过程

1浏览器分析链接的URL
2系统查找HOSTS文件，有则根据文件内容获取服务器ip，转到第5步
3 浏览器向DNS请求解析该URL的ip
4 域名系统DNS解析出该URL的ip地址为xxx
5浏览器与服务器建立TCP连接（服务器ip地址是xxx，端口是80）
6浏览器发出取文件命令
7 服务器给出响应，把文件发送给浏览器
8 释放TCP连接
9 浏览器显示文本

5、http1.1和http1.2的区别

6、http1.1中的keep-alive与http2.0重点额多路复用有什么区别
7、 http怎么转化成为https

HTTP+加密+认证+完整性保护 = HTTPS
【HTTP】HTTP如何变成HTTPS

9、https可以预防哪种攻击
10、说一下xss和csrf是什么区别

xss 跨站脚本攻击：
用户A提交了正常内容，这个内容正常显示在B的页面上，没有问题；
恶意用户C提交了恶意内容，这个内容也显示在B的页面上，但却能对B的页面肆意篡改
csrf：即跨站请求伪造；
攻击者构造网站后台某个功能接口的请求地址，诱导用户点击或者使用一些特殊的方法使这些请求自动加载；
那么用户在登录状态下的话，这些请求被服务器接收到就会误认为是用户自己合法的操作；
对于GET形式的接口会很容易被击破，POST形式的接口也不是百分百安全，攻击者他可以去诱导用户进入一个有form表单用post提交参数的页面；
xss和csrf分别是什

11、 csrf有哪些改进方式

预防措施（采用anti-csrf-token方案）
服务器端收到路由请求时，生成一个随机数，在渲染请求页面时把这个随机数埋入页面（一般是埋入form表单内，）;
服务端设置setCookie，把该随机数作为cookie或session种入用户浏览器；
用户在发送get或post请求时要带上_csrf_token参数（对于form表单直接提交即可，因为表单会把所有的input值提交给后台，包括_csrf_token）；
服务端收到请求后解析请求的cookie获取_csrf_token的值，与用户请求提交的_csrf_token参数作对比，相等则代表请求时合法的；

12、说一下https

https是以安全为目标的HTTP通道，简单讲是HTTP的安全版
HTTPS主要由有两部分组成：HTTP + SSL / TLS，也就是在HTTP上又加了一层处理加密信息的模块。服务端和客户端的信息传输都会通过TLS进行加密，所以传输的数据都是加密后的数据

13、说一下http状态码
14、说一下304
15、dns

dns是一个域名系统，是万维网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串
简单来说：
DNS就是域名服务器，他的任务就是确定域名的解析。
我们输入网站，而后DNS帮忙把我们输入的网站转换成IP，ping一个网站，出来的就是IP。当出来这个IP的时候，DNS就已经完成它的工作了。
DNS（域名解析协议）详解

15、 osi七层模型

应用层
表示层
会话层
传输层
网络层
数据链路层
物理层
图解七层网络模型

16.常用的端口号
常用的端口号大全

17、http的请求头有哪些

HTTP的头信息包括通用头、请求头、响应头和实体头四个部分。每个头域由一个域名，冒号（:）和域值三部分组成。
通用头标
请求头标
相应头标
实体头标

18、get和post区别

get产生一个tcp数据包，post产生两个数据包
get方式请求浏览器会把http header和data一并发送出去，服务器响应200 ok
post方式请求浏览器先发送header，服务器响应100 continue浏览器在发送date 服务器响应200（返回数据），火狐只发送一次

19 说一下对称加密和非对称加密

在对称加密算法中，加密和解密使用的是同一把钥匙，即：使用相同的密匙对同一密码进行加密和解密；
非对称加密有两个钥匙，公钥和私钥（公钥和私钥是成对的存在，如果对原文使用公钥加密，使用对应的私钥才能解密；因为加密和解密使用的不是同一把密钥，所以这种算法称之为非对称加密算法

对称加密和非对称加密的优缺点：

对称加密：
优点：算法简单，加密解密容易，效率高，执行快。
缺点：相对来说不算特别安全，只有一把钥匙，密文如果被拦截，且密钥也被劫持，那么，信息很容易被破译。
非对称加密：
优点：安全，即使密文被拦截、公钥被获取，但是无法获取到私钥，也就无法破译密文。作为接收方，务必要保管好自己的密钥。
缺点：加密算法及其复杂，安全性依赖算法与密钥，而且加密和解密效率很低。

20、说一下三次握手和四次挥手

1、客户端先发起第一次握手，向服务器示好，询问是否可以传数据
2、服务器收到后表示可以接受数据，则向客户端发起第二次数据，由于TCP//IP是全双工的，服务端的这次握手也是可以询问客户端是否能够接受返回的数据
3、客户端接受到后，发起第三次握手告诉服务器，可以接受返回的数据（链接ok了）

TCP/IP四次挥手协议
tcp/ip是全双工的，每个方向都必须得到进行关闭，有一方完成他的数据发送任务就能发送一个FIN来中止这个方向的链接
比如客户端就能发送一个FIN来告诉服务器，没有数据传输了，这是第一次挥手，服务器收到后返回一个ACK告诉客户端，好的，我知道了这是第二次挥手，客户端收到确认后就可以关闭往服务器端的数据通道了，这个时候服务器端仍然可以往客户端继续发送数据，带服务器端没有数据需要发送给客户端时，也发送一个FIN到客户端，告诉他我也没有数据发送给你了，这是第三次挥手，客户端得知了之后返回一个ACK告诉服务端，好的，收到了，服务端也及可以安心关闭客户端的数据通道了，这是第四次挥手，自此双向的传输通道就关闭了，

21、三次握手和四次握手怎么辨别身份的

22、四次挥手客户端和服务端关闭的时间

客服端在第二次挥手的时候关闭服务端在第四次挥手的时候关闭，原理看上面20题的解析

23、服务器到客户端传过来的是私钥还是公钥

24、cdn是什么。主要解决什么问题 cdn的应用场景有哪些 cdn的高层次应用

cdn中文叫内容分发网络
可以解决分布共享库的问题。CDN就是一个由服务器构成的网络，这个网络的用途就是分散存储一些公共的内容。CDN中的每台服务器都包含库的一份副本，这些服务器分布在世界上不同的国家和地区，以便达到利用带宽和加快下载的目的。浏览器访问库的时候使用一个公共的URL，而CDN的底层则通过地理位置最近、速度最快的服务器提供相应的文件，从而解决了整个系统中的瓶颈问题。

cdn运用场景：
网站站点/应用加速
视音频点播/大文件下载分发加速
视频直播加速（内测中）
移动应用加速

25、多个异步请求，怎么保证他们并行处理

前端js使用promise循环多个异步请求并发，并处理其结果
使用 $a x i o s . a l l 方案，首先 a x i o s 其实也是基于 P r o m i s e 进行封装的异步请求，他因为进一层封装所以使用写法会简洁一些，注意它必须要与$ axios.spread搭配使用

26、单线程和多线程

多线程:多线程是指程序中包含多个执行流，即在一个程序中可以同时运行多个不同的线程来执行不同的任务，也就是说允许单个程序创建多个并行执行。
单线程:线程是程序中的一个执行流，每个线程都有自己的专有寄存器(栈指针、程序计数器等)，但代码区是共享的，即不同的线程可以执行同样的函数
单线程与多线程的区别

27、etag的生成策略有哪些
你知道 http 响应头中的 ETag 是如何生成的吗

etag 的生成需要满足几个条件
当文件不会更改时，etag 值保持不变。所以不能单纯使用 inode
便于计算，不会特别耗 CPU。这样子 hash 不是特别合适
便于横向扩展，多个 node 上生成的 etag 值一致。这样子 inode 就排除了

28、线程和进程：

1线程是程序执行的最小单位，而进程是操作系统分配资源的最小单位。
2一个进程由一个或多个线程组成，线程是一个进程中代码的不同执行路线。
3.进程之间相互独立，但同一进程下的各个线程之间共享程序的内存空间。
4.调度和切换：线程上下文切换比进程上下文切换要快得多。
操作系统中的死锁

六、浏览器

1、跨域，解决办法

、服务器配置cors（跨域资源共享），它支持同源通信，也支持跨域通信
2、node.js或nginx。反向代理，把跨域改成同域
3、将json升级jsonp 在json的基础上。利用script标签跨域特性，加上头设置，

以上是关于一到三年经验前端面试题总结——看完这些月薪过万没问题（持续更新中）的主要内容，如果未能解决你的问题，请参考以下文章

如何在二三线城市月薪过万面试100人后的经验总结！看完这篇让你至少涨薪2000

如何在二三线城市月薪过万5年面试的经验，万字吐血总结2021年java面试题

如何在二三线城市月薪过万5年面试的经验，万字吐血总结2021年java面试题

如何在二三线城市月薪过万看完这篇后端简历优化，包你面试不断

大学四年自学编程，月薪过万后总结出来的学习经验！建议收藏，反复阅读～

大学四年自学编程，月薪过万后总结出来的学习经验！建议收藏，反复阅读～