前端面试题2022-02-24

CSS篇

CSS引入的方式有哪些？link和@import的区别是什么？
CSS引入的方式包括内联 内嵌 外链 导入
link和@import的区别是：
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS，定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS；
（2）页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
（3）import是CSS2.1提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题；
（4）后者优先级更高；

为什么会出现浮动？浮动是什么引起的？如何清除？
因为页面布局需要浮动；因为要让页面更加丰富；
浮动式由float属性引起的；
清除浮动：第一，clear: both;

px和em的区别？
px和em都是长度单位，区别是，px的值是固定的，是绝对单位，类似的还有pt（磅，1pt=1/72英寸）、pc（皮卡，1pc=12pt）、mm（毫米）、cm（厘米）、in（英寸）绝对单位指定是多少就是多少，计算比较容易。
em的值不是固定的，它是相对单位，em是指当前默认字号大小（继承父元素默认字号）的倍数，可根据父元素字号的改变而自动调整。例如2em是当前字号的2倍，若父元素或默认字号为12pt，则2em就是24pt。类似的还有ex，ex是当前字号高度值（通常是字体尺寸一半）的倍数。

如何解决margin塌陷？

答案

用CSS做一个三角形？
答案

// 1.创建一个div元素，设置div的宽高为0；
// 2.只用边框宽来填充，边框样式设置为实线“solid”，将顶部边框设置颜色；
// 3.将三个边框的颜色设置为透明‘transparent’即可
.triangle-up{
	width:0px;
	height: 0px;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
}// 正三角形

.triangle-Top-Left{
	width:0px;
	height: 0px;
	border-top: 100px solid red;
	border-right: 100px solid transparent;
}

垂直居中问题，position，top，margin-top

答案

水平居中问题，margin: 0,auto
盒子垂直居中的方法？

答案

check禁用后如何设置样式

动画帧requestAnimationFrame，类似setTimeout（异步）
答案

CSS层叠是什么？介绍一下
CSS就是层叠式样式表（Cascading Style Sheets）的简称，CSS中层叠的意思就是在HTML文档树结构中的子标记能够继承所有父标记定义的样式，还可以多次定义自己的样式，全部样式按照从外到内、由先到后的顺序叠加起来，如果不发生冲突，则全部样式都有效，重复定义冲突时按照内层优先、后定义优先的原则进行覆盖，即内层子元素覆盖父元素样式、后定义的覆盖先定义的样式。

CSS中margin和padding的区别是？
（1）margin是外边距，属于元素之外，相邻元素的margin可以 融合；
（2）padding是内边距，在元素之内，相邻元素的padding不可融合；

display与visibility有何异同？
display可以有很多值，visibility只有两个常用值：visible、hidden。
当display为none、visibility为hidden时都会隐藏元素。但display会隐藏掉元素空间，visibility会保留元素空间。

img的alt和title的异同？
alt是图片加载失败时，显示在网页上的替代文字；
title是鼠标放上面时显示的文字，title是对图片的描述与进一步说明；
这些都是表面上的区别，alt是img必要的属性，而title不是。
对于网站seo优化来说，title与alt还有最重要的一点：
搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里，进一步对图片进行说明。

什么是CSS Hack？
针对不同的浏览器写不同的CSS，就是CSS Hack

display:none与visibility:hidden的区别？
答案
CSS的盒模型有哪些？
答案
px，rem，em的区别？
答案
浮动原理是什么？为什么要清除浮动？
答案

移动端如何实现文字10px？
答案
答案

---

js篇

“===”和·==有何异同？
相同点：都是判定两个值是否相等；
不同点：前者会判断类型，而后者不会判断类型；

怎么判断两个对象相等？
答案
new具体做了些什么？
表述一：
创建一个新对象；
将它的_proto_指向其构造函数的prototype；
动态将this指向新对象；
执行函数体中的代码；
放回新对象中；

表述二：
（1）创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。
（2）属性和方法被加入到this引用的对象中。
（3）新创建的对象由this所引用，并且最后隐式的返回this。

typeof和instanceof的区别？

• typeof的返回值是一个字符串，用来说明变量的数据类型；
• typeof一般返回以下结果：number，boolean，string，function，object，undefined；
• typeof局限性：对于Array、Null等特殊对象使用typeof一律返回object；
• instanceof的返回值是布尔值，用于判断一个变量是否属于某个对象的实例；

var a = new Array();
alert(a instanceof Array);//true
alert(a instanceof Object);//true,Array是Object子类

call和apply、bind的区别？

• 三者相同点：都是用来改变this指向；
• 不同点：
• call()和apply()
  call()第一个参数是this要指向的对象，后面传入的参数是参数列表，可以是任意类型；但第一个参数为null，undefined时，默认指向window；
  apply()第一个参数时this要指向的对象，第二个参数是数组；
• call()和bind()
  call()改过this指向后会再次执行函数；
  bind()改过this指向后不执行函数，会返回一个绑定新this的函数，需要再次调用执行这个新函数；

JavaScript中callee和caller的作用？
（1）caller是返回一个对函数的引用，该函数调用了当前函数；
（2）callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

判断0.1+0.2=0.3？0.1+0.1=0.2？
0.1+0.2=0.3?false
0.1+0.1=0.2?true
原因在于在js中采用的IEEE754是双精度标准，计算机存储数据编码时，0.1不是精准的0.1，而是有舍入误差的0.1，当代码被编译后，0.1已经被四舍五入成一个与之很接近的计算机内部数字，所以还没计算，很小的舍入错误产生了。注意：不是所有浮点数都有舍入误差，二进制能准确地表示位数有限且分母是2的倍数的小数。
0.5+0.5=1？true
解决办法：把计算数字提升10的N次方倍，再除以10的N次方倍，一般使用1000即可。
(0.11000+0.21000)/1000=0.3? true

JavaScript对象的几种创建方式？
（1）工厂模式
（2）构造函数模式
（3）原型模式
（4）混合构造函数和原型模式
（5）动态原型模式
（6）寄生构造函数模式
（7）稳妥构造函数模式

事件绑定和普通事件有什么区别？
（1）事件绑定就是针对dom元素的事件，绑定在dom元素上；
（2）普通事件即为非对dom元素的事件。

String.match与RegExp.exec有何区别？
match只会返回没有分组的全部匹配结果或者有分组的第一次匹配结果；
而exec可以利用循环返回全部匹配结果；

简述JavaScript的优缺点：
优点：简单易用，与java有类似的语法，可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序，并且事先不用编译，逐步执行，无需进行严格的变量声明，而且内置大量现成对象，编写少量程序可以完成目标；
缺点：不适合开发大型应用程序。

JavaScript的本地对象，内置对象和宿主对象分别是什么？
（1）本地对象为array obj regexp等可以new实例化；
（2）内置对象为gload Math 等不可以实例化的；
（3）宿主对象为浏览器自带的document，window等。

js有哪些内置对象？
（1）Math对象：Math.abs(x);//用来返回数的绝对值；
（2）Date对象：var date = new Date();//通过new的方式创建一个日期对象；
（3）Array对象：var arr = new Array();
（4）字符串对象：var str = new String()

JQuery库中的$()是什么？
$()函数是jQuery()函数的别称。$()函数用于将任何对象包裹成jQuery对象，接着你就被允许调用定义在jQuery对象上的多个不同方法。你可以将一个选择器字符串传入$()函数，它会返回一个包含所有匹配的DOM元素数组的jQuery对象。

JavaScript的DOM是什么意思？
DOM是W3C的对象模型，DOM是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容结构和样式。

列举JavaScript的本地对象
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。

JavaScript原型，原型链？有什么特点？
（1）原型对象也是普通的对象，是对象一个自带隐式的proto属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们称之为原型链。
（2）原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。

JavaScript继承的6种方法
（1）原型链继承
（2）借用构造函数继承
（3）组合继承（原型+借用构造）
（4）原型式继承
（5）寄生式继承
（6）寄生组合式继承

let，counst，var的区别：
var、let、const的区别？
（1）从声明过程说
var：遇到有var的作用域，再任何语句执行器都已经完成了声明和初始化，也就是变量提升并且拿到undefined的原因。
let：解析器进入一个块级作用域，发现let关键字，变量只是先完成声明，并没有到初始化那一步。如果此时在作用域提前访问，会报错xx is not defined ，这就是暂时性死区的由来。等到解析到有let那一行时，才会进行初始化阶段。如果let那一行是赋值操作，则初始化和赋值同时进行。
count和let一样。
（2）从内存分配说
var：会直接在栈内存里预分配内存空间，然后等到实际语句执行时，再存储对应的变量，如果传的是引用类型，则在堆内存里开辟一个内存空间存储实际内容，栈内存会存储一个指向堆内存的指针。
let：不会在栈内存里预分配内存空间，而且在栈内存分配变量的时候，会检查，如果有相同变量名存在就会报错。
count：不会分预配内存空间，栈内存分配变量时也会做同样的检测。count存储的变量是不可修改的，所以对于基本类型来说无法修改指定的值，对于引用类型来说无法修改栈内存里分配的指针，但是可以修改指针指向的对象里面的属性。
（3）从变量提升说
let只是创建过程中提升，初始化过程并没有提升，所以会产生暂时性死区。
var的创建和初始化过程都提升了，所以赋值前访问会得到undefined

get和post的区别？
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符。
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

事件委托是什么？
（1）利用事件冒泡的原理，让自己的所触发的事件，由它的父元素代替执行；
（2）通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

简述同步和异步的区别：
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

setTimeout与setInterval有何区别?
（1）setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段后就将执行那段代码。
（2）不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还是自动重复执行代码，而setTimeout只执行一次那段代码。

js拖动的原理？
答案

js执行机制
答案

promise的几种状态？什么时候会进入catch？

三个状态：
pending、fulfilled、reject
两个过程：
padding -> fulfilled、padding -> rejected当pending为rejectd时，会进入catch

不借助中间变量实现两个变量值互换？
答案

---

Vue

简述Vue的生命周期？
它可以总共分为8个阶段：
（1）beforeCreate创建前
（2）created创建后
（3）beforeMount载入前
（4）mounted载入后
（5）beforeUpdate更新前
（6）updated更新后
（7）beforeDestroy销毁前
（8）destroyed销毁后
创建前：对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。
创建后：对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。
载入前：对应的钩子函数为beforeMount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。
载入后：对应的钩子函数为mounted。mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。
更新前：对应的钩子函数为beforeUpdate。在这一阶段，vue遵循数据驱动DOM的原则。beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。
更新后：对应的钩子函数为updated。这一阶段DOM会和更改过的内容同步。
销毁前：对应的钩子函数为beforeDestroy。在上一阶段Vue已经成功的通过数据驱动DOM更新，当我们不再需要vue操纵DOM时，就要销毁Vue，也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。
销毁后：对应的钩子函数为destroyed。在销毁后，会触发destroyed钩子函数。
vue的生命周期的思想贯穿在组件开发的始终，通过熟悉其生命周期调用不同的钩子函数，我们可以准确的控制数据流和其对DOM的影响；vue生命周期的思想是Vnode和MVVM的生动体现和继承。

简述vue的响应式原理？
当一个vue实例创建时，vue会遍历data选项的属性，用Object.definePreperty将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。
每个租价实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

Vue有哪些指令？
v-html、v-show、v-if、v-for等等

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

如何优化SPA应用的首屏加载速度慢的问题？
（1）将公用的JS库通过script标签外部引入，减小app.bundel的大小，让浏览器并行下载资源文件，提高下载速度
（2）在配置路由时，页面和组件使用懒加载的方式引入，进一步缩小app.bundel的体积，在调用某个组件时再加载对应的js文件
（3）加一个首屏loading图，提升用户体验

第一次加载页面会触发那几个钩子函数？
答案

v-if与v-show的区别？
答案

组件时如何传值的？
1.父组件向子组件传递数据：
父组件内设置需要传递的数据，在父组件引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数props接受即可。
2.子组件向父组件传递数据：
子组件通过vue实例方法$emit进行触发并且可以携带参数，父组件监听使用@（v-on）进行监听，然后进行方法处理。3.兄弟组件传递数据：3.1兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据提供事件中心varhub=newVue()3.2传递数据方，通过一个事件触发hub.$emit（方法名，传递的数据）
3.3接收数据方，通过mounted（）{}钩子中触发 hub.$on()方法名3.4销毁事件，通过hub.$off()方法名销毁之后无法进行传递数据
答案链接

为什么要避免v-if和v-for一起用？
答案链接
为什么要用mount？
答案
路由传参为用query，params的区别？
答案
vue2和vue3的区别？
答案
diff算法
添加链接描述
添加链接描述
vue原理，生命周期
添加链接描述
mvc,mvp,mvvm
添加链接描述

v-if，v-for为什么不能同时使用？为什么加key值？
添加链接描述

挂载数据时在哪个生命周期放？mounted？为什么不在created放？
添加链接描述

vue组件调用返回false，但vue3返回true？（原理，源码）
添加链接描述
添加链接描述

为什么移动端h5用vue，pc端管理端用react？
添加链接描述

vue生命周期分为几个阶段？
添加链接描述

vue中key值的作用？
添加链接描述

vue3相比vue2执行效率上有哪些提升？
添加链接描述

computed和watch的区别和运用场景？
添加链接描述

vue响应式数据的原理？
添加链接描述

vue和jquery的区别？
添加链接描述

vue-router有哪几种路由守卫？
添加链接描述

$route和$router的区别?
添加链接描述

怎么理解vue单向数据流？

1. Vue 的单向数据流：指数据一般从父组件传到子组件，子组件没有权利直接修改父组件传来的数据，即子组件从 props 中直接获取的数据，只能请求父组件修改数据再传给子组件。父级属性值的更新会下行流动到子组件中。

2. 为什么不能子组件直接修改父组件传来的值呢？父组件的值可能会不断发生变化，那么如果我们子组件对父组件传来的值比如说 props 有一个 number，子组件收到了 number=1，在收到后，子组件直接改变number 的值为 5，去做些事情，但还未做时父组件数据更新了，传过来一个值 3，也就是说子组件刚将其变为 5，父组件又把它变成了 3，可能影响子组件的使用。说的官方一些，就是父组件的值更新时，子组件中 props 的值也会发生更新。

3. 在子组件中直接用 v-model 绑定父组件传过来的数据是不合理的，如果希望修改父组件传给子组件的值：

（1）在子组件 data 中创建一个变量获取 props 中的值，再改变这个 data 中的值。

（2）子组件使用 $emit 发出一个事件，让父组件接收去修改这个值。

如何理解vue中虚拟dom？
添加链接描述

添加链接描述

---

必须掌握的技能： http，js，ajax，编程思想，兼容，mvc，mvvm，nodejs，git，svn，webpack，html，html5，css，css3，es5，es6，vue，react，less/sass，微信小程序、公众号，各种常用库和工具，双向通信，开发工具，查看MDN文档
红宝石，牛客网
选会技能： jq，bootstrap，element-ui组件库，layui，echarts，postman等

---

闭包

闭包概念和用处

闭包概念
各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。简单理解就是：闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成 “定义在一个函数内部的函数”。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包是 JavaScript 中最强大的特性之一。JavaScript 允许函数嵌套，并且内部函数可以访问定义在外部函数中的所有变量和函数，以及外部函数能访问的所有变量和函数。

闭包作用
它的最大用处有两个：一个是可以读取函数内部的变量
另一个是让这些变量的值始终保持在内存中。

什么是闭包？
官方的解释：所谓闭包，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
在Scala、Scheme、Common Lisp、Smalltalk、Groovy、JavaScript、Ruby、Python、Go、Lua、objective c、swift以及java（java8及以上）等语言中都能找到对闭包不同程度的支持。
通俗的讲就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。

闭包的特性是什么？
（1）封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
（2）持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然存在。

闭包的优缺点？如何解决闭包？

• 优点：第一，可以读取函数内部的变量；第二，可让这些局部变量保存在内存中，实现变量数据共享。
• 缺点：第一，由于闭包会使得函数中的变量都被保存在内存中，内存消耗打，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能会导致内存泄漏。解决：在推出函数前，将不使用的局部变量全部删除；
  第二，闭包会在父函数外部，改变父函数内部变量的值。所以若你把父函数当作对象object使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），就要小心不要随便改变父函数内部变量的值。

---

AJAX

谈谈你对Ajax的理解？
（1）Ajax（Asynchronous JavaScript + XML），即异步JavaScript+XML的缩写，主要用来页面异步刷新，也是构建RIA的一种基础技术。
因为它涉及浏览器兼容、跨域等问题，在项目中一般会使用一些基础类库辅助实现，如jQuery等。

ajax请求的过程是?
（1）创建XMLHttpRequest对象
（2）创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息
（3）设置响应HTTP请求状态变化的函数
（4）发送HTTP请求
（5）获取异步调用返回的数据
（6）是用JavaScript和DOM实现局部刷新

---

HTML && H5

html5新元素有哪些？
HTML5中一些有趣的新特性：
（1）用于绘画的canvas元素；
（2）用于媒介回放的video和audio元素；
（3）对本地离线存储的更好的支持；
（4）新的特殊内容元素，比如article，footer，header，nav，section；
（5）新的表单控件，比如calendar，date，time，email，url，search
以上是w3c上的原话，简单来说就是更符合标准，提供更多功能支持；更加规范，可读性更强，性能有提升，实现功能更加简单方便，就像手机一样，高版本的功能多一些。

HTML5离线存储
（1）localStorage长期存储数据，浏览器关闭后数据不丢失；
（2）sessionStorage数据在浏览器关闭后自动删除。

H5的新特性有哪些？
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

---

JQuery

JQuery与jQuery UI有啥区别？
jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。

---

this

谈谈对this对象的理解？
（1）this总是指向函数的直接调用者，而非间接调用者；
（2）如果有new关键字，this指向new出来的那个对象；
（3）在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。

---

Vuex

什么是vuex？
在SPA单页面组件的开发中Vue的vuex和React的Redux都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。

vuex的5个核心属性是什么？
State、 Getter、Mutation 、Action、 Module

state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
添加链接描述

vuex的出现解决了什么问题？
主要解决了以下二个问题:
1.多个组件依赖于同一状态时，对于多层嵌套的组件的传参将会非常繁琐，
并且对于兄弟组件间的状态传递无能为力
2.跨组件传参的行为需要变更同一状态。以往采用父子组件直接引用或
者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导
致无法维护的代码。

常见的有以下几个 ：

1.我们在使用Vue开发项目中，经常会有通过路由传递参数时，由于参数过多会出现会导致400 Bad Request，vuex可以解决这个问题，

2.解决多个组件共享状态时，单向数据流的简洁性很容易被破坏的问题

3.解决多个视图依赖同一状态的问题

4.解决了在中大型项目中，数据太多时，只需要在vuex更改处理数据，不用去每个页面更改

简述vuex数据传递流程？
vuex数据传递的流程我觉得为以下几个步骤：

第一步：通过new Vuex.Store()创建一个仓库 state是公共的状态，state—>components渲染页面

第二步：在组件内部通过this.$store.state.属性 来调用公共状态中的state，进行页面的渲染。

第三步：当组件需要修改数据的时候，必须遵循单向数据流。通过this.$store.dispatch来触发actions中的方法

第四步:actions中的每个方法都会接受一个对象 这个对象里面有一个commit方法，用来触发mutations里面的方法

第五步：mutations里面的方法用来修改state中的数据 mutations里面的方法都会接收到2个参数 一个是store中的state

另外一个是需要传递到参数

第六步：当mutations中的方法执行完毕后state会发生改变，因为vuex的数据是响应式的 所以组件的状态也会发生改变

添加链接描述

路由，vuex问题
添加链接描述

mutations和action的区别？
1.vuex的作用及优势
1，vuex能实现组件全局状态（数据）的管理，实现组件间的数据共享。
2.能够集中管理共享数据，易于开发和维护，没有vuex时，需要在组件之间传递，能够高效的实现数据共享。
3.存储在vuex中的数据都是响应式的，能够实时保证数据和页面的同步。

2.Mutations和Action的异同
提交mutation是改变store中状态的唯一方式，类似于事件，会接受state作为第一个参数,mutation必须是同步函数，因为当mutations中是异步函数时，devtool不知道回调函数什么时候实际的被调用，导致无法扑捉到前一状态和后一状态的快照，从而导致程序很难调试。

而为了处理异步操作，需要用到action。通过store.dispatch来触发action，action里面可以有异步操作，然后在action里面提交mutation改变状态。（action不直接改变store中的状态，而是接受一个与store实例有相同属性和方法的context参数，通过context.commit来提交mutation。）

添加链接描述

---

React

React有哪些优化性能的手段？
首屏加载
首屏加载是被讨论最多的话题，一方面web前端首屏的加载性能的确普遍较差，另一方面，首屏的加载速度至关重要，很多时候过长的白屏会导致用户还没有体验到网站功能的时候就流失了，首屏速度是用户留存的关键点。

---

浏览器

localstorage，sessionStorage,cookie的区别？
添加链接描述

添加链接描述

描述浏览器渲染过程?
浏览器渲染页面的过程：浏览器会从上到下解析文档
1 遇见HTML标记，调用HTML解析器解析为对应的token并构建DOM树

2 遇见style/link标记调用解析器处理CSS标记并构建CSS样式树

3 遇见script标记调用javascript解析器处理script标记，绑定事件、修改DOM树/CSS树等

4 将DOM树与CSS树合并成一个渲染树

5 根据渲染树来渲染，以计算每个节点的几何信息（这一过程需要依赖图形库）

6将各个节点绘制到屏幕上

网页从输入网址到渲染完成经历了哪些过程？
（1）输入网址；
（2）发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；
（3）与web服务器建立TCP连接；
（4）浏览器向web服务器发送http请求；
（5）web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；
（6）浏览器下载web服务器返回的数据及解析html源文件；
（7）生成DOM树，解析css和js，渲染页面，直至显示完成。

浏览器存储有哪些？
添加链接描述

说说你对语义化的理解？
（1）去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
（2）有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
（3）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
（4）便于团队开发和维护，语义化更具可读性，是下一步把网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化；

为什么要有同源限制？
比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过JavaScript读取到你的表单中input中的内容，这样用户名，密码就能轻松到手。

常使用的库有哪些？常用的前端开发工具？
（1）最常用的库：jquery-1.4.2.min.js
（2）常用的前端开发工具：Visual Studio Code、firebug、photoshop、取色器、色板、eclipse、phpstudy_pro等

执行效率的差别：
js是动态的解释型语言浏览器一边解析编译一边运行；
java是编译类型语言，先编译后执行；
java的效率略高，现在硬件发展快差距在逐渐变小。

XMLHttpRequest是什么？
XMLHttpRequest是我们得以实现异步通讯的根本。最早在IE5中以ActiveX组件实现；最近，Mozilla 1.0和Safari 1.2中实现为本地对象。XMLHttpRequest虽然不是W3C标准，但却得到了FireFox，Safari，Opera，Konqueror，IE等绝大多数浏览器的支持。

Servlet与CGI的区别：
区别在于Servlet处于服务器进程中，它通过多线程方式运行其service()方法，一个实例可以服务于多个请求，并且其实例一般不会销毁，而CGI对每个请求都产生新的进程，服务完成后就销毁，所以效率上低于Servlet。

谈谈你所了解到的web攻击技术？
（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成认证用户进行非预期的个人信息或设定信息等某些状态更新。

TCP与UDP区别
添加链接描述

有做过骨架屏么，是怎么做的？

webpack迁移vite遇到了哪些问题？
添加链接描述

CI/CD做了哪些实践？
添加链接描述

鉴权有了解么，jwt如何实现踢人，session和jwt鉴权的区别
添加链接描述

TCP三次握手http1.0、1.1、2都有哪些区别？
添加链接描述

https，为什么https可以防中间人攻击？
添加链接描述

微信小程序生命周期

介绍一下编写一个数组去重的方法？
思路：
（1）创建一个新的数组存放结果
（2）创建一个空对象
（3）for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。

各种算法，原理，例子
添加链接描述
冒泡排序
添加链接描述
给出任意一个二维数组，要求输出数组元素的所有排列组合
添加链接描述

换肤（小程序，网站，节日换肤），多种方式实现

换肤都做过什么处理，有没有处理过可能改变尺寸的换肤？

封装一个数字输入框，通过参数配置，能限制输入框的长度，且输入不满长度时输入框前面补0

如何快速判断是否是需遍历？
添加链接描述

判断tar切换页面是否写在一起？
添加链接描述

数据多时丢失问题？
添加链接描述

[]+[],{}+{}

[‘1’,‘2’,‘3’].map(parseInt)输出什么？为什么？

parseInt(“11233345”,2)为什么等于3？

parseInt(‘13’,2)可以正常输出，为什么？

为什么parseInt(‘3’,2)为NaN

var str==[1,[2,3],[4,5,[6,7]]];将其变为[1,2,3,4,5,6,7]

搭建vue项目

sort排序
var cun = numnum.DepartmentsList
cun.sort((a,b)=>{
return a.sortidNum.charCodeAt(0) - b.sortidNum.charCodeAt(0);
})
console.log(cun);

// 完成以下
<script>
    function test(){
		console.log(b);
		console.log(a);
		if(a){
			var b = 100;
		}
		console.log(b);//补充
		var c = 234;
		console.log(c);
	}
	var a;
	test();
	a=10;
	console.log(c);
   
  </script>