精华内容
下载资源
问答
  • Vue虚拟DOM原理及面试题(笔记) 面试题:请你阐述一下对vue虚拟dom的理解 什么是虚拟dom? 虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构 在vue中,每个组件都有一个render函数,每个render函数...

    Vue虚拟DOM原理及面试题(笔记)

    面试题:请你阐述一下对vue虚拟dom的理解

    1. 什么是虚拟dom?

      虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构

      在vue中,每个组件都有一个render函数,每个render函数都会返回一个虚拟dom树,这也就意味着每个组件都对应一棵虚拟DOM树

    2. 为什么需要虚拟dom?

      vue中,渲染视图会调用render函数,这种渲染不仅发生在组件创建时,同时发生在视图依赖的数据更新时。如果在渲染时,直接使用真实DOM,由于真实DOM的创建、更新、插入等操作会带来大量的性能损耗,从而就会极大的降低渲染效率。

      因此,vue在渲染时,使用虚拟dom来替代真实dom,主要为解决渲染效率的问题。

    3. 虚拟dom是如何转换为真实dom的?

      在一个组件实例首次被渲染时,它先生成虚拟dom树,然后根据虚拟dom树创建真实dom,并把真实dom挂载到页面中合适的位置,此时,每个虚拟dom便会对应一个真实的dom。

      如果一个组件受响应式数据变化的影响,需要重新渲染时,它仍然会重新调用render函数,创建出一个新的虚拟dom树,用新树和旧树对比,通过对比,vue会找到最小更新量,然后更新必要的真实dom节点

      这样一来,就保证了对真实dom达到最小的改动。

    4. 模板和虚拟dom的关系

      vue框架中有一个compile模块,它主要负责将模板转换为render函数,而render函数调用后将得到虚拟dom。

      编译的过程分两步:

      1. 将模板字符串转换成为AST
      2. AST转换为render函数

      如果使用传统的引入方式,则编译时间发生在组件第一次加载时,这称之为运行时编译。

      如果是在vue-cli的默认配置下,编译发生在打包时,这称之为模板预编译。

      编译是一个极其耗费性能的操作,预编译可以有效的提高运行时的性能,而且,由于运行的时候已不需要编译,vue-cli在打包时会排除掉vue中的compile模块,以减少打包体积

      模板的存在,仅仅是为了让开发人员更加方便的书写界面代码

      vue最终运行的时候,最终需要的是render函数,而不是模板,因此,模板中的各种语法,在虚拟dom中都是不存在的,它们都会变成虚拟dom的配置

    图示:
    image-20210225140726003
    image-20210225144108143

    展开全文
  • vue 虚拟dom(vdom) 能写能用就行了呗,聊什么玩意儿的底层原理,知道1+1等于2不就得了么??????我想大多数都是这样想的吧。反正这也许就是我拿低工资的原因吧?哈哈哈哈丢人啊。 什么是虚拟dom呢 我们有必要先...

    vue 虚拟dom(vdom)

    能写能用就行了呗,聊什么玩意儿的底层原理,知道1+1等于2不就得了么??????我想大多数都是这样想的吧。反正这也许就是我拿低工资的原因吧?哈哈哈哈丢人啊。
    什么是虚拟dom呢
    我们有必要先了解下模板转换成视图的过程整个过程
    简单点讲,在Vue的底层实现上,Vue将模板编译成虚拟DOM渲染函数。结合Vue自带的响应系统,在状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应到DOM操作上。
    dom的解析流程
    浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting
    第一步,用HTML分析器,分析HTML元素,构建一颗DOM树(标记化和树构建)。
    第二步,用CSS分析器,分析CSS文件和元素上的inline样式,生成页面的样式表。
    第三步,将DOM树和样式表,关联起来,构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法,接受样式信息,返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。
    第四步,有了Render树,浏览器开始布局,为每个Render树上的节点确定一个在显示屏上出现的精确坐标。
    第五步,Render树和节点显示坐标都有了,就调用每个节点paint方法,把它们绘制出来。

    为什么要用虚拟dom呢?来看下js用dom操作的代价

    用我们传统的开发模式,原生JS或JQ操作DOM时,浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中,我需要更新10个DOM节点,浏览器收到第一个DOM请求后并不知道还有9次更新操作,因此会马上执行流程,最终执行10次。例如,第一次计算完,紧接着下一个DOM更新请求,这个节点的坐标值就变了,前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新,操作DOM的代价仍旧是昂贵的,频繁操作还是会出现页面卡顿,影响用户体验。

    那么为什么用虚拟dom呢?

    Web界面由DOM树(树的意思是数据结构)来构建,当其中一部分发生变化时,其实就是对应某个DOM节点发生了变化,
    虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前,若一次操作中有10次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地一个JS对象中,最终将这个JS对象一次性attch到DOM树上,再进行后续操作,避免大量无谓的计算量。所以,用JS对象模拟DOM节点的好处是,页面的更新可以先全部反映在JS对象(虚拟DOM)上,操作内存中的JS对象的速度显然要更快,等更新完成后,再将最终的JS对象映射成真实的DOM,交由浏览器去绘制。

    我自己不严谨的理解

    哎算了对于我这种小渣渣理解其含义,说白了就是为了提高代码效率,渲染效果,就如往常的js jquery这些使用dom操作时都是一段复杂的过程,整个过程要遍历属性,标签啦,就是在你的代码上一遍遍寻找大半天还不知道有没有收获,很慢。而且做多件事情的时候只能一件件去做,浪费很多时间,而我们的虚拟dom呢,就是,把你想要做的事情都用小本子记起来(记在本地js对象上)在虚拟dom上更新完成后,再拿到真是的dom上去渲染,然后交给浏览器绘制页面呀。从头到末尾,人家知道每一步要做什么,而且可以同时做,还不会等到你的页面渲染完成后才出发,人家可是早早出发了,
    还需要一段历程啊。希望小伙伴门加油啊,虽然很难,解决她不就体验征服的乐趣了吗

    展开全文
  • 前端主流框架 vue 和 react 中都使用了虚拟DOM技术,DOM-DIFF算法也是现在前端面试中的必考题目,那么如何才能真正深刻理解虚拟DOM和DOM-DIFF原理呢?最好的办法莫...

    前端主流框架 vue 和 react 中都使用了虚拟DOM技术,DOM-DIFF算法也是现在前端面试中的必考题目,那么如何才能真正深刻理解虚拟DOM和DOM-DIFF原理呢?

    好的办法莫过于亲手实现它了,快扫码吧,我们从零手写一个Vue虚拟DOM和DOM-DIFF算法!

    (长按识别上方二维码立即学习!

    历史学员好评,国内口碑与深度绝佳的前端架构课程

    ◆ ◆ ◆  ◆ 

    关于珠峰培训

    珠峰培训,专注前端,十年沉淀,课程体系系统全面,从零基础就业班,到提高进阶的架构课,既有雪中送炭,又有锦上添花。

    珠峰培训、成就他人、成就自己,使命所在,忘我前行!

    展开全文
  • vue虚拟DOM和diff算法,是Vue面试的最后一招,当然也是极其简单了,先说Virtual Dom,来一句概念: 用js来模拟DOM中的节点。传说中的虚拟DOM。 是不是一下子秒懂 没懂再来一张 Virtual Dom就先这样,理解了就...

    虚拟DOM:

    虚拟 DOM 的最终目标是将虚拟节点渲染到视图上但是如果直接使用虚拟节点覆盖旧节点的话,会有很多不必要的 DOM操作:比如有一个ul标签 然后里面有很多的li 其中的一个li需要变化 就用新的ul去替换旧的ul 这样会造成性能上的浪费

    Diff算法:

    用 JS 对象结构表示 DOM 树的结构;然后用这个树构造一个真正的 DOM 树,插到文档中状态改变的时候,重新构造一个新的对象树。然后用新的树和旧的树做比较,记录两棵树差异 把记录的差异应用到正真的DOM树上 然后更新页面

    展开全文
  • 1.前言虚拟DOM,这个名词作为当下的前端开发人员你一定不会陌生,至少会略有耳闻,但不会闻所未闻吧。...2. 虚拟DOM简介由于本系列文章是针对Vue源码深入学习的,所以着重分析在Vue中对虚拟DOM是如何实现的,而对于...
  • 至于什么是虚拟dom,是面试必懂的东西,这里不赘述了 用法: createElement()方法,别名是h(),它有三个参数,前2必选, 栗子: h(“p”, { style: “color:red” }, “是否让这个预约定金活动立刻结束?”) 参数一...
  • 虚拟DOM Web界面由DOM树(树的意思是数据结构)来构建,当其中一部分发生变化时,其实就是对应某个DOM节点发生了变化。 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前,若一次操作中有10次更新DOM的动作,...
  • vue核心之虚拟DOM一、真实DOM和其解析流程?二、JS操作真实DOM的代价!三、为什么需要虚拟DOM,它有什么好处?四、实现虚拟DOM 一、真实DOM和其解析流程? 浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树...
  • vue虚拟DOM和diff算法,是Vue面试的最后一招,当然也是极其简单了,先说Virtual Dom,来一句概念: 用js来模拟DOM中的节点。传说中的虚拟DOM。 再来一张图:   是不是一下子秒懂 没懂再来一张  Virtual Dom就...
  • 虚拟dom这个东东其实我之前也不知道,之前一直以为是因为vue等的这些mvvm框架就是因为数据驱动页面,减少了大量的dom操作,所以才会性能更好。 知道又一次去面试面试官问到知道为什么vue等的这些mvvm框架比传统的...
  • 面试的过程中,可能也会被问到对虚拟dom的理解,像这种面试题是比较宽泛的,面试官想知道你到底知道多少?既然是理解,那就只能是知无不言言无不尽,尽量组织下语言多说点,这样才显得专业素养比较高,接下来,我来...
  • Vue中的虚拟dom

    千次阅读 2020-08-10 11:20:27
    传说中的虚拟DOM。 再来一张图:   是不是一下子秒懂 没懂再来一张  Virtual Dom就先这样,理解了就OK,下面我们了解一下Diff,老规矩先来一句概念: diff算法就是进行虚拟节点对比,并返回一个patch对象,用来...
  • 作为国内应用最广的两个框架,Vue 和 React 是前端必须掌握的内容,也是面试的重点。但大多数读者都只擅长其中一个框架,当面试涉及到另一个框架的内容时,就答不好了。比如虚拟dom,两个...
  • [vue]之虚拟dom -- diff

    2019-03-27 08:38:45
    近段时间开始写vue项目,以及在面试中遇到关于vue...1.关于vue虚拟dom渲染到真实dom的简单实现 // 虚拟DOM元素的类,构建实例对象,用来描述DOM class Element { constructor(type, props, children) { this.type...
  • 面试中经常会被问到的虚拟dom究竟是什么?我相信很多使用Vue框架的小伙伴绝对会思考过这个问题,我自己也经常碰到。如果你觉得自己还是对其概念不够完全理解,那么阅读一下这篇文章吧。文章会逐步介绍虚拟DOM以及Vue...
  • 一、什么是虚拟DOM虚拟 DOM (Virtual DOM )这个概念相信大家都不陌生,从 React 到 Vue ,虚拟 DOM 为这两个框架都带来了跨平台的能力(React-Nati...
  • 官方概念: Vue通过建立一个虚拟dom数对真实的dom发生的变化保持追踪 一棵真实的dom树的渲染需要先解析css样式和dom树,然后将其整合成一棵渲染树,再通过布局算法去计算每个节点在浏览器中的位置,最终输出到...
  • 传说中的虚拟DOM。 Virtual Dom就先这样,理解了就OK,下面我们了解一下Diff,老规矩先来一句概念: diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去...
  • 什么是虚拟dom? 它是一个object对象模型 用来模拟真实的dom 作用是高效的渲染页面 减少不必要的dom操作 提高渲染效率 什么是diff算法? diff算法就是用JavaScript来表示一个dom树的结构 然后用这个dom去构建一个...
  • 面试中经常会被问到的虚拟dom究竟是什么?我相信很多使用Vue框架的小伙伴绝对会思考过这个问题,我自己也经常碰到。如果你觉得自己还是对其概念不够完全理解,那么阅读一下这篇文章吧。文章会逐步介绍虚拟DOM以及Vue...
  • 虽然这是面试的后端,但是作为前端,如果问为什么类似vue,react这些会有生命周期?有什么用?那如果这样问我,我感觉空气会突然几秒…仔细一想貌似也不是很难理解,在使用这类框架编码时我们会发现除了html有个id为...
  • vue虚拟DOM和diff算法,是Vue面试的最后一招,当然也是极其简单了,先说Virtual Dom,来一句概念: 用js来模拟DOM中的节点。传说中的虚拟DOM。 再来一张图:   是不是一下子秒懂 没懂再来一张  Virtual Dom就...
  • 虚拟DOM与DOM Diff 的原理 虚拟DOM DOM 操作慢是对比于JS原生API,如数组操作,任何基于DOM的库(VUE/React)都不可能在操作DOM时比DOM快。 他是什么? 一个能代表DOM树的对象,同窗含有标签名、标签上的属性、事件...
  • 你甚至可能吭哧吭哧背了一大堆的面试题,可是,你真的懂虚拟DOM和diff算法吗?也许,你依然是末学肤受,只混了个略懂,面试时一被追问,就招架不住现了原形。 你说:老太太靠墙喝粥, 卑鄙!无耻!下流! 面试问...
  • 作为国内应用最广的两个框架,Vue 和 React 是前端必须掌握的内容,也是面试的重点。但大多数读者都只擅长其中一个框架,当面试涉及到另一个框架的内容时,就答不好了。比如虚拟dom,两个...
  • [vue] 如何实现一个虚拟DOM?说说你的思路 虚拟DOM本身是一个JavaScript对象模拟真实DOM ,用对象的属性去描述一个DOM节点,最终也只是一个真实DOM的映射 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 371
精华内容 148
关键字:

vue虚拟dom面试

vue 订阅