笔触狂放9

这个屌丝很懒，什么也没留下！

热门标签

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

作者：笔触狂放9 | 2024-05-23 06:13:17

踩

前端三年经验面试题

前言：

以下是根据自己复习的资料和面试遇到的问题整理出来的，后面逐渐更新，复习用！！希望大家都能找到满意的工作
我自己的技术栈是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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

三角形原理：
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中新增独一无二不会重复的）
bigInt

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__;
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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标签跨域特性，加上头设置，
对于非让么跨域来说，h5提供了psotMasssge（）方法。可以在父子之间传值

jsonp
cors 前后端设置预检请求多个域名cors配置

nginx反向代理
详细说一下jsonp和cors
jsonp为什么不能用post
封装一个jsonp函数，实现跨域
说一下eatag在发送请求中有什么用
手写jsonp
解决回调地狱可以用什么方式
说一下缓存
强缓存和弱缓存
强缓存的关键字有哪些
url从输入到页面展示。发生了什么事情

寻找强缓存 -> 构建请求 -> DNS解析 -> 建立TCP连接 -> 发送HTTP请求 -> 响应（200/304协商缓存） -> 构建DOM树 -> 构建CSSOM树 -> 声称布局树 -> 建图层树 -> 生成绘制列表 -> 生成图块 -> 显示器显示

history模式和hash模式的比较
三种本地缓存，优缺点区别
cookie缺点
浏览器怎么判断一个css属性是不是兼容的
单页面应用与多页面应用的区别
说一下加载优化
防抖和节流
超市请求怎么办
懒加载

七、ajax webpack

说一下ajax
口述ajax代码
ajax怎么判断请求结果
websocket
webpack是什么构建流程优化
webpack怎么打包分包合包
loader和plugin

八、vue阶段

1、mvc和mvvm

模型(model)－视图(view)－控制器(controller)
Model 模型——View视图——View Model视图模型
mvvm优点：
低耦合可重用性独立开发可测试
MVC和MVVM开发模式及两者区别

2、对vue的认识

vue是一套构建于用户界面的自底向上方增量开发渐进式基于MVVM的框架
核心思想是数据驱动，组件化
数据驱动：视图内容根据数据的改变而改变
组件化：增加代码复用性，可维护性，可测试性，提高开发效率，方便重复使用，体现了高内聚，低耦合。

个人理解：由于vue是基于MVVM思想的双向绑定，可以减少对dom否认频繁操作，直接在数据层和视图层建立一种联系，方便使用通过组件化的方式，增加了代码的可复用性，可维护性提高了我们的开发效率

3、vue生命周期。有哪些钩子函数各个生命周期是干什么的

vue生命周期一共四个阶段：
1、实例创建
2、DOM渲染
3.数据更新
4、销毁实例
主要有8个钩子函数：
1：beforeCreat—创建前
触发的行为：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
在此阶段可以做的事情：加loading事件
2:created——创建后
触发的行为：vue实例的数据对象data有了，el还没有
在此阶段可以做的事情：解决loading，请求ajax数据为mounted渲染做准备
3：beforeMount 渲染前
触发的行为：vue实例的el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换
4：mounted 渲染后
触发的行为：vue实例挂载完成，data.filter成功渲染
在此阶段可以做的事情：配合路由钩子使用
5：beforeUpdate 更新前
触发的行为：data更新时触发
6： updated 更新后
触发的行为：data更新时触发
在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）
7：beforeDestroy 销毁前
触发的行为：组件销毁时触发
在此阶段可以做的事情：可向用户询问是否销毁
8：destroy 销毁后
触发的行为：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在
在此阶段可以做的事情：组件销毁时进行提示

4、说一下vuex

有五种状态，分别是State Getter Mutation Action Module
面试官：请你说一说vuex的五个属性，分别是什么，区别和用途说一下

5、vue各个组件之间的数据传递

父传子利用props

 **父组件代码**
<template>
    <header-box :title-txt="showTitleTxt"></header-box>
</template>
<script>
    import Header from './header'
    export default {
        name: 'index',
        components: {
            'header-box': Header
        },
        data () {
            return {
                showTitleTxt: '首页'
            }
        }
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

**子组件代码**
<template>
    <header>
        {{thisTitleTxt}}
    </header>
</template>
<script>
    export default {
        name: 'header-box',
        props: {
            titleTxt: String
        },
        data () {
            return {
                thisTitleTxt: this.titleTxt
            }
        }
    }
</script>
`
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

子传父

利用o n 和 on和on和emit 即子组件利用一个事件来触发$emit来传递出去一个事件及参数，然后在父组件里绑定这个事件，然后处理这个事件，获取传递的参数
子组件改变父组件传递的props（你会发现通过props可传递复杂类型数据，可以通过子组件改变数据内容，不推荐使用，因为vue是规定props是单向绑定）

创建一个空的vue实例，然后挂载到当前的vue实例的原型上,然后一个组件进行e m i t 传递事件以及需要传递的数据。在另一个组件那里就可以进行使用 emit传递事件以及需要传递的数据。在另一个组件那里就可以进行使用emit传递事件以及需要传递的数据。在另一个组件那里就可以进行使用on来接受这个事件并处理这个传递参数

6、为什么只能用mutation改变数据

7、vue2/0和vue3/0的区别
vue2.0和vue3.0区别

8、vue3.0新特性

9、详细说一下vue2/0的双向绑定，vue3/0是怎么双向绑定的

VUE2.0：
采用数据劫持结合发布者—订阅模式的方法，通过object.defineProperty()来劫持各个属性的seter.getter。在数据变动时发布消息给订阅者，触发相应的监听回调
vue3.0：
vue3利用Proxy API对数据代理实现

vue-router原理

vue-router是专为vue打造的路由管理器，
1.hash模式：默认模式，通过路径中hash值来控制跳转，不存在兼容问题
2、history模式：H5新增historyAPI，相对hash而言，不会显示#号，但需要服务器配置
3.abstract模式：支持jabascript的所有运行环境，常只node.js服务器环境
SPA路由由history模式上线后刷新404
在服务器端增加一个覆盖所有情况的候选资源，如果url匹配不到如何静态资源则应该返回同一个index。html页面，这个页面就是自己APP依赖的页面，以后服务器就不会在返回404错误页

10、写一个vue-routeer
11、vue2.0是怎么监听数组的 vue3.0呢

vue2.0有三种方式
1deep深度监听（不推荐）
2、computed和watch监听计算属性
3watch直接监听对象中的属性
vue2.0监听数组方法

vue3.0中proxy可以监听数组，不用单独对数组进行异性操作，可以检测到数组内部的变化

13、说一下vue与自定义组件之间是怎么双向绑定的
14、父组件和子组件的生命周期关系
15、父子通信，非父子通信

通信组件常用的方式：
props
eventbus
vuex
自定义事件
list item
边界情况
$parent
$children
$root
$refs
provide/inject
非prop特性
$attrs
$listeners

组件通信详解

16、说一下key

主要用在虚拟dom中；key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

17、说一下虚拟dom。vue3/0的虚拟dom

虚拟DOM就是为了解决浏览器性能问题而被设计出来的。以前需要更新多次dom的时候需要每一次都去更新dom 有了虚拟dom之后虚拟dom不会立即擦欧洲哦这个dom，而是把多次更新的diff内容保存到一个对象中，然后再一次性进行操作。大大提高了性能，虚拟dom的好处是，页面更新可以全部反应在js对象（虚拟dom上），更新完成之后在把js对象隐射成为真实的dom去绘制；
vue核心之虚拟DOM(vdom)

vue3.0虚拟dom。静态标记，upadte性能提升1.3_{2倍，ssr提升2}3倍
patch flag 优化静态树
patch flag 优化静态属性
动态绑定属性
patch flag 静态提升
事件侦听器缓存
Vue3 的新特性(三) —— 虚拟DOM的底层原理

18、利用路由跳转到一个页面，有哪些方法

使用router-link
this. $r o u t e r . p u s h () t h i s .$ router.replace()
this.$router.go(n)
路由跳转的三种方式 +跳转至第三方网站+vue跳转新页面(新标签页打来)

19、说一下跳转路由组件是怎么销毁的

20、vue与react的区别你知道的有哪些

相同点：
1.都支持服务端渲染
2.都有virtual DOM 组件化开发通过props参数进行数据的传递都实现了webConponent的规范
3.数据驱动视图
4.都有native的方案，react的react native vue的weex
5.都有状态管理 react有redux vue有自己的vuex

不同点：
1react严格上只针对MVC的view层 vue则是MVVM层
2…virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.
而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
3.组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’;
Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
4.数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
5.state对象在react应用中不可变的,需要使用setState方法更新状态;
在vue中,state对象不是必须的,数据由data属性在vue对象中管理；

21、v-if和v-show的区别

v-if和v-show都能实现元素的显示与隐藏
1、v-show只是简单的控制元素的display属性，v-if是条件渲染（条件为真，则元素被渲染，条件为假，则元素被销毁）
2、v-show有更高的首次渲染开销，v-if的首次渲染开销则小很多
3、v-if有更高的切换开销，v-show则小
4.v-if可以配套v-else v-else-if使用，v-show则没有
5、v-if可以搭配template使用 v-show不行
总结：如果是要多次使用，则使用v-show 如果使用次数交少，推荐使用v-if
减少dom的操作

22、computed与watch区别

computed名称不能与date里对象重复，只能用同步，必须有return 是多个值变化引起一个值变化，是多对一
watch：名称必须和data中的对象引用，可以用于异步，没有return，是一对多，监听一个值，一个值引起多个值的变化

23、keep-live：

keep-alive是一个抽象组件（内置组件）：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件是，会缓存不活动的组件实例，而不是销毁他们
作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载事件及性能消耗，提高用户体验性。

24、vue优化：
vue优化

25、[vue] 在使用计算属性的时，函数名和data数据源中的数据可以同名吗？

不能同名因为不管是计算属性还是data还是props 都会被挂载在vm实例上，因此这三个都不能同名

26、[vue] 怎么给vue定义全局的方法？

1、通过prototype，这个非常方便。Vue.prototype[method]=method;
2、通过插件Vue.use(plugin)；
3、通过mixin，Vue.mixin(mixins);

27.diff算法：

28、在vue中watch和created哪个先执行？为什么？

官网的生命周期图中，init reactivity是晚于beforeCreate但是早于created的。
watch加了immediate，应当同init reactivity周期一同执行，早于created。
而正常的watch，则是mounted周期后触发data changes的周期执行，晚于created。

29、[vue] vue中mixins有什么使用场景？

mixins是对vue组件的一种扩展，将一些公用的常用数据或者方法，构建一个可被混入的数据结构，被不同的vue组件进行合并，就可以在不同的vue组件中使用相同的方法或者基础数据。
vue引入mixins数据，mixins数据或方法，在每一个组件中都是独立的，互不干扰的，都属于vue组件自身。（在js中，有点类似于深度拷贝）

一般一些有重复方法的组件，可以考虑抽一个mixin。
或者是比如一些页面权限控制的内容，也可以考虑抽一个mixin

30、在vue中created与activated有什么区别？

created():在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。
activated()：是在路由设置时，才会有这个生命周期。在被 keep-alive 缓存的组件激活时调用。

31、在vue项目如何引入异步组件？

new Vue({
/
componets: {
my-componets: () => import('./my-model-component')
}
})
new一个新的vue实例 在vue中的component组件中，使用箭头函数指向异步组件


1
2
3
4
5
6
7
8
9

32、[vue] 在vue项目中scss scoped穿透符>>>无效的解决方案有哪些？

可以使用 /deep/ 操作符( >>> 的别名)
::v-deep

33、[vue] 为什么在v-for中的key不推荐使用随机数或者index呢？那要怎么使用才比较好呢？

因为在插入数据或者删除数据的时候，会导致后面的数据的key绑定的index变化，进而导致从新渲染，效率会降低
当数据进行更改的时候，会通过key来判断虚拟dom树是否进行了更改。如果发现了相同的dom-key就可以直接复用。减少了渲染的性能损耗。

34、[vue] vue-loader在webpack编译流程中的哪个阶段？

编译模板阶段：从入口文件出发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理

35、[vue] 预渲染和SSR(服务端渲染)有什么区别？

服务端渲染和预渲染的使用场景还是有较明显的区别的。预渲染的使用场景更多是我们所说的静态页面的形式。服务端渲染适用于大型的、页面数据处理较多且较为复杂的、与服务端有数据交互的功能型网站，一个明显的使用场景就是电商网站。

36、[vue] 你有用过预渲染技术吗？怎么做的？

预渲染的核心是使用 prerender-spa-plugin
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, ‘dist’),
routes: [ ‘/’, ‘/home’, ‘/infomation’, ‘/ticket’, ‘/scenery’, ‘/about’ ],
renderer: new Renderer({
headless: false,
renderAfterDocumentEvent: ‘render-event’
})
}),
项目所有的路由，最终生成后有几个页面，都是以这个配置为依据，而不是你在 vue-router 中配置的路由。

37、使用vue如何判断页面是否编辑及编辑页面未保存离开时，给出弹窗提示

update钩子函数中设置flag，在beforeDestory根据flag进行弹框提示
watch() 监听数据变动

九、小程序

微信小程序的原理：

从微信小程序的四层说起：JS、WXML、WXSS、JSON。然后可以分析一下小程序的webview和jscore部分。

小程序适配和h5的区别
微信小程序的生命周期

十、手写题

十一、算法题

十二、服务器

十三、项目

十四、其他

性能优化
说一下你封装的组件
说一下node.js
node.js进程管理
你看过的书有哪些
最近在了解哪些新知识
你说你们项目有五个人，是什么运作模式
前端开发。面向后台和面向用户的区别
如果用户反应白屏。怎么处理
反应弹窗广告
反应中间人攻击
linux命令你知道哪些
实现回到顶部
实现匀速回到顶部
怎么理解大前端方向
LRU原理
koa洋葱模型

十五、数据结构与算法

数据结构与算法你知道哪些
快排
时间复杂度
空间复杂度
什么是平衡二叉树
说一下diff算法复杂度
二分查找
二叉树实现翻转
伪随机算法
栈和队列的区别

十六、移动端

移动端300ms问题解决方案
移动端点透问题
说一下移动端和化h5适配区别
fastclickjs原理

由于时间关系文章中许多知识点引用的是其他博主的文章，如有侵权联系我，立刻删除

最近刚刚组建了一个群群里都是一些在找工作的小伙伴，有兴趣的可以私聊我拉你们入群啊

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/611647