VUE-Learning-01

VUE的特点

• 性能好

为什么vue的性能会更好？

vue的核心是虚拟dom，使用虚拟dom

什么是虚拟dom？

虚拟dom：virtual dom （也被称为vdom）

所谓虚拟dom，即为伪dom，假的dom，他不是一个真实的dom，而是由JS
来模拟出来的具有真实dom结构的一个树形结构。

jq版本的数据替换，基本上改变了大部分的dom结构，而vDom版本的则只改变了需要改动的dom元素，大大减少了dom的操作。

• 视图和数据分离

  只用关心数据的变化，处理数据就是处理数据，显示视图就是显示视图，分层来做，这样更符合思考的逻辑

• 维护成本低

1. VUE的代码量更少

2. VUE的逻辑更清晰

什么会影响web性能？

操作DOM影响性能，因为操作DOM是十分昂贵的

为什么操作DOM非常昂贵？

1. JS和 DOM是两种东西，每次连接都需要消耗性能

DOM是一个独立于语言的，用于操作XML和HTML文档的程序接口(API)。在浏览器中主要用于与HTML文档打交道，并且使用DOM API用来访问文档中的数据。

DOM是个与语言无关的API，它在浏览器中的接口却是用JavaScript来实现的。客户端脚本编程大多数都是在和底层文档打交道，DOM就成为现在JS编码中的重要部分。

浏览器中通常会把DOM和javascript独立实现。

DOM的位置和JavaScript的位置

在IE中，JavaScript的实现名为JScript，位于jscript.dll文件中，DOM的实现则存在另一个库中，名为mshtml.dll（内部称为trident）。

safari中的DOM和渲染是使用webkit中的webcore实现，JavaScript部分是由独立的SquirelFish引擎来实现。

google chrome使用webkit中的webCore库来渲染页面，但JavaScript引擎是他们自己研发的，名为V8。

firefox的JavaScript引擎名为TraceMonkey，与名为Gecko的渲染引擎相互独立。

2. 操作DOM会导致重排和重绘

访问DOM元素是有代价的。

• 此处每一次dom访问都会建立一个桥梁，还有中间商赚差价
• 修改DOM元素的代价，则更为昂贵，因为它会导致浏览器重新计算页面的机会变化。
  修改DOM是建立在访问DOM的前提下。还需要页面重排和重绘

浏览器的渲染过程

浏览器下载完页面中的所有组件：HTML、JavaScript、CSS、图片后，会发生这样的过程：
1. 解析HTML，构建DOM树
2. 解析CSS，生成CSS规则树
3. 合并DOM树和CSS规则树，生成render树
4. 布局render树，负责各元素尺寸、位置的计算（重排）
5. 绘制render树，绘制页面像素信息
6. 浏览器会将各层的信息发送给GPU，GPU将各层合成（重绘）

重排和重绘

• 重排：当DOM的变化影响了元素的几何属性（宽和高），浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。
• 重绘：完成重排后，浏览器会重新绘制受影响的部分到屏幕中。

什么时候触发重排？

当页面布局和几何属性改变时就需要重排：

1. 添加或删除可见的DOM元素。
2. 元素位置改变
3. 元素尺寸改变( 外边距、内边距、边框厚度、宽度、高度等)
4. 内容改变，例：文本改变或图片被另一个不同尺寸的图片替代
5. 页面渲染器初始化
6. 浏览器窗口尺寸改变
   各css属性对重排重绘的影响：https://csstriggers.com/

触发重排的属性：

浏览器渲染引擎是将需要渲染的多个样式放入一个队列当中，当到一定时间统一渲染，而下列属性需要最新的，所以会立即触发重排
offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()

关于GPU和CPU

重排占用的是cpu的计算能力
重绘占用的是gpu的绘制图形能力，因为家用显卡都不利于绘制图形，所以，重绘会很浪费性能
GPU的分类：

1. 家用GPU（不利于会图形）
2. 专业GPU（利于绘图形）

什么是MVVM

M: model(即data)
V: view(html页面中绑定事件和渲染)
VM：viewModel（将视图和数据链接）

什么是渐进式

即可以使用vue很少的功能完成一个小项目，也可以使用更多的组件去完成大型的项目，vue都能提供。