你还在为找工作发愁嘛？最新前端高频面试题（适合应届生），拿走不谢！_前端应届生面试题

HTML、CSS相关

盒子模型：

一个盒子可以分成四个部分：外边距，边框，内边距，内容 默认情况下，盒子的width和height属性只是设置content（内容）的宽和高 盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框 盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框 。

在移动端，这个盒子模型就不是很适合做开发了，最好用box-sizing: border-box;属性改变一下盒子模型；写了这个属性之后宽度会包括border

HTML5,css3新增的内容有哪些

HTML5：新增语义化标签,新增表单类型,表单元素,表单属性,表单事件,多媒体标签，本地存储 localstrage长期保存 关闭浏览器也不会删除 sessionstorage 数据在浏览器关闭后自动删除

css3:文字阴影，边框，盒子模型，渐变，动画，伪元素选择器，属性选择器，结构伪类选择器，媒体查询， 2D/3D转换, flex弹性布局

清除浮动的方式有哪些？

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

清除浮动方式1：给父元素单独定义高度2.:父级定义overflow：hidden； 3.⽗级定义伪类 :after 和 zoom

水平居中：

1.子父元素宽度固定，子元素设置margin：auto，并且子元素不能设置浮动，否则居中失效2.子父元素宽度固定，父元素设置text-align：center，子元素设置display：inline-block，并且子元素不能设置浮动，否则居中失效

水平垂直居中：

1.子元素相对于父元素绝对定位，子元素top，left设置50%，子元素margin-top和margin-left减去各自宽高的一半 2父元素设置弹性盒子，display：flex； justfy-content：center ；align-item：center；

如何让元素垂直居中？

1设置子元素和父元素的行高一样 2给父元素添加伪元素.弹性盒，3父元素display：flex，子元素align-self：center

Px，rem，em的区别

Px，绝对长度单位，像素px是相对于显示器屏幕分辨率来说的

em 相对长度单位，相对于当前对象内文本的字体尺寸

rem 相对于html根元素的font-size

cookies,sessionStorage,localStorage 的区别？

1.cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。2. cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递。3.sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。

CSS3的Flexbox（弹性盒布局模型）

1.flexible box 简称 flex，意为 ”弹性布局” ，可以简便、完整、响应式地实现各种页面布局2、采用 flex 布局的元素，称为 flex 容器 container3、它的所有子元素自动成为容器成员，称为 flex 项目 item4、容器中默认存在两条轴， 主轴 和 交叉轴 ，呈90度关系。项目默认沿主轴排列，通过 flex-direction 来决定主轴的方向5、每根轴都有起点和终点，这对于元素的对齐非常重要

作用：1.通过 flex 简单的实现元素水平垂直方向的居中，以及在两栏三栏自适应布局中通过 flex 完成，2、包括现在在移动端、小程序这边的开发，都建议使用 flex 进行布局

盒模型计算方式:box-sizing:boder-box

Less、Sass/Scss是什么?

1. Less定义：是一种动态的样式语言,使CSS变成一种动态的语言特性，如变量、继承、运算、函数。Less既可以在客户端上面运行(支持IE6以上版本、Webkit、Firefox),也可以在服务端运行(Node.js)

2. SaSS定义：是一种动态样式语言，SaSS里面的语法属于缩排语法，对于之前的css相比，多出了很多功能，更容易阅读

3. 预处理器。Less和SaSS都属于预处理器，它会定义一种新的语言，其总体思想是为CSS增加一些编程的特性，将 CSS 作为目标生成文件，

4. 区别：

   1 编译环境： ​ Sass是在服务端上面处理的，之前是Ruby,现在是Dart-Sass或者是Node-Sass，但是Less在编译时，需要引入less.js来处理Less 代码 输出CSS到浏览器上，也可以在开发服务器上将Less语法编译成css文件，输出CSS文件到生产包目录，也有在线编译地址。 ​ 2.变量符 Less是@，而Sass是$,

   3 输出设置 Less没有输出设置，而Sass有4种输出选项，如下 ​ nested：嵌套缩进的css代码 ​ expanded：展开的多行css代码 ​ compact：简洁格式的css代码 ​ compressed：压缩后的css代码

   4 Sass支持条件语句，可以使用if{}else{},for{}循环等等，而Less不支持，

   5.总体优点 3.1 提供CSS缺失的样式层复用机制 3.2 减少冗余代码 3.3 提高样式代码的可维护性 3.4 结构清晰，便于扩展可以方便的屏蔽浏览器私有的语法差异 3.5 轻松实现多重继承，完全兼容了CSS代码，提高了开发效率。

谈谈css选择器优先级顺序以及判定标准?优先级从低到高:

通配符选择器<标签选择器<类选择器(属性选择器)<ID选择器<行内样式<使用! important修饰的属性优先级最高; 如果两个选择器(属性完全相同)同时命中一个元素，并且权重一样，则书写顺序会影响优先级,后一个选择器的属性会覆盖前一个选择器中相同的属性.

BFC

块级格式化上下文 。它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

作用：（1） 避免margin重叠。 常见的创建BFC的方式：浮动元素：float 除 none 以外的值。绝对定位元素：position (absolute、fixed)。display 为 inline-block、table-cells、flex。overflow 除了 visible 以外的值 (hidden、auto、scroll)。

Javascript

var、let 和const的区别：

1.块级作用域:let const 有块级作用域 var没有 2.变量提升：var存在变量提升，let和const不存在变量提升3.重复声明：

var声明变量时，可以重复声明变量，const和let不能重复声明。4.const声明以后必须赋值 否则报错

闭包：

1.一个可以访问另外一个函数内部作用域变量的函数 简单的来说就是 可以访问外部环境变量的函数就是闭包 2.正常情况下函数执行完毕后 内存中变量会被销毁 在闭包中 内部函数没有执行完成 外部函数变量不会被销毁 会存入内存中

优点: 1、形成私有空间，避免全局变量的污染 2、持久化内存，保存数据安全

缺点: 1.常驻内存,会增大内存使用量,影响性能 2.持久化内存，导致内存泄露

解决方法: 1、尽快避免函数的嵌套，以及变量的引用 2、执行完的变量，可以赋值null，让垃圾回收机制，进行回收释放内存（当不在引用的变量，垃圾回收机制 就会回收） 3、及时清除，例如定时器。

promise

1.promise是一个构造函数，通过new关键字来生成Promise实列对象 2.promise是es6提出的异步编程的解决方案，可以更换的解决异步回调和回调地狱等问题 3.promsie作为一个构造函数可以接收一个函数作为参数，这个函数在new promise时会立刻执行，可以去这里执行异步操作，它的两个参数reslove,reject ，这两个参数也是函数，用来标记异步执行的状态 reslove异步执行失败时调用 reject异步成功时调用 异步状态可以通过 .then() .catch()接收

同步异步：

JS的执行机制中 JS 是单线程的 从上往下执行 同步是阻塞模式:当前一个任务结束以后下一个任务才可以执行 异步是非阻塞模式 :在执行这个任务的同时 可以做另外一个任务 如(计时器 定时器 ajax)

this.指向

1.在函数中this指向window 2.在事件中 this指向触发事件的对象 3.构造函数中 指向new关键字创建的实例对象 4.箭头函数中指向函数上一级中的this指向

call,apply,bind不同

1.call,apply可以改变this执向，并立即调用函数 call传参是一个一个传 apply 传递一个数组 2.bind会返回返回一个新值 不会立即调用函数

事件循环

JS机制在执行过程中会先执行执行栈中的同步任务 把异步任务(回调函数)委托给宿主环境执行 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

宏任务微任务

宏任务：计时器 ajax 读取文件 微任务：promise.then 执行顺序：同步任务->process.nextTick->微任务=>宏任务->setImmediate

作用域链

函数作用域内使用的变量 ，如果在本作用域内未定义，会往上一级一层一层查找，直到找到这个全局作用域，如果找不到会返回undefined ，这种一层一层地查找的关系成为作用域链

null和undefined

undefined表示不存在这个值 null：表示一个对象被定义了, 值为"空值"

浅拷贝和深拷贝

1.浅拷贝：只是拷贝一层，更深层次级别的对象只拷贝引用 2.深拷贝：拷贝多层 每一层数据都会拷贝

继承

1.原型链的继承：将父类的实例作为子类的原型 2.构造函数继承：在子类内部调用父类，通过call改变父类中this指向

原型，原型链

原型：每一个构造函数都会有prototype属性,被称为显式原型。 每一个实例对象都会有 _ _proto _ _属性,其被称为隐式原型。每一个prototype原型上都会有一个constructor属性，这个属性会指向构造函数

原型链：当访问一个实例对象的属性时，，如果这个对象中没有这个属性，js引擎就会去该实例对象的原型上去找，如果还没有，那么就往原型对象的原型上去找，直到找到object为止

防抖节流

防抖：函数触发后延迟一段时间再执行，如果在这期间又被触发，则重新计时 常用场景：搜索框输入减少查询量

节流：一段时间内函数只触发一次 用于监听鼠标滚动事件

箭头函数

1.this是静态的 this始终指向函数声明时所在作用域下的this值

2.不能作为构造实例化对象

3.不能使用arguments变量

4.可以简写

JavaScript 中有几种数据类型？

数据类型可以分为基本数据类型和引用数据类型。基本数据类型 ：String、Number、Boolean 、Null、Undefined、Symbol、BigInt ;。引用数据类型：Object;

JS中函数定义方式

1.函数声明。2.函数表达式3.构造函数

列举和数组操作相关的方法

push:将元素添加到数组的末尾，返回值是数组长度pop:将数组最后一个元素弹出，返回值是被弹出的元素unshift:在数组的开头插入一个元素,返回值是数组的长度shift:将数组第一个元素弹出,返回值是被弹出的元素splice(index,len):删除数组中指定元素concat:连接数组

reverse:翻转数组

es6新增的数组的方法

forEach() 循环遍历数组,功能等同于for循环

some() 用于遍历数组，如果有至少一个满足条件，就返回true，否则返回false。

map() 返回一个新数组，该数组中的每个元素是调用一个提供的函数后返回的结果。

filter() 用于过滤掉不满足条件的元素,返回一个满足条件的所有元素的新数组，

every() 用于遍历数组，只有当所有的元素返回true，才返回true，否则返回false。

reduce() 对数组中的每个元素执行一个提供函数，将其结果汇总,返回出去

数组去重的方法

indexOf map set filter includes 双重for循环

Set数据结构中所有元素都是唯一的，没有重复

Set 本身是一个构造函数，用来生成 Set 数据结构 原理：

filter() 使用指定的函数测试所有元素，并返回一个包含所有通过测试元素的新数组

indexof() 可返回某个指定的字符串值在字符串中首次出现的位置。如果没有检索到指定字符串，则返回-1 includes() 存在该值返回true，反之false

列举和字符串操相关的方法

substr(start,len)/substring(start, end):截取字符串 slice:从数组会字符串中截取一段 indexOf/ lastIndexOf:查找某一个字符是否存在于另外一个字符串中，存在则返回索引，不存在则返回-1 ; indexOf是从前向后顺序查找; lastIndexOf:是从后向前查找replace:替换字符串特定的字符toUpperCase:将字符串转成大写toLowerCase:将字符串转成小写charAt:获取字符串中指定索引的字符

检测数据类型typeof(typeof()）和 instanceof 的区别?

typeof可以判断变量的数据类型,返回值是字符串; a instanceof b 是判断b 是不是在a 的原型链上，也可以实现判断数据类型，返回值为布尔.

什么是预解析?

JS代码在执行之前,解析引擎会对代码进行一个预先的检查，主要会对变量和函数的声明进行提升,将变量和函数的声明提到代码的最前面.变量只提升声明，不提升赋值.

什么是事件委托?事件委托的原理是什么?

本应该注册给子元素的事件，注册给父元素

事件冒泡，因为有事件冒泡的存在，所以子元素的事件会向外冒泡，触发父元素的相同事件，根据事件对象可以找到真正触发事件的事件源. 由内到外触发

es6有哪些新特性？

let和const具有块级作用域,不存在变量提升

新增了箭头函数,简化了定义函数的写法,(注意箭头函数本身没有this,它的this取决于外部的环境),

新增的promise解决了回调地狱的问题,

新增解构赋值从数组和对象中提取值,对变量进行赋值,

新增了模块化、利用import 、export来实现导入、导出。

新增了class类的概念,它类似于对象

箭头函数和普通函数的区别？箭头函数可以当做构造函数 new 吗？

箭头函数是普通函数的简写，但是它不具备很多普通函数的特性 第一点，this指向问题，箭头函数的this指向它定义时所在的对象，而不是调用时所在的对象 不会进行函数提升 没有arguments对象，不能使用arguments，如果要获取参数的话可以使用rest运算符 没有yield属性，不能作为生成器Generator使用 不能new 没有自己的this，不能调用call和apply 没有prototype，new关键字内部需要把新对象的proto指向函数的prototype

async await 是什么？它有哪些作用？

async await 是es7里面的新语法、它的作用就是 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。它可以很好的替代promise 中的then。async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

数组有哪几种循环方式？分别有什么作用？

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

forEach() 方法对数组的每个元素执行一次提供的函数。

some() 方法测试是否至少有一个元素可以通过被提供的函数方法。该方法返回一个Boolean类型的值

平时都是用什么实现跨域的？

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

1.jsonp: 利用 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。

2.声明一个回调函数，其函数名(如show)当做参数值，要传递给跨域请求数据的服务器，函数形参为要获取目标数据(服务器返回的data)。

3.CORS：跨域资源共享（CORS）是一种机制；当一个资源访问到另外一个资源(这个资源放在不同的域名或者不同的协议或者端口)，资源就会发起一个跨域的HTTP请求需要浏览器和服务器同时支持；

json

JSON（JavaScript Object Notation），它是一种基于文本，独立于语言的轻量级数据交换格式。

类似于一种数据封装，可以想象为java中student封装类

JSON的数值可以是数字、字符串、布尔值、数组或者对象、null

JSON.parse()和JSON.stringify()

parse用于从一个字符串中解析出json对象,

stringify()用于从一个对象解析出字符串，如

• A.数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
• B.易于解析，客户端JavaScript可以简单的通过eval_r()进行JSON数据的读取；
• C.支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析；
• D.因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护

vue

webpack打包工具

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

打包的作用：

• 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。

• 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。

• 将代码打包的同时进行混淆，提高代码的安全性。

2、Webpack四个核心概念(四个核心会写在配置文件里webpack.config.js)

入口(entry)：webpack打包的启点，可以有一个或多个，一般是js文件。webpack会从启点文件开始，寻找启点直接或间接依赖的其它所有的依赖，包括JS、CSS、图片资源等，作为将来打包的原始数据

输出(output) ：出口一般包含两个属性：path和filename。用来告诉webpack打包的目标文件夹，以及文件的名称。目的地也可以有多个。

加载器(loader)：webpack本身只识别Js文件，如果要加载非JS文件，必须指定一些额外的加载器(loader)，

例如css-loader。然后将这些文件转为webpack能处理的有效模块，最后利用webpack的打包能力去处理。

插件(plugins)：插件可以扩展webpack的功能，让webpack不仅仅是完成打包，甚至各种更复杂的功能，

或者是对打包功能进行优化、压缩，提高效率。

MVVM

Mode 数据源、View 视图 、 ViewModel就是 vue 的实例 。js 数据的变化，会被自动渲染到页面上 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中。

MVVM由三部分组成M(model数据层), v(view视图层),VM(view-model)视图模型层.是一种框架的设计思想, vue就是基于mvvm来设计的.它是一种双向数据绑定的模式，用viewModel来建立起model数据层和view视图层的连接，数据改变会影响视图，视图改变会影响数据

MVC：MVC: MVC即model-view-controller（模型-视图-控制器）是项目的一种分层架构思想，它把复杂的业

务逻辑，抽离为职能单一的小模块，每个模块看似相互独立，其实又各自有相互依赖关系。它的好处是：保证了模块的智能单一性，方便程序的开发、维护、耦合度低。

双向数据绑定

是通过数据劫持和发布者-订阅者模式实现

object有一个方法叫做defineProperty,它能够检测属性变化，一旦有数据被访问或修改，vue底层就会检测到变化，通过更新DOM标签，重新渲染DOM结构

v-if和v-show

v-show:原理是动态的为元素添加和或移除 display: none 样式，来实现元素的显示和隐藏（如果要频繁的切换元素的显示状态，用 v-show 性能会更好）

v-if: 原理是每次动态的创建或移除元素 来实现元素的显示与隐藏（如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好）

vue生命周期

beforecreated(创建前) created(创建后):里面不能操作dom，常用来调用methods里面的函数，请求服务器的数据 beforemounted(载入前)mounted(载入后)在这个阶段可以最早操作dom beforeupdate(更新前) updated(更新后)可以操作到最新的DOM 结构 beforedestory(销毁前)destoryed(销毁后)

一、创建前 / 后

在beforeCreate生命周期函数执行的时候，data和method 还没有初始化

在created 生命周期函数执行的时候，data和method已经初始化完成

二、渲染前/后

在beforeMount 生命周期函数执行的时候，已经编译好了模版字符串、但还没有真正渲染到页面中去

在mounted 生命周期函数执行的时候，已经渲染完，可以看到页面

三、数据更新前/后

在beforeUpdate生命周期函数执行的时候，已经可以拿到最新的数据，但还没渲染到视图中去。

在updated生命周期函数执行的时候，已经把更新后的数据渲染到视图中去了。

四、销毁前/后

在beforeDestroy 生命周期函数执行的时候，实例进入准备销毁的阶段、此时data 、methods 、指令等还是可用状态

在destroyed生命周期函数执行的时候，实例已经完成销毁、此时data 、methods 、指令等都不可用

常用的钩子函数使用场景

beforeCreate 做loading的一些渲染

created 结束loading,发送数据的请求,拿数据

mounted 可以操作dom数据

undated 监视数据的更新

beforeDestroy 销毁非vue资源,防止内存泄漏,例如清除定时器

第一次页面加载会触发哪几个钩子？

• 答：会触发下面这几个beforeCreate、created、beforeMount、mounted 。

DOM 渲染在哪个周期中就已经完成？

• 答：DOM 渲染在 mounted 中就已经完成了

组件之间数据共享

1.父向子：通过props自定义属性 2.子向父：通过emit()自定义事件3.兄弟之间：创建eventBus.js并向外共享一个vue的实例对象数据发送方调用bus.emit()自定义事件 3.兄弟之间：创建eventBus.js 并向外共享一个vue的实例对象 数据发送方 调用bus.emit()自定义事件3.兄弟之间：创建eventBus.js并向外共享一个vue的实例对象数据发送方调用bus.emit方法触发自定义事件 数据接收方 调用bus.$on 注册一个自定义事件

插槽

1.单个插槽：单个插槽叫做匿名插槽。2.具名插槽：带有具体名称的插槽叫做“具名插槽”3.作用域插槽：在封装组件时 为预留的提供属性对应的值 以v-slot: 的形式，接收作用域插槽对外提供的数据

对插槽理解：通过插槽可以动态指定某一个组件模板部分的渲染，我们在调的时候，在组件的调用标签中间传递了什么样的标签结构，那件就会把我们传递的标签结构放在他的模板部分进行渲染.

this.nextTick()

就是当页面被重新渲染之后 才会执行回调函数中的代码

封装 axios

步骤：

1. 添加文件 utils/request.js
2. 在文件 utils/request.js 中 导入 axios 创建 axios 副本 设置 baseURL 设置 拦截器 导出 axios 副本

路由

路由跳转

声明式导航：1.标签跳转 router-link to="/home", 相当于一个 a 标签

编程式导航：2.js 跳转 this.$router.push(可以退回)/replace(覆盖 不可以退回)/go(数值)("/home")

router 和 route 的区别？

Router 是一个路由实例对象，包含了路由跳转和钩子函数 Route 是一个路由信息对象 包括：query 、params 、name。

vue-router 有哪几种导航守卫?

• 全局守卫
• 路由独享守卫
• 路由组件内的守卫

vue-router有哪几种导航钩子

全局守卫： 全局前置守卫beforEach(to ,from ,next)、 全局后置守卫afterEach(to,from,next) 组件守卫 ：beforRouterEnter(to ,from ,next)

独享守卫 ：beforEnter (to ,from ,next)

• beforeEach主要有3个参数to，from，next。
• to：route即将进入的目标路由对象。
• from：route当前导航正要离开的路由。
• next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转

vuex

是一个状态管理模式 五种属性：1.state：基本数据 2.getter：从基本数据派生的数据 3.mutation：提交更改数据的方法，同步！4.action： 像一个装饰器，包裹mutations，使之可以异步。5.module：模块化Vuex 为什么要用vuex: 组件和数据之间的对应关系，随着项目的复杂，变得混乱。所以需要统一管理数据，把数据的存取集中到一个地方，所有的组件都从这个地方取数据，更新数据也集中到同一个地方。

常用于：单页应用中，组件之间的状态。音乐播放、登陆状态、加入购物车

Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 中 ;如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用。

vuex工作流程：1.从API中拿数据，就会牵扯到异步操作，所以我们把异步操作定义在action中2.在组件触发一个action,action里面有一个ajax请求，去请求后端的一个接口3.用commit提交一个mutation拿到数据以后我们只需要改变state中的状态4.状态改变后vuex视图就会改变（因为vuex是响应式的）

计算属性computed

计算属性指的是通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或 methods 方法使用

特点：计算属性的本质是一个属性 计算属性会缓存计算的结果

计算属性computed和watch的区别：计算属性的依赖值改变会重新执行函数，计算属性是取返回值来作为最新的结果，所以里面不能异步的操作 watch函数的值改变watch重新执行，将一个值重新赋值作为最新结果，所以赋值的时候可以进行一些异步操作。

什么是深入响应式原理？

深入响应式原理是利用了数据劫持和订阅发布的模式, 当数据模型发生改变的时候， 视图就会响应的进行更新， 那么深入响应式原理是利用es5的Object.defineProperty中地getter/setter来进行数据的劫持的

两种路由模式hash路由和history路由

hash 模式：在浏览器中符号 “#” ，#以及#后⾯的字符称之为 hash ，⽤ window.location.hash 读取。特点： hash 虽然在 URL 中，但不被包括在 HTTP 请求中；⽤来指导浏览器动作，对服务端安全⽆⽤， hash 不会重新加载⻚⾯。

history 模式：history 采⽤ HTML5 的新特性；且提供了两个新⽅法：pushState() ， replaceState() 可以对浏览器历史记录栈进⾏修改，以及 popState 事件的监听到状态变更

什么是 watch 侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。1.可以通过 immediate 选项，让侦听器自动触发！！！

2. 可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！！！

vue 中 v-for指令循环遍历中key属性的作用?

Key属性的作用是在数据层和视图层之间建立一一对应关系，方便后期对页面进行局部更新.如果某一条数据发生改变，只更新当前数据对应的DOM元素.

Vue有哪些常用的事件修饰符?

.prevent:阻止默认事件;.stop:阻止冒泡;.once:事件执行一次;.self:只当在event.target是当前元素自身时触发处理函数

列举Vue中常用的指令

v-model:实现双向数据绑定;v-bind:绑定属性;v-on:注册事件;v-html:设置标签内容(允许内容 html)v-text:设置标签的内容(不允许包含html)v-clack:解决插值表达式闪烁问题V-for:循环遍历数组或对象

vue 中有何优化页面的加载效率?

使用路由懒加载和组件懒加载;不要打包一些公共的依赖(vue,组件库);使用CDN加载这些依赖文件

v-for 和 v-if 优先级

1、v-for 优先于 v-if 被解析 2、如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能 3、要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环 4、如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项

vue中keep-alive作用

keep-alive 可以将被包裹的组件暂存在内存当中，当页面切换的时候，组件不会被重复的销毁和创建，从而可以提高整体性能，同时也可以保存组件的一些状态.

图片懒加载是怎么实现的？

就是我们先设置图片的data-set属性（当然也可以是其他任意的，只要不会发送http请求就行了，作用就是为了存取值）值为其图片路径，由于不是src，所以不会发送http请求。 然后我们计算出页面scrollTop的高度和浏览器的高度之和， 如果图片距离页面顶端的坐标Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是其他情况），这时候我们再将 data-set 属性替换为 src 属性即可。

什么是SPA?

SPA(Single Page Application)，单页面应用程序,使用vue, react, angular创建的项目都属于SPA.因为整个项目只有一个页面，其他页面都是在该页面的基础上局部刷新而来的.

SEO优化的方法如下：

1.我感觉最好不要使用单页面应用，如Vue，React，它们在SEO方面是非常非常差的，这也是单页面应用最大的缺点，不过如果项目一定要有这两个需求。也有基于它们的框架可以解决这样的问题，如Vue的Nuxt.js

2.在每个页面的Head标签下的Meta标签进行设置合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可。

3.H5的语义化，符合W3C规范：语义化代码让搜索引擎容易理解网页

4.重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取

5.重要内容不要用js输出：爬虫不会执行js获取内容

6.少用iframe：搜索引擎不会抓取iframe中的内容

7.非装饰性图片必须加alt

8.提高网站速度：网站速度是搜索引擎排序的一个重要指标，爬虫不会一直在页面上等你加载

项目进行体积优化

图片压缩：此操作会压缩图片质量，选择使用。去除console：代码中 console.log 越多，效果越明显，可选择使用。

CDN加速：维护上不受控制，所以只把那些不可能改动的代码或者库分离出来，通过CDN加速加载。

开启Gzip压缩：gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度，可以减小60%以上的体积。注意：这个需要服务器配合开启Gzip，也可打包时不配置，直接在服务器端进行Gzip压缩。

GIT

列举工作中常用的git命令:

1.新增文件的命令：git add file或者git add .

2.提交文件的命令：git commit –m或者git commit –a

3.查看工作区状况：git status –s

4.拉取合并远程分支的操作：git merge

5.查看提交记录命令：git reflog

6.创建仓库：git init

7.查看仓库的状态：git status

8.这次相较上次修改了哪些内容：git diff

9.将添加的文件放到栈存区中：git add

10.将栈存区内容提交到代码区中：git commit

11.将远程仓库的代码克隆到本地：git clone git地址

12.查看当前分支：git branch

13.切换分支：git checkout.

如何在Git中创建存储库

要创建存储库，先为项目创建一个目录然后运行命令 git init。将在项目的目录中创建 .git 目录。

请写出查看分支、创建分支、删除分支、切换分支、合并分支的命令以及写出解决冲突的思路？

git branch 查看分支 git barnch -a查看所有的分支 git branch -r查看远程所有的分支 git checkout -b创建分支 git branch -d 删除分支 git checkout master 切换分支 git merge 合并分支

在主分支上进行了修改并提交 在次分支上进行了修改并提交 然后在合并的话会发生冲突 解决办法是： 在开发工具vscode中手动选择合并方式 一般都是双方都保留更改 冲突只发生在共同的地方

请写出将工作区文件推送到远程仓库的思路？

用命令行将本地仓库推送到远程仓库。 首先先创建一个远程仓库待用，然后在本地建立git版本管理，在项目目录下进行以下操作 git init 项目目录下会多一个.git文件 git add . 添加所有文件 git commit -m“first commit” 提交文件 git remote add origin //添加到远程仓库 git push -u origin master //第一次推送到远程仓库需要 -u，将本地master推送到远程master，以后就直接Git push 就好了

git跟其他版本控制器有啥区别？

GIT是分布式版本控制系统，其他类似于SVN是集中式版本控制系统。 分布式区别于集中式在于：每个节点的地位都是平等，拥有自己的版本库，在没有网络的情况下，对工作空间内代码的修改可以提交到本地仓库，此时的本地仓库相当于集中式的远程仓库，可以基于本地仓库进行提交、撤销等常规操作，从而方便日常开发。

Ajax的工作原理是什么？

• Ajax是一种异步获取数据的技术，它的原理是通过XmlHttpRequest对象来向服务器发送异步请求，类似一个中间层，负责请求数据，而不影响浏览器其他事件执行，等到数据回来之后再通知浏览器，浏览器再进行处理

• Ajax的使用步骤

  • 1·新建一个XMLHttpRequest对象 let xhr = new XMLHttpRequest()
  • 2·使用open 和send方法发送请求 xhr.open(url:xxx,methods:xxx) xhr.send()
  • 3·使用onload注册回调 ，xhr.οnlοad=function(){}
  • 4·根据服务器返回的结果做响应的处理 xhr.responseText

HTTP协议

http常见的状态码有哪些？

1：什么是HTTP协议： 它是单向的：基于请求-应答模式的协议 它是无状态的：服务器对客户端的请求做出的事务处理不带二和记忆性，每次都是重新处理。 它是基于 TCP/IP 的可靠超文本传输协议

1. 状态码分类

状态码 对应状态描述 1xx 服务器收到请求 2xx 表示成功处理请求，如200 3xx 需要重定向，浏览器直接跳转，如301，302,304 4xx 客户端请求错误，如404，403 5xx 服务器端错误，如500

100 =>正在初始化(一般是看不到的) 101 =>正在切换协议(websocket浏览器提供的) 200或者以2开头的两位数=>都是代表响应主体的内容已经成功返 回了 202=>表示接受 301 =>永久重定向/永久转移 302 =>临时重定向/临时转移（一般用来做服务器负载均衡> 304 =>本次获取的内容是读取缓存中的数据，会每次去服务器校验 400=>参数出现错误（客户端传递给服务器端的参数出现错误) 401 =>未认证，没有登录网站 403 =>禁止访问，没有权限 404 =>客户端访问的地址不存在

HTTP请求方式

1 GET

发送请求来获得服务器上的资源，请求体中不会包含请求数据，请求数据放在协议头中。另外get支持快取、缓存、可保留书签等。幂等

2 POST

和get一样很常见，向服务器提交资源让服务器处理，比如提交表单、上传文件等，可能导致建立新的资源或者对原有资源的修改。提交的资源放在请求体中。不支持快取。非幂等

3 HEAD

本质和get一样，但是响应中没有呈现数据，而是http的头信息，主要用来检查资源或超链接的有效性或是否可以可达、检查网页是否被串改或更新，获取头信息等，特别适用在有限的速度和带宽下。

4 PUT

和post类似，html表单不支持，发送资源与服务器，并存储在服务器指定位置，要求客户端事先知道该位置；比如post是在一个集合上（/province），而put是具体某一个资源上（/province/123）。所以put是安全的，无论请求多少次，都是在123上更改，而post可能请求几次创建了几次资源。幂等

5 DELETE

请求服务器删除某资源。和put都具有破坏性，可能被防火墙拦截。如果是https协议，则无需担心。幂等

6 CONNECT

HTTP/Ip协议中预留给能够将连接改为管道方式的代理服务器。就是把服务器作为跳板，去访问其他网页然后把数据返回回来，连接成功后，就可以正常的get、post了。

7 OPTIONS

获取http服务器支持的http请求方法，允许客户端查看服务器的性能，比如ajax跨域时的预检等。

8 TRACE

回显服务器收到的请求，主要用于测试或诊断。一般禁用，防止被恶意攻击或盗取信息。

get和post的区别主要有以下几方面：

1、url可见性：

get，参数url可见；

post，url参数不可见

2、数据传输上：

get，通过拼接url进行传递参数；

post，通过body体传输参数

3、缓存性：

get请求是可以缓存的

post请求不可以缓存

4、后退页面的反应

get请求页面后退时，不产生影响

post请求页面后退时，会重新提交请求

5、传输数据的大小

get一般传输数据大小不超过2k-4k（根据浏览器不同，限制不一样，但相差不大）

post请求传输数据的大小根据php.ini 配置文件设定，也可以无限大。

6、安全性

这个也是最不好分析的，原则上post肯定要比get安全，毕竟传输参数时url不可见，但也挡不住部分人闲的没事在那抓包玩。安全性个人觉得是没多大区别的，防君子不防小人就是这个道理。对传递的参数进行加密，其实都一样。

一次完整的HTTP请求从客户端到服务器端所经过的各个环节

1. 浏览器会去请求DNS服务器，获得与域名相对应的IP
2. 三次握手，建立TCP连接，形成一个Session会话
3. 浏览器发送request包，服务器接收后对其进行解析。如果请求资源包含动态语言的内容，服务器将会调用动态语言的解释引擎进行解释。
4. 请求被转发给一个预定义的Handler（处理器）。并可能从数据库里取出数据。
5. 处理器根据取出的数据对Template(模板)进行Rander(渲染)
6. 返回Response对象
7. 浏览器会渲染Response包里的主体。而且直到接收完Response包前，浏览器和服务器的TCP连接将保持连接。

http常见的header有哪些？

1：Request Headers

Accept 浏览器可接受的数据格式 Accept-Encoding 浏览器可接收的压缩算法，如 gzip Accept-lanuage 浏览器能接收的语言 Connection: keep-alive 一次TCP连接重复使用(一次连接，多次使用） cookie 非跨域请求都会带上 Host请求的域名 User-Agent(简称 UA)发出请求的客户端，浏览器信息 Content-type 发送方数据的格式，如application/json

请求拦截器（在请求之前进行一些配置）

响应拦截器（在响应之后对数据进行一些处理）

2:：Response Headers

Content-type返回数据格式，如application/json Content-length 返回数据的大小，多少字节 Content-Enconding 返回的数据的压缩算法，如gzip set-cookies:服务端修改的cookie

3：缓存相关的headers（下面有详细说明）

• Cache-Control
• Expires (不常用)
• Last-Modified(响应头中携带)
• If-Modified-Since（请求头中携带）
• Etag(响应头中携带)
• If-None-Match(请求头中携带)

描述一下http的缓存机制(重要)?

1：为什么需要缓存： 网络请求相较于CPU计算以及页面渲染速度都较为缓慢，故性能优化及加快页面显示都应从网络请求这下手，最大化减少网络请求的体积和数量

2：可被缓存的资源： 静态资源(js css img)

写在前面，http缓存机制主要在http响应头中设定，响应头相关字段为Cache-Controls,Expires, Last-Modified/If-Modified-Since,Etag/If-None-Match

3：http强制缓存：Cache-Control

4：协商缓存(对比缓存)：Etag和Last-Modified-http

TCP协议

1. TCP/IP四层模型，各层的结构、功能、协议、作用 应用层 ： 提供应用层服务，文件传输(FTP), 电子邮件(SMTP),HTTP(超文本传输协议），DNS(域名系统），telnet(远程登陆服务) 传输层： TCP 、 UDP 网络层： IP, ICMP(用于在IP主机、路由器之间传递控制消息) ,OSPF(用于网际协议(IP)网络的链路状态路由协议，用于IP选路) 物理链路层：ARP（地址解析协议，根据IP地址获得MAC地址）

2. TCP和UDP TCP是传输控制协议，提供的是面向连接的、可靠的字节流服务。实际的数据传输之前，服务器和客户端要进行三次握手，会话结束后结束连接。 UDP是用户数据报协议，是无连接的，传输速度很快，可以用于实时视频。 TCP保证数据按时到达，提供流量控制和拥塞控制，在网络拥堵的时候会减慢发送字节数，而UDP不管网络是否拥堵。 TCP是一对一服务(是连接的)，而UDP可以一对一、一对多、多对多。

1.$nextTick()

方法的作用 就是当页面被重新渲染之后 才会执行回调函数中的代码

在为input设置自动获取焦点功能时候 有一个添加商品参数的按钮 点击可以变为输入框 当时是设置一个值控制按钮和输入框的切换 直接为input设置一个自动获得焦点功能 直接设置的话 报错 因为 刷新页面 是按钮状态 input元素还没有重新渲染 所以用nextTick()等带点击按钮变为输入框页面已重新渲染此时可以执行nextTick() 等带点击按钮 变为输入框 页面已重新渲染 此时可以执行nextTick()等带点击按钮变为输入框页面已重新渲染此时可以执行nextTick() 里面的输入框自动获得焦点功能

2.使用upload组件时候

在使用upload组件上传图片 点击上传以后 图片虽然已经在页面上显示 通过network发现 上传的图片并没有真正上传成功 后台的Preview中 返回无效token", status: 400 发现因为没有使用axios挂载的拦截器 在upload 组件的属性中发现有一个 headers属性 可以设置上传的请求头部 所以在headers属性身上绑定 请求头 Authorization: window.sessionStorage.getItem('token'),

loadsh cloneDeep(obj) 进行深拷贝

在执行添加的业务逻辑时 定义了一个添加商品的表单数据对象 此时要把表单数据对象上边的一个goods_cat数组转化为字符串 因为之前一个级联选择器上v-model绑定了表单数据对象上的goods_cat数组 不能直接转化 不然报错 因此安装一个loadsh依赖 上边有一个cloneDeep(obj)属性 用它0把原来的表单数据对象再重新深拷贝 然后重新赋值给一个新对象就解决了。