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

应用背景

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

相关技术

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

实现原理

利用虚拟dom提升优化页面渲染_第1张图片
image.png

页面结果

利用虚拟dom提升优化页面渲染_第2张图片
利用虚拟dom提升优化页面渲染_第3张图片

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

你可能感兴趣的:(利用虚拟dom提升优化页面渲染)