level one资料 level one全部录播课资料 vue所需资料725 0 vue前导课 VUE

1、主讲老师：杉杉，一，为什么要用VUE？ 1 .性能更好2 .视图，数据分离3 .维护成本低，VUE的性能哪里好，影响web应用性能的是什么？ 操作DOM会影响性能。 因为操作DOM非常昂贵，所以操作DOM为什么非常昂贵呢？1. JS和DOM都是两者，每次连接都消耗性能2.DOM时会发生重新定位和重绘，js和DOM的关系，DOM 浏览器主要用于与HTML文档交互，并使用DOM API访问文档中的数据。 DOM是一个与语言无关的API，浏览器中的接口是用JavaScript实现的。 许多客户端脚本编程与基本文档进行交互，而DOM是当前JS编码的重要部分。 在浏览器中，DOM和javascript通

2、常是独立实现的。 DOM位置和JavaScript位置。 在IE中，JavaScript实现名称位于JScript、jscript.dll文件中，而DOM实现名称位于另一个名为mshtml.dll (内部名称为triipt.dll )的库中，safari的DOM和渲染位于webkit google chrome使用webkit的webCore库渲染页面，而JavaScript引擎则是自己开发的名为V8的引擎。 firefox的JavaScript引擎称为“跟踪月球”，独立于渲染引擎“地球”。 访问DOM元素是昂贵的。 修改DOM元素的成本更高，因为浏览器重新计算页面的机会会改变。 浏览器的渲染

3、过程如果浏览器下载了页面中的所有组件： HTML、JavaScript、CSS、图像，则分析1.html，分析构建DOM树的2.CSS，生成CSS规则树3 . 制作负责位置的补正算出的render树，制作页面像素信息的6 .浏览器将各层的信息发送到GPU，GPU进行各层的合成、排序和再描绘、排序和再描绘，如果DOM的变化影响要素的几何属性(宽度和高度)，则浏览器进行要素浏览器禁用受渲染树影响的部分，并重建渲染树。 此过程称为重新定位，重新定位完成后，浏览器将在屏幕上重绘受影响的部分。 这个过程称为重绘。 的双曲馀弦值。 什么时候触发重新定位？ 中的组合图层性质变更选项。 如果页面布局和几何属性

4、发生了更改，则需要重新定位。 1 .添加或删除显示的DOM元素。 2 .元素位置变更3 .元素大小变更(外框、内边距、框的厚度、宽度、高度等)4.内容变更，例如：文本变更或将图像替换为其他大小的图像5 .页渲染器初始化6 .浏览器窗口大小变更各css属性重绘offsetTop、offsetLeft、offsetWidth、offsetHeight scrollTop、滚动左侧、滚动宽度、滚动客户端top。 关于clientHeight getComputedStyle ()、GPU (显卡)，GPU的分类：1.家用GPU 2.专业GPU，为什么vue的性能会变好？ vue的核心是虚拟dom，使

5、用虚拟dom可以减少dom的操作，提高应用程序性能。 什么是虚拟dom？ 虚拟dom:virtual dom (也称为vdom )虚拟dom是指假dom、假dom，他不是真的DOM，而是具有由JS模拟的真的DOM结构的树结构。 中的组合图层性质变更选项。 为什么使用JS模拟dom结构？ 1 .在前端的3种语言(html、css、javaScript )中，只有JS是编程语言，只有JS能够实现判断、循环、递归、各种逻辑，能够实现各种算法。 在js中模拟下一个子歌的步骤：在js中如何模拟dom结构？js模拟dom结构：为什么要使用js来模拟dom结构？ 2. dom的操作成本高，js的运用效率高，将dom与js层比较，减少dom的操作，效率高。用JQ操作置换数据2 .用vdom操作置换数据，从上可知，JQ版的数据置换改变了大部分的dom结构，但是vdom版的数据只改变了需要改变的dom要素。 so.性能好！ 不要！ 不要！ 02、视图、数据分离如何分离？ 1 .用jq用todoist2.vue写t