前端面试题内容总结

什么是DOM
文档对象模型，DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。
什么是BOM
BOM是浏览器对象模型，他提供了独立于内容与浏览器窗口进行交换的对象，核心对象是window,BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性

innerText和innerHTML的区别
获取内容是的区别：
innerText会去除空格和换行，而innerHTML会保留空格和换行
设置内容时的区别：
innerText不会识别HTML，而innerHtML会识别

复制（克隆）节点
cloneNode()
如果括号参数为空或者false，则为浅拷贝，只克隆复制节点本身，不克隆里面的子节点
如果括号参数为true，则为深拷贝，会复制节点本身及里面所有的子节点
DOM创建元素的三种方式
document.write()
document.innerHTML
documnet.createElement

this指向问题
1.全局作用域或者普通函数中this指向全局对象window（定时器里面的this指向window）
2.方法调用中谁调用this指向谁
3.构造函数中this指向构造函数实例

success方法一定要先打印后端返回的数据
打印出的结果只有两种：
1.数组，里面每个单元都是一个对象（就是一条数据）—>{{each}} $value {{/each}}
2.对象，就是一条数据

使用ajax四部
1.实例化ajax对象
2.调用open方法准备ajax请求
3.调用send方法发送ajax请求
4.调用onload方法接收服务端返回的数据

onreadystatechange 和 readyState(Ajax状态 0- 4）
onreadystatechange用来监听readyState值变化的 0-1 1-2 2-3 3-4

如果发送的请求是post请求时的参数
1.发送数据格式application/x-www-form-urlencoded: key1=value
2.发送数据格式application/json: JSON.stringify({name:‘zs’,age:20})
3.发送数据格式FormData: 什么都不用管

主流浏览器：chrmoe\firefox\saifiar…IE 7 以上
非主流浏览器：IE 7 以下

主流浏览器实例化xhr对象的方法：var xhr = new XMLHttpRequest();
非主流浏览器实例化xhr的方法：var xhr = new ActiveXobject(‘Microsoft.XMLHTTP’);

判断window对象中有没有XMLHttpResquest对象
function createXhr() {
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);
}
return xhr;
}

vue生命周期
最常用的是created和mounted
创建
1.beforeCreate 创建前不可更改数据
2.created 创建后可以更改数据
挂载（初始化相关属性）
1.beforeMount
2.mounted
更新（元素或组件的变更操作）
1.beoforeUpdate
2.update
销毁
1.beforeDestroy
2.destroyed

执行顺序
如何避免git冲突
不要让不同的人改同一份文件

什么是数据解构
解构是ES6语法新增功能，可以分为数组解构，对象解构，对象解构var/let/const｛属性名｝= 对象名，可直接拿到对象属性值的内容，

什么是SPU和SKU
SPU – 苹果笔记本mac pro 基本信息
SKU – mac pro 512G 16G白色 详细信息

什么是计算属性computed
把原有的数据在做了一次处理

深拷贝与浅拷贝
浅拷贝：如果原始对象涉及嵌套，那不会对嵌套的对象进行拷贝，只会保留之前对象的引用
深拷贝：不管对象嵌套了多少层，都会连根拔起，全部拷贝

项目优化实现步骤：
A.生成打包报告，根据报告优化项目
B.第三方库启用CDN
C.Element-UI组件按需加载
D.路由懒加载
E.首页内容定制

ES6的语法都有什么
let const 没有变量提升，具有块级作用域
数据结构{name:username} = promise
扩展运算符…[1,2,3]，可以拆分数组
class类
箭头函数
promoise then回调地狱
模板字符串
set集合，可以实现数组去重

Vue是什么
vue是一套用于构建用户界面的渐进式框架

什么是双向数据绑定
当数据发生变化的时候，视图也会发生改变
当视图发生变化的时候，数据也会发生改变

Webpack中loader是啥
loader（加载器），webpack支持通过loader的方式转换应用程序的资源文件，而我们的模板文件页需要对应的loader去进行加载，才能支持我们的开发

说说vue的生命周期、有一个子组件一个父组件先执行谁的周期
加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
父beforeUpdate->父updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

什么是CSRF攻击，如何防范
csrf攻击跟xss攻击很像，危害极大，攻击者会盗用你的身份，以你的名义发送恶意请求，以你的名义发送邮箱，消息，盗取你的账号，甚至于购买商品，虚拟货币转账等
csrf攻击防范的措施可以在客户端页面增加伪随机数

封装axios请求作用
统一接口调用规则，封装axios可以设置环境切换，设置请求超时，post请求头设置，请求拦截，响应拦截，设置token，判断token是否过期
封装get、post请求，使用promise
接口统一管理export 导出接口，需要用的组件使用import { 文件名 } from 路径

如何是实现一个深拷贝，深拷贝可以拷贝function吗？如何实现？
JSON.parse(JSON.stringify())实现深拷贝，缺点：会忽略undefined，symbol，不能序列化函数，不能解决循环的引用对象,处理复杂数据类型可以使用lodash库中的_.cloneDeep
如何判断一个是不是一个函数类型
typeof，类型判断instanceof

vue-router使用
vue-router有哪几种导航钩子
1.全局守卫：router.beforeEach 2.router.beforeResolve 3.全局后置钩子：router.afterEach 4.路由独享守卫：beforeEnter
vue-router导航解析流程
1.导航被触发 2.在失活的组件里调用离开守卫 3.调用全局的beforeEach守卫 4.在重用组件里调用beforeRouteUpdate守卫 5.在路由配置里调用beforeEnter 6.解析异步路由组件 7.在被激活的组件里调用beoferRouterEnter 8.调用全局的beforeResole守卫 9.导航被确认 10.调用全局afterEach钩子 11.触发DOM更新 12.用创建好的实例调用beforeRouterEnter守卫传给next的回调函数

promise项目中使用
axios封装请求拦截、响应拦截
环境切换，判断开发环境、测试环境、线上环境 axios.defaults.baseURL
设置请求超时 axios.defaults.timeout
设置请求头： axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded;charset=UTF-8’
设置请求拦截： axios.interceptors.request.use() 每次发送请求之前判断vuex中是否存在token，如果存在，则统一在http请求的header上加上token，判断登录状态
设置响应拦截：axios.interceptors.response.use() 判断状态码，401未登录，403 token过期，跳转到登录页，404请求不存在

函数解构可以解构函数吗

图片懒加载原理细节
动态渲染图片的src，实现原理：加载loading图片，判断哪些图片要加载，获取元素到浏览器的顶部距离，获取屏幕可视高度，获取滚动值，屏幕可视高度+滚动着值>元素到浏览器的顶部距离时，替换元素的src

webpack核心概念
入口（entry） 输出（output） loader 插件（plugins）
entry: 配置路径
output：配置输出，path路径 filename：bundle.js，需要使用path
mode：默认是否需要压缩混淆