手记

【九月打卡】第19天 撮合交易系统 2

第一模块:

课程名称:SpringCloud+Vertx+Disruptor 撮合交易系统实战

章节名称:2-1

讲师姓名:Gudy


第二模块:

内容概述:

2-1小节主要讲解了Vue,揭示了Vue高效的技术秘密。


第三模块:

学习心得:

第2章:

2-1 Vue高性能的秘密

前端的业务逻辑使用vue,组件库使用Element,Element是饿了么提供的一个开源组件库,本身是基于vue开发出来的,所以,可以做到无缝接入vue

真正高效的框架,一定要满足一下两个要求:

1.cpu内存友好:占用内存小,点击马上有反应

2.代码精简,可复用,编程友好

Vue设计思想/高性能秘密:

1.MVVM(运行友好):

首先,来看没有mvvm时的前端玩法:用ajax请求后台数据,然后js更新dom

这套玩法一开始是没有问题的,但是随着“前端”变得越来越复杂,一个前端业务就涉及到几十个业务逻辑时,这套玩法就不行了,因为此时会反复出现“请求更新,请求更新”,如果只是单个页面的复杂其实还好,但是实际中,往往是需要“多页面关联更新的”,此时就比较麻烦了,这时前端程序员就要即关心“业务逻辑”,还要照顾到“显示逻辑”,这时候之前的玩法就不好用了

所以:基于这种现状,前端框架就孕育而生了,前端框架就处理一个事——显示逻辑;程序员通过使用“前端框架”,从而从显示逻辑中解脱出来,专心与业务逻辑之中。而这个框架就是MVVM模式

MVVM设计思想:

vue在vue2.0之后引入了VDOM,vdom的出现,让vue框架可以控制“页面渲染的时机”了,这让vue又提升了一个档次!

VDOM的模式:

首先,来看浏览器页面渲染时间节点图:

从上到下,经过4个节点(1、2、3的顺序不是固定的,可能同时进行,也可能交错进行),这里要注意javaScript代码在html文件的位置问题。

建议:将javaScript代码放到所有html标签的后面,因为:

浏览器的dom树引擎在初始化dom树时遇到script标签时会暂停下来,将html文件的控制权交给javaScript解析器,直到javaScript解析器解析完script代码,dom树才会继续构建

所以,一个好的建议是:将javaScript代码放到所有html标签的后面;这样页面的初始化会更快,页面也就能跟快的显示出来

DOM树:html骨架(节点)

Render树:将每个html节点的css样式挂载到dom树上,所形成的树

Layout:在浏览器的窗口上进行html节点布局

Paint:显示出布局,此时人可以看见渲染好的页面

vdom性能高的秘密:

dom更新机制:从第一步开始,把整个渲染流程1,2,3,4全部走一遍。所以,如果要对上面的那颗dom树做更新,要就要重绘(重绘就是上面的4个步骤)7次(因为有7个节点)

vdom更新机制:vdom首先会在内存中存一个dom树的副本,这个副本叫“wacth_dom_tree”,在一次操作当中,所有的dom更新都是在自己的副本中完成的,这个时候正真的dom没感觉,也就不有重绘了,此时dom树重绘的时机是:vdom中所有的dom都更新完了,在一次性将各个dom的改变都“刷”到dom树上,dom树再执行更新

效率上:将原来的7次dom树更新,降到了1次,效率大大提升!!!

所以:越复杂的页面i结构,vdom的优势就越明显,这个vdom机制是vue框架性能高的一个非常重要的原因

2.组件化(程序员友好):对相同模块的服用

eg:左边的“小王资金账户可用资金”这一组件,在另外4个模块中都可以用,那这个“小王资金账户可用资金”就是一个可以复用的模块

这里要区分组件复用和代码复用,这事两个不同的概念:

组件复用:vue的组件复用,可以做到同一组件,同时更新到复用的模块上去!!!

这个被复用的组件,他的各个克隆体之间是存在关联关系的

可以简单的认为:在vue里面,同一个组件,在不同模块中,只有一个实例(虽然实际上并不是这样,这里只是为了更好理解)

“同一个实例的好处”:所有的更新逻辑就只有一个了,代码也更好维护

代码复用:只是代码层面的复用,在代码解析的时候,只是“静态的拷贝”了代码,这些相同的代码间是没有任何关系的,是相互独立的

小结Vue的优势/特点

MVVM:将js对象和显示逻辑进行绑定,将开发从繁重的UI中解脱了出来

组件化:高效的代码复用


第四模块:

学习截图:

0人推荐
随时随地看视频
慕课网APP