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-size2.font-family3.color4.text-indent不可继承的样式：1.border2.padding3.margin4.width5.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 = 1return funciton B(){console.log(a)}}1.使用闭包可以访问函数中的变量。2.可以使变量长期保存在内存中，生命周期比较长。闭包不能滥用 否则会导致内存泄漏 影响网页的性能 闭包使用完了后，要立即释放资源，将引用变量指向null。
js中undefined 和 not defined区别
undefined 定义了变量但是没有赋值not defined 没有定义 忽然冒出来
js中如何清除数组，操作数组的方法有哪些
splicearr.splice(0,arr.length)length赋值为0arr.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) 依据判断条件，数组的元素是否全满足，若满足则返回turearr.some() 依据判断条件，数组的元素是否有一个满足，若有一个满足则返回turearr.reduce(callback, initialValue) 迭代数组的所有项，累加器，数组中的每个值（从左到右）合并，最终计算为一个值arr.indexOf() 查找某个元素的索引值，若有重复的，则返回第一个查到的索引值若不存在，则返回 -1arr.lastIndexOf() 和arr.indexOf()的功能一样，不同的是从后往前查找Array.from() 将伪数组变成数组，就是只要有length的就可以转成数组。 ---es6Array.of() 将一组值转换成数组，类似于声明数组 ---es6
js动态添加新元素
1.document.write()2.Element.innerHTML3.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请求方式 参数类型 状态码
请求方式getpost $.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，next5、如果不调用next ，管道就会终止，不会再有处理器做后续响应，应该向客户端发送一个响应6、如果调用了next，不应该发送响应到客户端，如果发送了，则后面发送的响应都会被忽略7、中间件的第一个参数可以是路径，如果忽略则全部都匹配
node中间件分类
什么情况下会产生跨域问题 怎么解决 有几种方式
浏览器同源策略问题 解决方法nodejs中间件代理跨域jsonp代理nginx代理跨域
cors请求分类
1) http方法PUT 、DELETE、OPTIONS、PATCH、TRACT、CONNECT2) 包含CORS头部字段以外的其他字段Content-Language 、DPR、Downlink、Save-Data、Viewport-Width、Width3) Content-Typeapplication/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 putAxios 提供了一个 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模式 部署需要注意什么
nginxtry_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（手动或自动更新）
项目上线要做那些优化
格式化代码移除 consolevue项目打包之开发环境和部署环境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 栈放弃本地修改撤销分支强行冲掉之前的分支删除分支
