浏览器的事件循环，前端再熟悉不过了，每天都会接触的东西。但我以前一直都是死记硬背：事件任务队列分为macrotask和microtask，浏览器先从macrotask取出一个任务执行，再执行microtask内的所有任务，接着又去macrotask取出一个任务执行...，这样一直循环下去。但是对于下面的代码，我一直懵逼，setTimeout属于macrotask...

公司的前端项目是上报了各项性能数据的，如首屏时间、onload时间、网络用时等；由于用户可能处于各类环境中，如不同的网络环境、机型差异、同一手机的不同运行状态等，导致性能数据会有较大的波动，而这些异常数据对平均值的影响是非常大的，因此不能简单地用平均值描述性能状况，而应该做更加深入地分析数据。通过对性...

Tabris.js是一个移动应用开发框架，支持完全用JavaScript实现的一套代码来开发iOS、Android、Windows应用；个人观点，如果React Native的上手难度系数是8，那么Tabris.js的上手难度系数应该不到6。 文档清晰，非常适合前端开发人员的开发思路 支持线上构建，不需要做复杂的本地环境配置，只需要安装一个开发者app就可以...

初始化完成后，发现index.html中多了对build.js的引用，而webapck的完整配置模板中的index.html是没有对输出文件build.js的引用的，这引起我的注意，决定看看为何有这样的差异。

上一次已经提到，图的遍历一般有两种算法，即广度优先和深度优先。其中深度优先搜索算法会从第一个指定的顶点开始遍历图，沿着路径直到这条路径最后一个顶点，接着原路回退并探索下一条路径。换句话说，它是先深度后广度地访问顶点，如下图1。

上一次已经提到，图的遍历一般有两种算法，即广度优先和深度优先。其中广度优先搜索算法会从指定的第一个顶点开始遍历图，先访问其所有的相邻点，就像一次访问图的一层。换句话说，就是先宽后深地访问顶点，如图1。

图和散列表、二叉树一样，是一种非线性数据结构。如图1所示，图由一系列顶点以及连接顶点的边构成。由一条边连接在一起的顶点成为相邻顶点，比如A和B、A和D是相邻的，而A和E不是相邻的。一个顶点相邻顶点的数量叫作度，比如A的度为3、D的度为4。路径指相邻顶点的一个连续序列，如ABEI、ACDG；简单路径指不包含重复顶点的...

现在的前端开发过程中，难免需要在命令行中敲一些简单的命令；最常见的如npm run dev、npm run build、npm run test等，这些命令还算简单，每天敲十来次也勉强可以接受；但是某些复杂一点的命令，或者命令的参数每次敲的时候都是不定的，这就非常麻烦了。下面以eslint自动修复.vue文件中的错误为例，通过配置Webstorm来...

树同散列表一样，是一种非顺序数据结构。现实中树的例子有家谱、公司组织架构图及其它树形结构关系。树由一系列节点构成，每个节点都有一个父节点（除根节点外）以及零个或多个子节点，如图：

普通二叉搜索树可能出现一条分支有多层，而其他分支却只有几层的情况，如图1所示，这会导致添加、移除和搜索树具有性能问题。因此提出了自平衡二叉树的概念，AVL树（阿德尔森-维尔斯和兰迪斯树）是自平衡二叉树的一种，AVL树的任一子节点的左右两侧子树的高度之差不超过1，所以它也被称为高度平衡树。

散列表是字典（键、值对）的一种实现方式。每次在字典中获取一个值，都需要重复遍历字典，如果用散列表，字典中的每个key都对应一个确定的位置，从而不再需要遍历。以电子邮件地址簿为例，每个名字（key）对应一个邮件地址，用散列函数计算每个key在散列表中的位置（这里使用key的所有字符的ASCII码值相加），如图：

定义 通俗地说，字典就是键值对[键，值]，是键到值的映射关系。 方法 set(key,value)：向字典中添加新元素。 remove(key)：通过使用键值来从字典中移除键值对应的数据值。 has(key)：如果某个键值存在于这个字典中，则返回true，反之则返回false。 get(key)：通过键值查找特定的数值并返回。 clear()：将这个字典中的所...

前端自动化构建工具，我个人将其分为两类：构建工具、模块化工具。但由于模块化工具的功能越来越丰富，两者之间的界限也越来越模糊。构建工具主要有：Gulp和Grunt模块化工具主要有：Webpack、Browserify，以及浏览器端的模块化实现SeaJs、RequireJs

:after伪类在元素末尾插入了一个包含空格的字符，并设置display为table display:table会创建一个匿名的table-cell，从而触发块级上下文（BFC），因为容器内float的元素也是BFC，由于BFC有不能互相重叠的特性，并且设置了clear: both，:after插入的元素会被挤到容器底部，从而将容器撑高。并且设置display:table后，conte...