Dom树

浏览器收到一个html页面是如何解析成页面呈现给用户
- 浏览器使用html解析器解析html，解析后构建dom树，也可能是边解析边沟检查
- css解析器解析css生成样式表
- 构建render树（渲染树、呈现树），也就是解析生成样式表将样式应用到dom节点上
- 布局，通过计算将每一个dom节点精确呈现在屏幕上的相应位置
- 绘制render树在屏幕上
为什么操作真实DOM的成本比较高？
- dom 树的实现模块和 js 模块是分开的这些跨模块的通讯增加了成本
- dom 操作引起的浏览器的重排和重绘，使得性能开销巨大。原本在 pc 端是没有性能问题的，因为pc端的计算能力强，但是随着移动端的发展，越来越多的网页在智能手机上运行，而手机的性能参差不齐，会有性能问题。我们之前用jquery在pc端写那些商城页面都没有问题，但放到移动端浏览器访问之后会发现除了首页会出现白屏之外在其他页的操作并不流畅。
什么是回流和重绘？
- 回流 reflow（重排）:当呈现树renderTree中的一部分或全部因为尺寸、布局、隐藏等改变改重新构建，称之为回流。
- 重绘：当呈现树renderTree中的一部分元素需要更新属性，而属性只会影响外观、风格而不影响布局，比如颜色、字体大小等，则称之为重绘。重绘的历史
虚拟dom和真实dom的区别？
- 虚拟dom不会进行重排和重绘
- 虚拟dom大大提高了真实dom处理的效率和浏览器的效率，即减少了真实dom重排和重绘的次数
虚拟dom是如何更新真实dom的
- 虚拟dom树的节点被改变时，会生成一颗新的虚拟dom树，diff算法会计算出被改变的部分
- 根据被改变的部分更新真实DOM
Diff算法
- 三种策略，顺序执行：Tree diff、Component Diff、Element Diff
- Tree Diff：对树的每一层进行遍历，找出不同的，只会同层比较
- Component Diff：
  - 如果都是同一类型的组件(即：两节点是同一个组件类的两个不同实例，比如：与)，按照原策略继续比较Virtual DOM树即可
  - 如果出现不是同一类型的组件，则将该组件判断为dirty component，从而替换整个组件下的所有子节点
- Element Diff：
  - 当节点处于同一层级时，diff 提供三种节点操作：
    
    INSERT_MARKUP（插入）：如果新的组件类型不在旧集合里，即全新的节点，需要对新节点执行插入操作。
    MOVE_EXISTING （移动）：旧集合中有新组件类型，且 element 是可更新的类型，generatorComponentChildren 已调用 receiveComponent，这种情况下 prevChild=nextChild，就需要做移动操作，可以复用以前的 DOM 节点。
    REMOVE_NODE （删除）：旧组件类型，在新集合里也有，但对应的 elememt 不同则不能直接复用和更新，需要执行删除

Vue的Dom树的理解相关推荐

vue 中的虚拟dom树
虚拟DOM树其实就是一个普通的js对象,它是用来描述一段HTML片段的当页面渲染的时候Vue会创建一颗虚拟DOM树当页面发生改变Vue会再创建一颗新的虚拟DOM树前后两颗新旧虚拟DOM树进行对比 ...
vue 如何生成一个dom元素_vue 学习心得——DOM树如何被构建
代码编辑不够友好,为更好一点的阅读体验,还是推荐原文链接:https://www.yuque.com/longtengsong/blog/bu09tk DOM 树是 vue 在构建实例的时候,通过 $ ...
深入理解 WKWebView (渲染篇) —— DOM 树的构建
全文12003字,预计阅读时间24分钟当客户端 App 主进程创建 WKWebView 对象时,会创建另外两个子进程:渲染进程与网络进程.主进程 WKWebView 发起请求时,先将请求转发给渲染进 ...
vue 生命周期_深入理解Vue实例生命周期
‍vue实例生命周期与生命周期钩子‍ 每个 Vue 实例在被创建时都会经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 为了让开发者在 ...
Vue中diff算法的理解
Vue中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结 ...
vue 虚拟dom和diff算法详解
虚拟dom是当前前端最流行的两个框架(vue和react)都用到的一种技术,都说他能帮助vue和react提升渲染性能,提升用户体验.那么今天我们来详细看看虚拟dom到底是个什么鬼虚拟dom的定义与 ...
Vue虚拟DOM原理及面试题（笔记）
Vue虚拟DOM原理及面试题(笔记) 面试题:请你阐述一下对vue虚拟dom的理解什么是虚拟dom? 虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构在vue中,每个组件都有一个re ...
Dom树 CSS树渲染树(render树) 规则、原理
前端不可不学的浏览器渲染机制,阿里年年问,去一个栽一个.听说百度也在考这个,你还不准备学吗? 首先你要了解浏览器渲染的顺序: 1.构建dom 树 2.构建css 树 3.构建渲染树 ...
对vue虚拟dom的研究
Vue.js通过编译将template 模板转换成渲染函数(render ) ,执行渲染函数就可以得到一个虚拟节点树在对 Model 进行操作的时候,会触发对应 Dep 中的 Watcher 对象. ...

Vue的Dom树的理解

Dom树

Vue的Dom树的理解相关推荐

最新文章

热门文章