美文网首页
利用虚拟dom提升优化页面渲染

利用虚拟dom提升优化页面渲染

作者: _陈慧敏 | 来源:发表于2017-07-22 17:23 被阅读154次

应用背景

组里使用的前端框架View模拟Vue基础功能(为了在ie78中使用),同时跟移动端运用的Vue写法相似,可以提高开发效率。View基础功能是通过jq+underscore实现的(兼容ie),目前的render和repaint都是通过jq的html功能实现,由于页面数据改变次数较多,会导致页面重构重绘压力很大

相关技术

Pure-JavaScript-HTML5-Parser
simple-virtual-dom
htmlStr2svd

实现原理

image.png

页面结果

页面render和repaint的时间会有明显的缩短,当然虚拟dom的diff对比会造成额外的js运行,对比之下render和repaint对页面的开销会减少与额外js增加的开销

相关文章

  • 利用虚拟dom提升优化页面渲染

    应用背景 组里使用的前端框架View模拟Vue基础功能(为了在ie78中使用),同时跟移动端运用的Vue写法相似,...

  • 前端性能初步优化

    性能优化有两个方向 优化页面渲染 减小页面体积,提升网络加载 优化页面渲染 对于优化页面渲染可以进行如下方案来进行...

  • 虚拟dom

    vue执行 先去创建一个虚拟dom, 将生成的虚拟dom其渲染到页面。 虚拟dom是一个对象,能够表现出dom结构...

  • 【通俗易懂】虚拟DOM,如何更高效DIFF

    我们都知道,通过虚拟DOM,可以减少DOM操作,提高页面渲染性能 要实现虚拟DOM,主要三部曲: compile ...

  • 使用虚拟列表解决长列表卡顿

    理论 当我们有大量数据需要渲染时,会照成页面的卡顿,这是由于页面的dom太多照成的,我我们可以使用虚拟列表来优化显...

  • react的设计思想

    1.Virtual DOM(虚拟dom) 为什么要使用虚拟dom呢1.dom渲染在渲染中是最昂贵的,尽量减少dom...

  • (三)Vue-Snabbdom

    虚拟 DOM 的作用 维护视图和状态的关系 复杂视图情况下提升渲染性能 跨平台• 浏览器平台渲染DOM• 服务端渲...

  • 2020-06-09虚拟(Dom)+Diff算发

    虚拟Dom 创建虚拟DOM(创建文件element.js>如何创建Dom以及虚拟Dom渲染真实的Dom) 主文件(...

  • 虚拟DOM/DOM DIFF理解

    因为React、Vue框架的出现,页面渲染采用了更高效的虚拟DOM。 一个dom元素中有许多属性,操作dom是很耗...

  • vue.js简介

    特点 虚拟DOM1、DOM :成对出现的标签;PC上渲染还可以,但是在移动端渲染DOM效果很差;2、虚拟DOM 采...

网友评论

      本文标题:利用虚拟dom提升优化页面渲染

      本文链接:https://www.haomeiwen.com/subject/jspukxtx.html