首页天道酬勤web前端笔记,前端

web前端笔记,前端

张世龙 05-12 13:12 86次浏览

我们知道Vue和React内部正在使用虚拟DOM。 我最近刚开始整理有关虚拟DOM的知识。 以下是我整理的笔记本。 容易理解,清晰易懂,推荐收藏。

使用大纲虚拟DOM前信息提要虚拟DOM的原因虚拟DOM (虚拟DOM )虚拟DOM角色1、虚拟DOM前信息提要浏览器获取HTML文档后,位于浏览器内核webkit的WebCore层

在我们用前端小刀种火种的时代,我们直接使用JavaScript操作DOM,但DOM树实际上由DOM模块管理。 浏览器内核具有用于存储DOM树的单独内存,但JavaScript引擎与此内存无关。 也就是说,不能直接操作实际的DOM树。

为了赋予JavaScript处理DOM的能力,浏览器在全局对象窗口中封装了用于JavaScript的文档对象,并为该对象提供了大部分DOM操作API (界面为

二、为什么使用虚拟DOM? 当我们通过这些接口操作DOM时,JavaScript没有直接与DOM模块交互。 调用浏览器的DOM API后,浏览器操作DOM模块,将操作结果返回给JavaScript引擎。 正因为JavaScript需要通过DOM接口操作实际的DOM,所以才操作实际的DOM

JavaScript直接调用的是作为c实现的接口的实际DOM树的节点多、体积大、实际DOM操作过程的资源成本大; 修改实际DOM时,由于页面经常重绘,操作DOM越多,网页性能越差的历史原因,JavaScript出现在DOM中后,在设计上无法再用JavaScript管理DOM。 要使用JavaScript管理DOM,必须重新构建浏览器内核。 这在当时显然是不可能的。

综上所述,如何有效减少对实际DOM的操作是前端性能优化的重要部分,使用虚拟DOM是目前非常流行和有效的解决方案。

三、虚拟DOM (虚拟DOM )虚拟DOM是指由一般对象描述的DOM对象,不是实际的DOM,所以称为虚拟DOM。

从上一个概述可以看出,创建/处理实际DOM的资源开销特别大,仅使用常规对象模拟虚拟DOM可以有效减少实际DOM操作并提高网页性能

四、虚拟DOM的作用从上次提要可以看出,实际DOM的创建/操作,资源开销特别大,如下。

如果状态发生变化需要更新视图,可以使用虚拟DOM在内存中完成修改,减少对实际DOM的直接操作次数,并保持视图和状态之间的关系。 也可以使用diff算法比较修改后的虚拟DOM和修改前的实际DOM之间的差异。 只需更新实际DOM中的变化位置,即可减少重绘次数,提高渲染性能。 此外,虚拟DOM还作用于服务端呈现SSR、本机APP还原主动、小程序uni-app等其他方面; 前端原理系列:第1篇

下期预告:

Vue内部的虚拟DOM是由一个名为Snabbdom的开源库改造而成的,先开刀,先从基本使用Snabbdom开始,逐行分析Snabbdom的源代码,从中了解虚拟DOM的工作过程和原理

本期名词:

重做、差动算法、SSR、React Native、uni-app

vue什么是虚拟dom,vue和react的优缺点