VUE-Learning-01
VUE-Learning-01
VUE前导
VUE的特点
- 性能好
为什么vue的性能会更好？
vue的核心是虚拟dom，使用虚拟dom
什么是虚拟dom？
虚拟dom：virtual dom （也被称为vdom）
所谓虚拟dom，即为伪dom，假的dom，他不是一个真实的dom，而是由JS 来模拟出来的具有真实dom结构的一个树形结构。
jq版本的数据替换，基本上改变了大部分的dom结构，而vDom版本的则只改变了需要改动的dom元素，大大减少了dom的操作。
- 视图和数据分离 只用关心数据的变化，处理数据就是处理数据，显示视图就是显示视图，分层来做，这样更符合思考的逻辑
- 维护成本低
- VUE的代码量更少
- 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的变化影响了元素的几何属性（宽和高），浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。
- 重绘：完成重排后，浏览器会重新绘制受影响的部分到屏幕中。
什么时候触发重排？
当页面布局和几何属性改变时就需要重排：
- 添加或删除可见的DOM元素。
- 元素位置改变
- 元素尺寸改变( 外边距、内边距、边框厚度、宽度、高度等)
- 内容改变，例：文本改变或图片被另一个不同尺寸的图片替代
- 页面渲染器初始化
- 浏览器窗口尺寸改变 各css属性对重排重绘的影响：https://csstriggers.com/
触发重排的属性：
浏览器渲染引擎是将需要渲染的多个样式放入一个队列当中，当到一定时间统一渲染，而下列属性需要最新的，所以会立即触发重排 offsetTop、offsetLeft、offsetWidth、offsetHeight scrollTop、scrollLeft、scrollWidth、scrollHeight clientTop、clientLeft、clientWidth、clientHeight getComputedStyle()
关于GPU和CPU
重排占用的是cpu的计算能力 重绘占用的是gpu的绘制图形能力，因为家用显卡都不利于绘制图形，所以，重绘会很浪费性能 GPU的分类：
- 家用GPU（不利于会图形）
- 专业GPU（利于绘图形）
什么是MVVM
M: model(即data) V: view(html页面中绑定事件和渲染) VM：viewModel（将视图和数据链接）
什么是渐进式
即可以使用vue很少的功能完成一个小项目，也可以使用更多的组件去完成大型的项目，vue都能提供。