前端面试题总结（一）

JavaScript基础、ES5、ES6

1. localStorage、sessionStorage、cookie 的区别？
   （1）数据存储有效期不同，localStorage始终有效，长期保存、sessionStorage仅在当前浏览器关闭前有效、cookie只在设置cookie过期时间前有效。
   （2）作用域不同，localStorage和cookie在同源不同窗口浏览器中共享数据、而sessionStorage不能在不同窗口中共享。
   （3）存储空间数据大小限制不同，cookie不能超过4K长度、sessionStorage和localStorage可达到5MB或更大的数据。
   （4）cookie在浏览器与服务器之间来回传递、localStorage和sessionStorage不会把数据发给服务器，只在本地保存。
2. http和https 的区别？
   （1）Http是明文传输，HTTPS通过SSL/TLS进行了加密。
   （2）Http端口是80，HTTPS端口是443。
   （3）HTTPS需要到CA申请证书，一般没有免费的，需要花钱。
   （4）HTTPS连接很简单，是无状态的，HTTPS是通过SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比HTTP安全。
3. HTTP通信有什么问题？
   （1）通过使用明文（未加密），内容可能被监听。
   （2）不验证通信方的身份，因此有可能遭遇伪装。
   （3）无法证明报文的完整性，所以可能遭篡改。
4. 解决跨域的方法？
   （1）jsonp跨域，jsonp跨域利用了Ajax请求会受到同源策略限制，而script标签不会这一点来绕过同源策略，只在get请求的时候有用，基本不会去使用这种方法。
   （2）服务端设置cors跨域。
   （3）代理跨域，需要去修改Nginx等的配置，在前后端分离项目时在webpack中设置代理跨域（node做了一次请求转发，我是这么理解的）。
5. 从输入url到页面展示中间发生了什么（综合性问题）？
6. 原型原型链理解？
   （1）原型对象的作用就是存放共同的属性、方法，可以大大减少内存消耗。
   （2）在js中每个对象都隐式引用了__proto__ 对象，而每个__proto__ 这个对象又包含了一个 proto 对象，层层嵌套，直到__proto__为null。
7. 事件冒泡、事件捕获、事件委托？
   （1）事件冒泡：结构上嵌套关系的元素，会存在冒泡的功能，即同一事件，自子元素冒泡向父元素（自低向上）
   （2）事件捕获：结构上嵌套关系的元素，会存在事件捕获功能，即同一事件，自父元素捕获至子元素（事件源元素）自顶向下，ie没有捕获事件。
   （3）触发循序，先捕获后冒泡。
   （4）事件委托：
   ***优点1：性能，不需要循环所有的元素，一个个绑定事件。
   ***优点2：灵活，当有新的子元素时，不需要重新绑定事件。
8. 数组的一些方法？
9. eventloop？
10. promise和async/await的区别（他们解决了哪些问题，优缺点，还有哪些解决异步的方式）
    区别：
    （1）Promise的出现解决了传统的callback函数导致的“回调地狱“的问题。但它的语法导致它向纵向发展形成了回调链，遇到复杂的业务场景，这样的语法显然也不是很美观的。而 async await 代码看起来更简洁些，使得异步代码看起来像同步代码。await本质是可以提供等同于”同步“效果等待异步返回能力的语法糖。只有这一句执行完才会执行下一句。
    （2）async await 和 promise 一样，是非阻塞的。
    （3）async await 是基于 promise 实现的，可以说是改良版的 promise 。它不能用于普通的回调函数
11. 箭头函数this指向
    （1）普通函数的this指向它的调用者，如果没有则指向window对象.
    （2）箭头函数的this指向箭头函数定义时所处的对象，而不是箭头函数使用所在的对象，默认使用父级的this。
12. js中Array.splice()和Array.slice()方法有什么区别？
    （1）slice函数是取数组指定元素，slice(start, end)
    （2）splice函数是直接可以删除、增加、替换数组中的元素。splice(start, length, insert_ele_one… )。
13. js脚本延迟加载的方式有哪些？
    （1）defer属性。给js脚本添加defer属性，这个属性会让脚本的加载与文档的解析同步解析。然后在文档解析完成之后在执行这个脚本文件。
    （2）async属性，跟defer类似，但是他在下载完毕之后立即执行脚本。defer实在dom加载完之后执行脚本
    （3）为页面添加onload事件监听，只有页面加载完毕，才继续执行js脚本。
    （4）使用setTimeout延迟方法。设置一个定时器来延迟加载js脚本文件。
    （5）在框架中使用生命周期控制。如create，mounted等地方写入js
14. DOM和BOM的区别？
    （1）DOM是为了操作文档出现的API。document是其的对象。
    （2）BOM是为了操作浏览器出现的API。window是其的对象。
    （3）DOM是文档对象模型，BOM是浏览器对象模型。前者是对浏览器里的内容进行操作，后者是对浏览器本身进行操作。
15. js数据类型有哪些？
    （1）基本数据类型： undefined、null、number、string、boolean、symbol。基本数据类型是保存在栈当中。
    （2）引用数据类型：Object包含（Array， Date，Function、Math等），引用数据类型保存在堆当中。
16. js有哪几种弹窗？
    （1）alert
    （2）confirm，确定取消按钮
    （3）prompt
17. 为什么js要设计成弱类型语言？
18. js中typeof返回的数据类型有哪些？
    （1）除了null以外的原始数据类型。undefined、number、string、boolean、object、symbol。
19. 数组去重有哪些方法？代码如下

//方法1用es6的set方法
let arr = [1, 2, 2, 3, 3, 1, 6];
let set = new Set();
arr.forEach(item => set.add(item));
let result = Array.from(set);
console.log(result);
//方法2
let arr = [{ name: '1', value: 1 }, { name: '1', value: 1 }, { name: '2', value: 2 }];
let obj = {};
arr.forEach(item => obj[item.name] = item);
let newArr = [];
for (let k in obj) {
	newArr.push(obj[key]);
}
console.log(newArr);

20. 闭包的优缺点？
    （1）优点就是防止变量全局污染
    （2）缺点就是不能销毁该变量，导致内存泄漏。

21. 闭包理解
    （1）可以在函数外部访问函数内部的变量，换一种更广泛的说法就是可以 凡是访问函数内部的变量的都叫闭包。至于他的作用和缺点都是因为JS回收机制导致的，因为JS会在变量使用过后将其清理，但是闭包调用了函数的变量，所以函数的变量将会一直保存下来，又因为变量处于函数作用域中，变量的存储环境比较干净，不会被污染，所以闭包经常用来保存一个需要持久保存的变量。

22. 主流浏览器内核有哪些？
    （1）Webkit 代表作 Safari、老版本Chrome
    （2）Gecko 代表作 Firefox（火狐）
    （3）Blink 代表作 Chrome、Opera（欧朋）
    （4）Trident 代表作 IE内核

23. link 和 @import 的区别？

24. 有哪些数据结构？

25. websock是什么？websock的优缺点？使用场景？

26. 扩展运算符和剩余运算符区别？
    vue面试题

27. vue传参的方式
    路由传参：
    （1）通过params传参。
    （2）通过query传参。
    （3）通过hash传递。url中带有hash，例如 /detail/01#car。
    还有很多…

    组件传参
    （1）父传子，在父组件中在子组件上通过自定义属性传参，在子组件内通过props属性接受父组件传递的参数。
    （2）子传父，在子组件通过$emit触发自定义事件，在父组件中的该子组件上通过定义自定义事件，该事件的参数就是父组件传递过来的值。

28. 生命周期
    （1）vue实例从创建销毁的过程，也就是开始创建、初始化数据、编译模板、挂载DOM ->渲染、更新->渲染、卸载等一系列过程。我们称这是vue的声明周期。
    （2）vue声明周期总共分为8个阶段，分别为 创建前/后、载入前/后、更新前\后、销毁前\后。

29. vue 声明周期的作用是什么？
    （1）vue生命周期中有多个事件钩子，让我们在控制整个vue实例过程中更容易形成好的逻辑。

30. 第一次页面加载会触发哪几个钩子？
    （1）beforeCreate、created、beforeMounte、mounted（DOM渲染在mounted中已经完成了）。

31. 请举例出三个常用的生命周期钩子？

32. vue-router路由守卫
    （1）全局路由守卫（router.beforeEach）：
    （2）全局解析守卫（router.beforeResolve）：
    （3）全局后置守卫（router.afterEach）：
    （4）路由独享守卫（beforeEnter）：
    （5）组件内的守卫（beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave）：

33. vuex核心使用
    使用场景：多个组件共享数据或跨组件传数据时。
    vuex流程：组件中通过mapAction异步提交到Action中，action通过commit将对应参数提交到mutations中，mutation会修改state中对应的数据，最后通过getter把对应的值跑出去，在组件的计算属性中通过mapGetter来动态获取state中的数据。

34. vue组件封装

35. 虚拟dom diff算法
    ***虚拟DOM：虚拟DOM是通过js语法来内存中维护一个通过数据结构描述出来的一个模拟的DOM树，当数据改变的时候，会先对虚拟DOM进行模拟修改，然后在通过用新的虚拟DOM树来对比旧的虚拟DOM树，而这个对比就是通过diff算法来进行的。
    ***Diff算法：同时维护新旧两个虚拟DOM树，当数据发生改变时开始执行对比。首先对比根元素，如果根元素发生 改变就直接替换根元素。如果根元素没有发生改变就对下一层元素进行对比，如果发现元素被删除就执行删除，发现替换了元素就执行替换元素，如果添加了元素就执行添加。对比的同时通过key值来判断元素是否发生改变，判断元素仅仅是位置发生改变还是需要整个替换或删除。如果元素没有发生改变的话在对内容进行对比。如果是内容发生的改变就直接修改内容。其实就是逐层进行对比，在通过不同的对比来判断执行不同的操作。

36. vue2、vue3原理

37. 常见SPA首屏优化加载有哪些？
    （1）减小入口文件体积。常用的手段是路由懒加载，把不同路由对应的组件切割成不同的代码块，待路由请求的时候会单独打包路由，使得入口文件变小，加载速度大大增加。
    （2）UI框架按需加载。
    （3）组件重复打包。
    （4）图片资源压缩。对所有图片可以适当压缩，对页面使用的icon可以使用在线icon图标库或者雪碧图。
    （5）开启Gzip压缩（本人没有使用过）。

38. 组件通信的分类可以分成哪些？
    （1）非关系组件之间的通信。
    （2）父子组件间通信。用props。
    （3）子父之间通信。通过$emit触发自定义事件。
    （4）路由通信。
    （5）多组件状态共享。

39. vue中常规的通信方案有哪些？
    （1）使用props、自定义事件、通过$emit触发自定义事件。（2）使用attrs与listeners。（3）使用eventBus、$parent或$root。
    （3）使用ref。

40. vue中有哪些优势？
    （1）首先vue作为一个轻量级的框架，门槛低、上手快、简单易学。
    （2）vue可以进行组件化开发，数据和结构相分离，使代码量减少，从而提升开发效率，易于理解。
    （3）vue最突出的优势在于对数据进行双向绑定，使用虚拟DOM。
    （4）vue是单页面应用、页面局部刷新、不用每次跳转都请求数据，加快了访问速度。提高了用户体验。

41. vue双向数据绑定原理？
    （1）vue的双向数据绑定原理利用的就是Object.defineProperty这个方法重新定义了对象获取属性值（get）和设置属性值（set）的操作老实现的。

42. v-if 和 v-show 的区别？
    （1）v-if 是在dom树上删除或添加节点，v-show 是设置节点的display为none，不会从dom里删除。

43. vue中computed和watch有哪些区别？
    （1）

44. vue中 v-for 为什么要加上key？
    （1）key的作用主要是为了高效的更新虚拟dom，提高渲染功能。
    （2）key属性可以避免数据混乱的情况出现。
    HTML、CSS 面试题

45. 盒模型，标准盒模型和IE盒模型

46. HTML的全局属性有哪些？
    21.块标签、行内标签、空标签分别有哪些？
    （1）id，class，hidden，lang，style，title，dir