04 2019 档案

Virtual DOM 系列三：Diff算法
摘要：DOM操作是昂贵的，为了减少DOM操作，才有了Virtual DOM。而Virtual DOM的关键就是通过对比新旧vnode，找出差异部分来更新节点。对比的关键算法就是Diff算法。 历史由来： diff算法历史悠久，并不是虚拟dom提出来的。早在linux系统中，就有diff命令，用于比较两个文 阅读全文
posted @ 2019-04-29 16:33 濮成林 阅读(713) 评论(0) 推荐(0) 编辑
Virtual DOM 系列二：核心API
摘要：为了更好的研究Virtual DOM，我选择了snabbdom来学习。相比Vue来说，snabbdom对于研究虚拟DOM更好，因为它里面没有其他干扰的东西，而且源码也比较少，因此研究起来更方便。 1. 初次体验虚拟DOM的魅力 首先我们先用snabbdom重写之前的例子： 点击change,发现只修 阅读全文
posted @ 2019-04-29 16:29 濮成林 阅读(477) 评论(0) 推荐(0) 编辑
Virtual DOM 系列一：认识虚拟DOM
摘要：1. 什么是Virtual DOM? Virtual DOM(虚拟DOM)是指用JS模拟DOM结构。本质上来讲VD是一个JS对象，并且至少包含三个属性：tag(html标签)，props(标签的属性，如class)，children(子元素对象)。 用JS模拟上面这段DOM结构： 2. 为什么需要V 阅读全文
posted @ 2019-04-29 16:22 濮成林 阅读(297) 评论(0) 推荐(0) 编辑
JS学习笔记：（三）JS执行机制
摘要：首先我们先明确一点：JavaScript是一门单线程语言。单线程也就是说同一时间只能执行一个任务，所有的任务都必须排队顺序执行。那么如果一个任务耗时很长，阻塞了其它任务的执行，就会给用户造成不友好的体验。那么JS是如何解决这个问题的呢？（注：H5提出了Web Worker标准，允许JavaScrip 阅读全文
posted @ 2019-04-22 15:17 濮成林 阅读(203) 评论(0) 推荐(0) 编辑
JS学习笔记：（二）回流和重绘
摘要：在搞清楚回流和重绘的概念之前，我们要清除浏览器的渲染过程。 解析生成DOM Tree（此时包含所有节点，包括display：none）; 根据CSS Object Module(CCSSOM)计算节点的几何属性（坐标和大小）（margin,pading,height,width等），生成Render 阅读全文
posted @ 2019-04-22 13:55 濮成林 阅读(1632) 评论(1) 推荐(0) 编辑
JS学习笔记：（一）浏览器页面渲染机制
摘要：浏览器的内核主要分为渲染引擎和JS引擎。目前市面上常见的浏览器内核可以分为这四种：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。这里面大家最耳熟能详的可能就是 Webkit 内核了，Webkit 内核是当下浏览器世界真正的霸主。 页 阅读全文
posted @ 2019-04-22 11:50 濮成林 阅读(1423) 评论(0) 推荐(0) 编辑