前端面试题个人总结css js html vue jQuery node axios ajax

HTML/css

什么是<! DOCTYPE >?是否需要在HTML5中使用?

1.文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

Html5有哪些新特性、移除了哪些元素?

2.新特性 绘画 本地存储localStorage 事件监听
移除
纯表现的元素
  <basefont> 默认字体，不设置字体，以此渲染
  <font> 字体标签
  <center> 水平居中
  <u> 下划线
  <big> 大字体
  <strike> 中横线
  <tt> 文本等宽
框架集
  <frameset>
  <noframes>
  <frame>

HTML5中的Session storage 存储对象是什么?如何创建和访问?

3.Session storage 存储对象存储一个会话的数据。当用户关闭浏览器窗口时，数据将被删除。

LocalStorage 本地存储在HTML5中有什么用途?

4.轻量级的sqllite数据库。可以在客户端本地存储数据，用于在断开网络连接的情况下读取本地缓存cookies，LocalStores可以将数据长期保存在客户端，直至人工清除为止，

HTML 和XHTML有什么区别?

5.XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

页面导入样式时，使用link和@import有什么区别?

6.　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
　　区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有哪些?

7.CSS 选择符：
1.id选择器(# myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a: hover, li:nth-child)
可继承的样式：
1.font-size
2.font-family
3.color
4.text-indent
不可继承的样式：
1.border
2.padding
3.margin
4.width
5.height
优先级算法：
1.优先级就近原则，同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important >  id > class > tag  
4.important 比 内联优先级高，但内联比 id 要高
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

介绍一下CSS的盒子模型?

8.盒子模型 margin border padding content

Typeof的作用是什么?

9.typeof 返回一个值的数据类型

在CSS中哪个属性会影响DOM读取文档流的顺序?

10.writing-mode unicode-bidi  direction

行内元素有哪些?块级元素有哪些?空元素有哪些?

11.行内元素 span a i b strong
块级元素 div p h1-h6 ul dl ol table form
空元素 br hr input img link meta

img的 title和alt有什么区别?

12.alt属性的实质是通过文字来代替图片的内容，而title属性的实质是对图片的描述或者注释。

var、 let 和const的区别?

13.var全局变量 let const 块级变量 其次 var可以变量提升 而 let const 不可以 const 必须赋值  且只能声明一次

请用HTML知识解决seo优化问题?

14.布局合理 没有多余代码即可

CSS 优先级算法如何计算?

15.id权重100 class权重10 元素伪元素1 @impornt 10000 *为0

CSS3 有哪些新特性?

16.border-radius圆角 border-image边框图像  box-shadow阴影
background-clip 规定背景的绘制区域.
background-origin 规定背景图片的定位区域。
background-size	规定背景图片的尺寸。
动画@keyframes 规则

JavaScript/jQuery

介绍下JavaScript的基本数据类型

Number、String、Boolean、Null、undefined、symbol

js中this在各种情况下指向

函数调用指向window
方法调用指向绑定对象身上

js面向对象的几种方法

工厂方式 构造函数方式 原型模式 混合的构造函数原型方式（推荐） 动态原型方式

什么是闭包，为什么要用它

闭包是就是函数中的函数，里面的函数可以访问外面函数的变量，外面的变量的是这个内部函数的一部分。
funciton A(){
 var a = 1
  return funciton B(){
 	 console.log(a)
 	}
}
1.使用闭包可以访问函数中的变量。
2.可以使变量长期保存在内存中，生命周期比较长。
闭包不能滥用 否则会导致内存泄漏 影响网页的性能 闭包使用完了后，要立即释放资源，将引用变量指向null。

js中undefined 和 not defined区别

undefined 定义了变量但是没有赋值
not defined 没有定义 忽然冒出来

js中如何清除数组，操作数组的方法有哪些

splice
arr.splice(0,arr.length)

length赋值为0
arr.length = 0

赋值为[]
var arr = [1,2,3,4,5]
arr = []
操作数组方法
arr.push() 从后面添加元素，返回值为添加完后的数组的长度
arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素
arr.shift() 从前面删除元素，只能删除一个 返回值是删除的元素
arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度
arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素
arr.concat() 连接两个数组 返回值为连接后的新数组
str.split() 将字符串转化为数组
arr.reverse() 将数组反转,返回值是反转后的数组
arr.slice(start,end) 切去索引值start到索引值end的数组，不包含end索引的值，返回值是切出来的数组
arr.forEach(callback) 遍历数组,无return  即使有return，也不会返回任何值
arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组 。
arr.filter(callback) 过滤数组，返回一个满足要求的数组 
arr.every(callback) 依据判断条件，数组的元素是否全满足，若满足则返回ture
arr.some() 依据判断条件，数组的元素是否有一个满足，若有一个满足则返回ture
arr.reduce(callback, initialValue) 迭代数组的所有项，累加器，数组中的每个值（从左到右）合并，最终计算为一个值
arr.indexOf() 查找某个元素的索引值，若有重复的，则返回第一个查到的索引值若不存在，则返回 -1
arr.lastIndexOf()   和arr.indexOf()的功能一样，不同的是从后往前查找
Array.from() 将伪数组变成数组，就是只要有length的就可以转成数组。 ---es6
Array.of() 将一组值转换成数组，类似于声明数组    ---es6

js动态添加新元素

1.document.write()
2.Element.innerHTML
3.document.createElement()

js中的深拷贝和浅拷贝

浅拷贝引用地址不变
深拷贝引用地址改变新数组 深拷贝方法 递归 json对象 通过object.assign拷贝

.html .value .text方法的区别

text() 方法方法设置或返回被选元素的文本内容
html() 方法返回或设置被选元素的内容 (inner HTML)，包括标签。
value()方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

js中和=的区别

==  两边值类型不同的时候，要先进行类型转换，再比较。 
=== 不做类型转换，类型不同的一定不等。

js中变量类型

值类型：Number、String、Boolean、Null、undefined、symbol
引用类型：对象（Object）、数组（Array）、函数（Function）

说说你对语义化的理解

页面呈现出清晰的结构
有利于seo
方便其他设备解析
便于团队开发和维护

为什么利用多个域名来提供网站资源会更有效

1. CDN缓存更方便。
2. 突破浏览器并发限制。
3. Cookieless, 节省带宽，尤其是上行带宽 一般比下行要慢。

js作用域链是什么及其作用

当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

列举出js中的一些设计模式

单例模式
工厂模式
适配模式
外观模式

解释一下什么是promise 三种状态

promise出现的目的一为处理JavaScript里的异步，再就是避免回调地狱。
pending就是未决，resolve可以理解为成功，reject可以理解为拒绝。

解释一下箭头函数 使用时需要注意什么

箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。
箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域，谁定义的函数，this指向谁

列举jQuery中的选择器

id class * (div span)div后面的span标签

jQuery中如何阻止事件冒泡

event.stopPropagation

jQuery中get与post区别

get请求数据 请求数据会体现在url后面 会被缓存 有长度限制  
post 提交数据 提交的数据可以在请求体中查看 刷新会被重复提交  post相比较安全

node.js Ajax axios

什么是node.js 简述一下node.js适用场景

中间层

什么是http协议无状态协议 怎么解决

无状态协议对于事物处理没有记忆能力，也就是说，当客户端第一次像服务器发送http请求完成之后，再一次像服务器发送http请求，服务器并不知道该客户端是一个老用户
解决办法是携带Cookie,Cookie相当于是一个通行证，当客户端第一次像服务端发送http请求时，服务端向客户端返回一个cookie，当客户端再次发送http请求时携带该cookie，于是服务端便知道该客户端是一个老用户了

如何取出树形结构的数据 前端如何显示树形结构数据

Ajax请求方式 参数类型 状态码

请求方式
get
post 
$.ajax()返回其创建的 XMLHttpRequest 对象 
通过 HTTP GET 请求载入 JSON 数据。
参数类型
json格式
json字符串格式
标准参数模式
状态码
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了

Ajax fetch axios区别

ajax主要针对mvc使用 
axios 更符合现在mvvm潮流 支持 Promise API 提供了一些并发请求的接口 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据
fetch 兼容不太好

nodejs中模块加载顺序

一种是按路径加载，一种是查找 node_modules 文件夹。

node的中间件什么意思 注意事项是什么

1、中间件就是一种功能的封装方式，就是封装在程序中处理http请求的功能，
2、中间件是在管道中执行
3、中间件有一个next()函数，如果不调用next函数，请求就在这个中间件中终止了，
4、中间件和路由处理器的参数中都有回调函数，这个函数有2,3,4个参数
                        如果有两个参数就是req和res；
                        如果有三个参数就是req,res和next
                        如果有四个参数就是err，req，res，next
5、如果不调用next ，管道就会终止，不会再有处理器做后续响应，应该向客户端发送一个响应
6、如果调用了next，不应该发送响应到客户端，如果发送了，则后面发送的响应都会被忽略
7、中间件的第一个参数可以是路径，如果忽略则全部都匹配

node中间件分类

什么情况下会产生跨域问题 怎么解决 有几种方式

浏览器同源策略问题 
解决方法
 nodejs中间件代理跨域
 jsonp代理
 nginx代理跨域

cors请求分类

1)  http方法
PUT 、DELETE、OPTIONS、PATCH、TRACT、CONNECT
2) 包含CORS头部字段以外的其他字段
Content-Language 、DPR、Downlink、Save-Data、Viewport-Width、Width
3) Content-Type
application/x-www-form-urlencoded、multipart/form-data、text/plain

jwt的每个部件是什么意思

node内置模块都有什么

fs模块就是文件系统模块，负责读写文件 fs同时提供了同步异步的方法
path模块 ：用于处理文件路径。
until模块 :弥补js功能不足，新增API。
events模块 events 模块只提供了一个对象: events.EventEmitter。
http模块
jade是一款高性能、简洁易懂的模板引擎。可通过jade来编写html文件。
Express是一个nodejs的web开源框架，用于快速的搭建web项目。

axios是什么 怎样使用他 怎么解决跨域问题

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
npm i axios
进行get post请求
通过向axios传递的相关配置来创建请求axios(config)
配置默认值default
执行多个并发
拦截器
封装
引入使用
配置代理
在config文件夹下的index.js文件中的proxyTable字段中

axios请求方式有哪些 如何中断axios请求

get post delete put
Axios 提供了一个 CancelToken的函数，这是一个构造函数，该函数的作用就是用来取消接口请求的。

axios怎么同步调用异步调用 如何将axios异步请求同步化处理

async异步+await同步

module.exports和exports有什么区别

exports只能使用语法来向外暴露内部变量
module.exports既可以通过语法，也可以直接赋值一个对象。

什么是回调地狱 如何阻止回调地狱

一个异步请求套着一个异步请求，一个异步请求依赖于另一个的执行结果，使用回调的方式相互嵌套。
不利于代码维护
promise语法出现就是为了解决回调地狱问题的
允许将回调函数的嵌套，改成链式调用。

解释js事件委托模型

事件委托就是子元素的事件委托给父级来执行

vue

vue双向绑定如何实现？vue如何实现自定义事件？vue如何实现请求？vue的路由指令

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
封装好组件
引入组件地址 
用axios请求
router-link router-view设置组件渲染的部分
v-if v-show v-else v-on v-moudel v-text v-html v-for v-bind

前端怎么传给后端json数据

转换成json字符串 传入

v-on可以绑定多个方法吗

可以 用逗号隔开

v-for循环中key有什么作用

提高渲染性能 key属性可以避免数据混乱出现

v-show和v-if区别 使用场景

v-show 通过display：none 来根据条件是否隐藏
v-if 通过条件判断 不符合直接销毁节点 代价大
经常使用用v-show 偶尔使用 用v-if

v-clock和v-pre理解

v-clock 防止页面加载时出现 vuejs 的变量名
v-pre 跳过这个元素和它的子元素的编译过程

v-once使用场景

v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

vue3.x新特性

Object.defineProperty -> Proxy

vue如何实现表单验证

element-ui使用:rules prop设置需要验证的字段名

diff算法

Diff算法有三大策略： 
Tree Diff 是对树每一层进行遍历，找出不同
Component Diff 是数据层面的差异比较
Element Diff 首先进行第一层比较，第一层都是R，不发生变化；然后进入第二层Component Diff，发现A组件没有，则删除A及其子组件B、C；最后比较第三层，创建A及其子组件B、C。当节点处于同一层级时，Diff提供三种DOM操作：删除、移动、插入。

vue计算属性和watch有什么区别

具有缓存 计算属性有get set 当数据变化是 对应的数据进行计算
watch没有缓存数据执行异步 或者开销比较大的时候使用watch 监听机制+事件监听

vue过滤器是什么

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 
filters |

vue生命周期钩子函数 beforeMount 和mount的区别

beforemount还没有生成到html页面
mounted 已经渲染到html页面

vue组件间传值

父传子props 子传$emit $on 兄弟传值eventbus

vue阻止事件冒泡

.stop

自定义按键修饰符怎么使用

Vue.config.keyCodes.名称 = 按键值

vue怎么动态处理属性

v-module this指向

vue动态绑定样式

v-bind

获取元素焦点是什么

focus

局部组件和全局组件的区别

全局组件无法访问局部组件

插槽有几种 详细说明

匿名插槽 命名插槽 作用域插槽

异步调用需要用到什么关键词

async 需要等await调用返回才开始

怎么在路径上拼接请求参数

`` ${}

vue-router 是用来做什么的 它有哪些组件 说说你对router-link的了解

是页面跳转 通过path配置 router-view router-link 相当于一个a标签

vue-router 懒加载是什么 动态路由是什么

结合 Vue 的异步组件 (opens new window)和 Webpack 的代码分割功能 (opens new window)，轻松实现路由组件的懒加载。
path里面设置:需要的字段名

声明式路由和编程式路由区别

声明式 页面嵌套子路由不跳转页面
编程式路由 会刷新页面 可以通过 go回退

vue-router路由有几种模式 说说他们区别

hash hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
history 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。害怕刷新

如果vue-router使用history模式 部署需要注意什么

nginx
try_files $uri $uri/ /index.html;
重定向到主页面

route和router有什么区别

$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。
$router对象是全局路由的实例，是router构造方法的实例。

什么场景下会用到嵌套路由

二级菜单 tab标签页

vuex有几个属性 分别是什么作用

1. state：vuex的基本数据，用来存储变量
2. geeter：从基本数据(state)派生的数据，相当于state的计算属性
3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

为什么使用vuex 优势是什么

能够在vuex中集中管理共享的数据,易于开发和后期维护
能够高效的实现组件直接得数据共享,提高开发效率
储存在vuex中的数据都是响应式的,能够实现数据与页面的同步

vuex的store有几个属性值 他们的作用分别是什么

1. state：vuex的基本数据，用来存储变量
2. geeter：从基本数据(state)派生的数据，相当于state的计算属性
3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

vuex中action和mutation的特性是什么 有什么区别

mutation 专注于修改State，理论上是修改State的唯一途径。同步提交
action 业务代码、异步请求mutation。

页面刷新后vuex的数据丢失怎么解决

将vuex中的数据直接保存到浏览器缓存中
在页面刷新的时候再次请求远程数据，使之动态更新vuex数据

有使用过vuex的module吗 主要在什么场景下使用

将store拆成模块
团队人数多的时候 既保证store了完整的状态树，又避免了相互之间的state冲突

什么是脚手架 vue-cli提供了哪几种脚手架模板

Vue的脚手架工具 搭建好目录 
好像有个simple和完整版的

vue-cli怎么解决跨域问题

使用http-proxy-middleware

vue-cli默认是单页面怎么弄成多页面

下载依赖glob
修改build下的文件
修改config下的文件
在src目录下添加pages文件夹
打包

vue部署上线前需要做哪些工作

router 是不是hash 是否需要配置nginx , publicPath , 是不是要配置cdn

vue中用过echarts吗？踩过那些坑 如何解决的

有用过做城市宅基地面积用到  遇到的坑就是样式修改 因为数据是mock的 所以 柱状图宽度又比较粗 修改样式比较麻烦 最后找到对应的数组 去修改的width宽度

前端如何防止表单重复提交

submit按钮属性为disabled，然后当后台请求成功移除这个属性
点击的时候加一个class属性，然后js判定是否有这个class，如果有的话不再重复提交，

项目上线流程

生产构建：
　　1.合并（css module会为每一个module创建一个style节点，把所有的style合并为一个css文件）
　　2.抽取（把合并后的css文件从js中抽取出来）
　　3.压缩（js、css要压缩）
　　4.调试（开启soureMap，便于线上调试）
发布部署：
　　1.提交（前端提交到git库）
　　2.部署（服务端拉取前端打包后存放在git的代码部署，如果采用了阿里云等云部署工具也可前端完成）
　　3.开启gzip压缩（nginx配置）
　　4.更新CDN（手动或自动更新）

项目上线要做那些优化

格式化代码
移除 console
vue项目打包之开发环境和部署环境
vue项目减小打包的体积
路由懒加载
服务器文件压缩

webpack打包文件太大怎么办

去除不必要的插件
提取第三方库
代码压缩
代码分割
设置缓存

如何优化页面 加快页面的加载速度

使用良好的结构
不要使布局超载
不要使用图像来表示文本
检查cookie使用情况
不要包含不必要的 JavaScript 代码，尽可能将其外部化
尽可能避免使用表格
删除任何不必要的元素
按需加载 JavaScript 文件
优化 CSS 文件

http请求过多怎么解决

(1) 合并JS、CSS文件 (2) 合并图片css sprite (3) 使用 Image maps (4) data嵌入图片：如base64 (5) 使用CDN，减少http请求头 Web安全

防抖节流是什么？

函数防抖是：当你频繁触发后，n秒内只执行一次
函数节流是：在固定的时间内触发事件，每隔n秒触发一次
应用场景
防抖
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器
节流
鼠标不断点击触发，mousedown(单位时间内只触发一次)
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用节流来让其在一定时间内触发一次

git解决冲突

git stash 栈
放弃本地修改
撤销分支
强行冲掉之前的分支
删除分支