濮成林

摘要： 在开发前端项目中，字体图标变得越来越常用。一方面因为它比图片使用起来方便，可以像字体一样修改大小和颜色；另一方面是因为它可以减少请求数量，优化前端性能。 iconfont的使用方法很简单，主要由三种引入方式：Unicode， Font Class，Symbol。不会的可以去官网看看：https:// 阅读全文

摘要： 一、作用域 Javascript的作用域规则是在编译阶段确定的，有声明时的位置决定。 JS中有全局作用域，函数作用域，块级作用域（ES6引入）。 1. 全局作用域 在整个程序生命周期内都是有效的，在任意的函数内部都能访问的变量或函数拥有全局作用域。以下几种情形拥有全局作用域： 1. 定义在最外层的变量和函数，拥有全局作用域。 2. 未声明直接复制的变量，拥有... 阅读全文

摘要： 一、函数对象和普通对象 凡是通过new Function()创建的都是函数对象，其它的都是普通对象。Function，Object，Array，Number，String，Boolean，Date是JS自带的函数对象。 二、原型规则 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么 阅读全文

摘要： DOM操作是昂贵的，为了减少DOM操作，才有了Virtual DOM。而Virtual DOM的关键就是通过对比新旧vnode，找出差异部分来更新节点。对比的关键算法就是Diff算法。 历史由来： diff算法历史悠久，并不是虚拟dom提出来的。早在linux系统中，就有diff命令，用于比较两个文 阅读全文

摘要： 为了更好的研究Virtual DOM，我选择了snabbdom来学习。相比Vue来说，snabbdom对于研究虚拟DOM更好，因为它里面没有其他干扰的东西，而且源码也比较少，因此研究起来更方便。 1. 初次体验虚拟DOM的魅力 首先我们先用snabbdom重写之前的例子： 点击change,发现只修 阅读全文

摘要： 1. 什么是Virtual DOM? Virtual DOM(虚拟DOM)是指用JS模拟DOM结构。本质上来讲VD是一个JS对象，并且至少包含三个属性：tag(html标签)，props(标签的属性，如class)，children(子元素对象)。 用JS模拟上面这段DOM结构： 2. 为什么需要V 阅读全文

摘要： 首先我们先明确一点：JavaScript是一门单线程语言。单线程也就是说同一时间只能执行一个任务，所有的任务都必须排队顺序执行。那么如果一个任务耗时很长，阻塞了其它任务的执行，就会给用户造成不友好的体验。那么JS是如何解决这个问题的呢？（注：H5提出了Web Worker标准，允许JavaScrip 阅读全文

摘要： 在搞清楚回流和重绘的概念之前，我们要清除浏览器的渲染过程。 解析生成DOM Tree（此时包含所有节点，包括display：none）; 根据CSS Object Module(CCSSOM)计算节点的几何属性（坐标和大小）（margin,pading,height,width等），生成Render 阅读全文

摘要： 浏览器的内核主要分为渲染引擎和JS引擎。目前市面上常见的浏览器内核可以分为这四种：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。这里面大家最耳熟能详的可能就是 Webkit 内核了，Webkit 内核是当下浏览器世界真正的霸主。 页 阅读全文