前端面试题2020（初中级）

1. Vue 的优点和缺点

优点：
低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
基于上面一点，SPA 相对对服务器压力小；
前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：
初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

2. v-show 与 v-if 有什么区别?

v-show 相对于 css 中进行隐藏显示
v-if 相对于 dom 元素 进行渲染是否展示
v-if 不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。

3. Class 与 Style 如何动态绑定

一个对象绑定 , 一个数组绑定 .

4. 怎样理解 Vue 的单向数据流

所谓单向数据流就是父组件的变量，子组件不能直接去修改它，而是通过迂回战术在父组件传递给子组件的数据通过data或者计算属性方式传递给子组件，子组件去改变这个新的变量对象，然后在子组件渲染这个新的变量对象，实际这个时候最开始的父组件变量并没有改变，也就是说改变的是一个新的变量并且是子组件内部改变了，如果你确实想把父组件最开始的变量改变。那么你就需要在父组件身上绑定自定义事件。在子组件发生交互（例如点击）后去触发监控父组件身上的自定义事件从而改变父组件的最开始的变量。

5. 什么是MVVM？

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

6. mvvm和mvc区别？它和其它框架的区别是什么？哪些场景适合?

mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷

7. Vue 组件之间的传值

父组件与子组件传值
父组件通过标签上面定义传值
子组件通过props方法接受数据
子组件向父组件传递数据
子组件通过$emit方法传递参数
非父子组件间的数据传递，兄弟组件传值 eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。

8. Vue 路由之间跳转

声明式（标签跳转） 编程式（ js跳转）

9. Veux 是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store，注入。新建一个目录store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

10. Veux 有哪几种属性

有五种，分别是 State、 Getter、Mutation 、Action、 Module
vuex的State特性
Vuex 就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data
state 里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
vuex 的Getter特性
getters 可以对State进行计算操作，它就是Store的计算属性
虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
如果一个状态只在一个组件内使用，是可以不用getters
vuex 的 Mutation 特性
Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

11. 不用 Vuex 会带来什么问题

可维护性会下降，想修改数据要维护三个地方；
可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；
增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

12. Vue 的生命周期

创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

13. 说出至少4种 Vue 当中的指令和它的用法

v-if：判断是否隐藏；v-for：数据循环；v-bind:class：绑定一个属性；v-model：实现双向绑定

14. V-if 为什么使用key

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

15. 为什么避免 v-if 和 v-for 用在一起

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

16. v-model的实现原理

是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

17. 计算属性的缓存和方法调用的区别

我们可以将同一函数定义为一个方法或是一个计算属性。两种方式的最终结果确实是完全相同的。不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
使用计算属性还是methods取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
计算属性是根据依赖自动执行的，methods需要事件调用。

18. 从浏览器输入URL到页面呈现经历了什么

查看缓存（浏览器缓存，系统缓存，路由器缓存），
如果有直接访问 如果没有，DNS服务器进行域名解析，解析成ip地址
通过ip地址找到服务器，进行TCP链接，完成三次握手
浏览器像服务器发送http请求
服务器响应，将响应报文通过TCP发送回浏览器
对响应进行解码，根据资源类型决定如何处理
如果是HTML文档，则构建DOM树，下载CSS，JS资源，构建渲染树，布局，绘制

19. 三栏布局，高度已知，左右两栏固定，中间自适应的三栏布局有几种实现方式，各自的优缺点是什么

float实现
优点：兼容性好
缺点：脱离文档流，DOM节点顺序错误
absolute实现
优点：快捷
缺点：脱离文档流
margin负值实现
优点：兼容性好
缺点：节点顺序错误，需要多一层额外的div，出问题难以排查
flex实现
优点：新布局方式，解决以上两种布局方式的缺陷
缺点：兼容性较差

20. CSS盒模型是什么

盒子模型包括：content、padding、margin、border

21. 标准模型和IE模型的区别 (IE又称为怪异盒子模型)

标准模型的宽高为content的宽高
IE模型的宽高包括border

22. 介绍下事件流

定义：用户与浏览器当前页面的交互过程
三个阶段：捕获阶段、目标阶段、冒泡阶段

23. DOM事件捕获的具体流程是怎样的

window => document => html => body => ... => 目标元素

24. Event 对象有哪些常用应用

阻止默认事件：event.preventDefault()
阻止冒泡：event.stopPropagation()
阻止调用相同事件的其他侦听器(事件响应优先级)：event.stopImmediatePropagation()
当前绑定事件的元素：event.currentTarget
当前被点击的元素：event.target

25. JavaScript如何创建对象

字面量创建对象
var o1 = {name = "o1"};
var o2 = new Object({name : "o2"});
构造函数创建对象
var M = function () {this.name = "o3";}
var o3 = new M();
Object.create创建对象
var p = {name : 'o4'};
var o4 = Object.create(p);

26. 原型、构造函数、实例、原型链的关系如何

javascript中的继承是通过原型链来体现的。
每个对象都有一个proto属性，指向构造函数的prototype。
访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着proto这条链向上找，这就是原型链。

27. 提升页面性能的方法有哪些

资源压缩合并，减少HTTP请求
非核心代码异步加载
使用浏览器缓存
使用CDN
预解析DNS
HTML优化，如使用语义化标签，避免重定向等
CSS优化，如布局代码写前面，根据需求加载的网络字体，避免使用表达式

28. defer、async的区别是什么

defer是在HTML解析后才会执行的，如果有多个，按加载顺序依次执行
async是在加载完之后立即执行，如果是多个，执行顺序与加载顺序无关

29. 缓存的分类有哪些？（跟缓存相关的HTTP头部有哪些？）

强缓存
特点：不请求，直接使用缓存
相关的HTTP头部字段：
Expires：过期时间，是个绝对时间，下发的是服务器时间，比较用的是客户端的时间，所以会有偏差
Cache-Control：过期时间，是个相对时间，优先级高，以客户端的相对时间为准，浏览器拿到资源之后的多少时间内都不会再去服务器请求
协商缓存
特点：浏览器不确定备份是否过期，需与服务器请求确认
相关的HTTP头部字段：
Last-Modified/If-Modified-Since：服务器下发时间，客户端请求时带上下发时间，服务器判断文件是否过期。存在的问题服务器下发的时间难以定义
Etag/If-None-Match：服务器下发hash值，客户端请求时带上hash值，服务器判断文件是否过期。优先级高

30. 什么是CND

特点：在不同的地点缓存内容，将用户的请求定向到最合适的缓存服务器上去获取内容。
优点：解决Internet网络拥堵状况，提高用户访问网络的响应速度。

31. 浏览器渲染过程是怎样的

HTML被解析成DOM Tree，CSS被解析成CSS Rule Tree
在布局阶段，把DOM Tree和CSS Rule Tree经过整合生成Render Tree
元素按照算出来的规则，把元素放到它该出现的位置，通过显卡画到屏幕上

32. 如何减少重绘、避免重排

DOM层面：DocumentFragment本质上是一个占位符，真正插入页面的是它的所有子孙节点，所以，将需要变动的DOM节点先汇总到DocumentFragment，然后一次性插入，可以减少DOM操作的次数。
CSS层面：操作多个样式时，可以先汇总到一个类中，然后一次性修改

33. POST和GET的区别是什么

可以从GET的优势跟劣势去记忆。
优势：
GET在浏览器回退时是无害的，而POST会再次提交请求
GET请求会被浏览器主动缓存，而POST不会，除非手动设置
劣势：
GET 不安全，参数暴露在URL上，并且会完整保留在浏览器的历史记录里
GET请求在URL中传递的参数是有长度限制的，POST没有限制

33. 状态码表示的含义是

1XX：指示信息：请求已接收，继续处理
2XX：成功，请求已被成功接收
3XX：重定向，完成请求需要进一步的操作
4XX：客户端错误，请求有语法错误或请求无法实现
5XX：服务器错误：服务端未能实现合法的请求

34. 常见状态码有哪些

200：OK，客户端请求成功
206：Partial Content：客户端发送一个带有Range头的GET请求，服务器完成了他
301：Moved Permanently：所请求的页面已转移至新的URL
302：Found：所请求的页面已经临时转移到新的URL
304：Not Modified：客户端有缓存的文档，并发出一个条件性的请求，服务器告诉客户端，原来的缓存的文档可以继续使用
400：Bad Request：客户端请求有语法错误，不能被服务器所理解
401：Unauthorized：请求未经授权，必须与WWW-Authenticate报头域一起使用
403：Forbidden：对被请求页面的访问被禁止
404：Not Found：请求资源不存在
500：Internal Server Error：服务器发生不可预期的错误
503：Server Unavailable：请求未完成，服务器临时过载或宕机

35. 管线化是什么

在使用持久连接的情况下，常规的消息传递是类似于：请求1 => 响应1 => 请求2 => 响应2 => 请求3 => 响应3，而管线化的消息传递是类似于请求1 => 请求2 => 请求3 => 响应1 => 响应2 => 响应3

36. 管线化的特点是什么

通道持久建立，请求打包后，一起送过去，响应也是，打包后送回来
管线化机制通过持久连接完成，仅HTTP1.1支持
只有GET、HEAD请求可以进行管线化，而POST有所限制
初次创建连接时不应开启管线化机制，因对方服务器不一定支持HTTP1.1

37. 前端错误捕获方式分别是什么

即时错误的捕获方式
try-catch
window.onerror（只能捕获即时错误）
资源加载错误的捕获方式
Object.onerror
performance.getEntries() 拿到所有成功加载资源的集合
Error事件捕获

38. 跨域的JS运行错误可以捕获么？错误提示是什么，应该怎么处理？

可以捕获，提示“Script error”，具体错误信息无法获得 解决方案：
客户端：在script标签增加crossorigin属性
服务端：设置JS资源响应头Access-Control-Allow-Origin

39. 什么是跨域通信

一个域下的文档或脚本试图去请求另一个域下的资源

40. 什么是同源策略

同源：协议、域名、端口
非同源的限制：
cookie、localStorage、indexDB无法读取
DOM无法获得
Ajax 请求不能发送

41. 跨域解决方案有哪些

CORS
代理
jsonp
postMessage
WebSocket

42. 常见的攻击方式有哪些

CSRF：跨站请求伪造
XSS：跨站脚本攻击

43. 前端性能优化的关键时间点有哪些，分别是什么

开始渲染时间：浏览器开始绘制页面，在此之前页面都是白屏，所以也称为白屏时间。
DOM Ready：dom解析已经完成，资源还没有加载完成, 这个时候用户与页面的交互已经可用了
首屏时间：用户看到第一屏页面的时间
onload：原始文档和所有引用的内容已经加载完成，用户最明显的感觉就是浏览器上loading状态结束。

44.onload时间如何获取？如何优化？

获取方式： 该时间点是window.onload事件触发的时间
优化建议：
减少资源的请求数和文件大小
将非初始化脚本放到onLoad之后执行
无需同步的脚本异步加载

45. 请说下封装 vue 组件的过程

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

46. 聊聊你对Vue.js的template编译的理解？

简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）
首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。
然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

47. Vue的路由实现：hash模式 和 history模式

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。 hash 模式下，仅 hash 符号之前的内容会被包含在请求中，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（）,replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致

48. 对keep-alive 的了解？

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 ，其有以下特性：
一般结合路由和动态组件一起使用，用于缓存组件；
提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；
对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

49.vue常用的修饰符

.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

50.computed 和 watch 的区别和运用的场景？

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
运用场景：
当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

51. 组件中 data 为什么是一个函数

为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？
因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

52. Vue 框架怎么实现对象和数组的监听

如果被问到 Vue 怎么实现数据双向绑定，大家肯定都会回答 通过 Object.defineProperty() 对数据进行劫持，但是 Object.defineProperty() 只能对属性进行数据劫持，不能对整个对象进行劫持，同理无法对数组进行劫持，但是我们在使用 Vue 框架中都知道，Vue 能检测到对象和数组（部分方法的操作）的变化，那它是怎么实现的呢？我们查看相关代码如下：

 /**
   * Observe a list of Array items.
   */
  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])  // observe 功能为监测数据的变化
    }
  }
  /**
   * 对属性进行递归遍历
   */
  let childOb = !shallow && observe(val) // observe 功能为监测数据的变化

通过以上 Vue 源码部分查看，我们就能知道 Vue 框架是通过遍历数组 和递归遍历对象，从而达到利用 Object.defineProperty() 也能对对象和数组（部分方法的操作）进行监听。

53. Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题 ？

受现代 JavaScript 的限制 ，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 来实现为对象添加响应式属性
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

54. 虚拟 DOM 的优缺点

优点：
保证性能下限： 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；
无需手动操作 DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率；
跨平台： 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。
缺点:
无法进行极致优化： 虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

55. 虚拟 DOM 实现原理

虚拟 DOM 的实现原理主要包括以下 3 部分：
用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
diff 算法 — 比较两棵虚拟 DOM 树的差异；
pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

56. 你有对 Vue 项目进行哪些优化

代码层面的优化
v-if 和 v-show 区分使用场景
computed 和 watch 区分使用场景
v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
长列表性能优化
事件的销毁
图片资源懒加载
路由懒加载
第三方插件的按需引入
优化无限列表性能
服务端渲染 SSR or 预渲染
Webpack 层面的优化
Webpack 对图片进行压缩
减少 ES6 转为 ES5 的冗余代码
提取公共代码
模板预编译
提取组件的 CSS
优化 SourceMap
构建结果输出分析
Vue 项目的编译优化
基础的 Web 技术的优化
开启 gzip 压缩
浏览器缓存
CDN 的使用
使用 Chrome Performance 查找性能瓶颈

57. 对于即将到来的 vue3.0 特性你有什么了解的吗

Vue 3.0 正走在发布的路上，Vue 3.0 的目标是让 Vue 核心变得更小、更快、更强大，因此 Vue 3.0 增加以下这些新特性：
监测机制的改变
3.0 将带来基于代理 Proxy 的 observer 实现，提供全语言覆盖的反应性跟踪。这消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制：
只能监测属性，不能监测对象
检测属性的添加和删除；
检测数组索引和长度的变更；
支持 Map、Set、WeakMap 和 WeakSet。

58. vue-loader是什么？使用它的用途有哪些

vue文件的一个加载器，跟template/js/style转换成js模块。 用途：js可以写es6、style样式可以scss或less、template可以加jade等

59. 如何提高webpack的构建速度？

多入口情况下，使用CommonsChunkPlugin来提取公共代码
通过externals配置来提取常用库
利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
使用Happypack 实现多线程加速编译
使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
使用Tree-shaking和Scope Hoisting来剔除多余代码

60. LocalStorage/ SessionStorage / Cookie/ Session区别？

cookie在浏览器和服务器间来回传递。
sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；
session称为会话信息，位于web服务器上，主要负责访问者与网站之间的交互，当访问浏览器请求http地址时，将传递到web服务器上并与访问信息进行匹配， 当关闭网站时就表示会话已经结束，网站无法访问该信息了，所以它无法保存永久数据，我们无法访问以及禁用网站cookie位于用户的计算机上，用来维护用户计算机中的信息，直到用户删除。
比如我们在网页上登录某个软件时输入用户名及密码时如果保存为cookie，则每次我们访问的时候就不需要登录网站了。我们可以在浏览器上保存任何文本，而且我们还可以随时随地的去阻止它或者删除。
我们同样也可以禁用或者编辑cookie，但是有一点需要注意不要使用cookie来存储一些隐私数据，以防隐私泄露

61. display、visibility和opacity的区别

display: none

浏览器不会渲染，不占据空间；无法进行 DOM 事件监听；动态改变此属性时会引起重排，不会被子元素继承，transition 不支持 display。

visibility: hidden

元素被隐藏，但是会被渲染不会消失，占据空间；无法进行 DOM 事件监听；动态改变此属性时会引起重绘，会被子元素继承，transition 支持 visibility。

opacity: 0

透明度为 100%，元素隐藏，占据空间；可以进行 DOM 事件监听；提升为合成层，不会触发重绘，会被子元素继承,transition 支持 opacity。