Vue学习整理（二）

1.Vuex是什么？怎么使用？哪种功能场景使用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
在main.js引入store，注入。新建了一个目录store，…… export 。
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
state ： Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。

mutations ： 修改Vuex 的 store 中的状态或数据。

getters：类似vue的计算属性，主要用来过滤一些数据。

action ：可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过
store.dispath 来分发 action。

modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

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

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。
这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。

3.深拷贝和浅拷贝的区别？

首先深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说，浅复制只复制一层对象的属性，。而深复制则递归复制了所有层级。
1.因为浅复制只会将对象的各个属性进行依次复制，并不会进行递归复制，而 JavaScript 存储对象都是存地址的，所以浅复制会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址

shallowObj.arr[1] = 5; obj.arr[1] // = 5
2.而深复制则不同，它不仅将原对象的各个属性逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在上面 obj 和 shallowObj 的 arr 属性指向同一个对象的问题。
var obj = { a:1, arr: [1,2] }; var obj2 = deepCopy(obj);

4. 从输入URL到页面展示，中间发生了什么？

1.在浏览器输入URL www.github.com

2.浏览器解析URL
3.浏览器与ISP通信，通过DNS查找到域名对应的IP，发给浏览器

4.浏览器将拿这个IP地址和URL中的端口号（HTTP协议默认端口号是80，HTTPS默认端口号是443），打开一个TCP套接字连接。这时，浏览器和服务器就建立了连接。

5.浏览器发送一个HTTP请求至Web服务器，去获取www.github.com的主页

6.Web服务器接收请求，并查找HTML页面。如果该页面存在，该Web服务器准备响应并把它发回给你的浏览器。如果服务器找不到你请求的页面，它将发送一个404错误消息，404表示“页面未找到”

7.浏览器接收到的HTML页面从头到尾扫描一遍，并去寻找其它相关的资源，如图片、CSS文件、JavaScript脚本文件等等,通过相同方式获取到资源

8.一旦浏览器加载完HTML涉及到的所有资源，页面最终会加载在浏览器窗体里，并关闭与服务器的连接。

5.强缓存和协商缓存

强缓存和协商缓存的区别总结：
1.强缓存只有首次请求会跟服务端通信，读取缓存资源时不用发送请求。返回200。
2.协商缓存总会与服务器交互，第一次是拿数据和E-tag的过程，之后每次凭E-tag询问是否更新。命中缓存返回304。
3.二者之间最大的区别就是：强缓存只通信一次；协商缓存每次都通信询问。

6.Vue的diff算法和DOM原理

在数据发生变化，vue是先根据真实DOM生成一颗 virtual DOM ，当 virtual DOM 某个节点的数据改变后会生成一个新的 Vnode ，然后 Vnode 和 oldVnode 作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使 oldVnode 的值为 Vnode ，来实现更新节点。
1.原理简述：
（1）先去同级比较，然后再去比较子节点

（2）先去判断一方有子节点一方没有子节点的情况

（3）比较都有子节点的情况

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

7. promise是什么？怎么使用？

1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列
使用promise的好处是：
1.代码结构更加扁平且更可读，清晰明了。

2.能解决回调地狱问题。

3.可将数据请求和业务逻辑分离开来。

4.便于管理维护。

5.能更好的捕获错误。
promise、async、await的理解
1、Promise中的函数的第一个参数是回调函数，resolve用来触发then里面的代码，第二个参数是回调函数，reject用来触发catch中的代码，throw new Error();也可以触发catch，
2、await可以是Promise同步，即不会立即执行Proimse外面(或者说下面)的代码，而await只能用在async标记的函数中，这样async函数本身就是异步的，而async函数里面的代码是同步的
3、async本身是异步的，可以这样理解，async函数执行到await的时候就立即返回，开始执行async下面的代码，与await等待执行的代码同时执行。

8.vue等单页面应用及其优缺点

优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

9.Vue项目优化

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

10. 前端性能优化

前端优化的途径有很多，大致可以分为两类，第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。

一、页面级优化：
1、减少 HTTP 请求：浏览器一般同时响应请求为4个（PC 一般为4个，Android 支持4个，IOS
5后可支持6个） 减少 HTTP请求数的主要途径包括： 合理设置 HTTP缓存、资源合并与压缩
2、使用外联式引入CSS、JavaScript
3、使用首屏加载：首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化按需加载：将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量。但是这也会导致大量重绘，影响渲染性能
4、lazyload、滚动加载、media query、预加载 5、使用其他方式代替图片（CSS3，SVG，IconFont）、使用
Srcset
（主要移动端）、选择合适的图片（webP优于JPG，PNG8优于GIF）、选择合适的大小（首次加载不大于1014KB，不宽于640（基于手机的一般宽度））
6、CSS 写在头部（阻塞 DOM 渲染，不阻塞加载，内联会阻塞加载） 如果将 CSS放在其他地方比如
BODY中，则浏览器有可能还未下载和解析CSS，就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到
CSS状态，用户体验比较糟糕。除此之外，有些浏览器会在 CSS下载完成后才开始渲染页面，如果
CSS放在靠下的位置则会导致浏览器将渲染时间推迟。），JavaScript 写在尾部或异步（js文件默认阻塞加载和渲染）
二、代码优化
css代码优化
1、尽量避免在 HTML标签中写 Style 属性
2、避免 CSS 表达式：CSS 表达式的执行需跳出 CSS 的渲染
3、移除空的 CSS 规则：空的 CSS 规则增加了 CSS 文件的大小，且影响 CSS 树的执行
4、使用flexbox来布局
5、正确使用display的属性：
display:inline 后边不应再使用 width、height、margin、padding 以及 float
display:inline-block 后不应该使用 float
display:block 后不应该再使用 vertical-align
display:table 后不应该再使用 margin 或 float
不滥用 float ：float 在渲染时的计算量比较大，尽量减少使用
不滥用 Web 字体：Web字体需要下载，解析，重绘当前页面，尽量减少使用
不声明过多的 font-size： 尽量使用语义化标签的默认字体大小，提高 CSS 树的效率值为 0 时不需要任何单位
6、标准化各种浏览器的前缀
没前缀应放在最后
CSS 动画只用（-webkit- 无前缀 两种即可）
其他前缀为 -webkit- 、-moz- 、-ms- 、无前缀 四种
7、css选择符：浏览器对选择符的解析是从右往左进行的
JavaScript执行优化
1、减少dom的重绘和回流
2、避免不必要的 DOM 操作
3、尽量改变 Class 而不是 Style ，使用 classList 代替 className
4、避免使用 document.write()会重绘整个页面
5、缓存 DOM 选择与计算：每次 DOM 选择都要计算，用一个变量保存这个值
6、尽量使用事件代理，避免批量绑定事件
7、尽量使用 ID 选择器：ID选择器是最快的
8、Touch 事件优化：使用 touchstart 、touchend 代替 click，但注意 Touch 响应过快，易引发误操作
渲染优化
1、减少 DOM 节点：DOM 节点太多影响页面的渲染，应尽量减少 DOM 节点
2、动画优化：
尽量使用 CSS3 动画
适当使用 Canvas 动画， 5 个元素以内使用 CSS 动画（IOS8可使用webGL）
增加响应变化的时间间隔，减少重绘次数
GPU 加速：CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、webGL、Video）来触发 GPU 渲染，但过度使用会引发手机耗电增加。