有时候我们打开一个网页会发生卡顿，动画不流畅的现象，没有耐心的用户可能等不到页面加载完成就关闭这个网页了。而决定一个网页的流畅度的原因，除了用户自身的网速外，网页性能也是一个很重要的指标。如何尽可能的优化也是开发者需要关注的问题，尽可能的减少重绘和重排就是方法之一。那么什么是重绘和重排呢？

最近看JQ源码时发现经常有等号连用的情况，虽然个人不是很喜欢这种写法，但有些时候确实能精简代码长度。这里做个小结，以后阅读他人代码时也方便理解。

为了改掉自己遇事不决DIV的坏习惯，对语义化标签常用场景按照自己的理解做一个整理随时查询，争取养成使用习惯。

在JavaScript中，我们通常将数据以对象字面量或数组的形式存储，当需要时我们通过一些方法来提取并存在同名的本地变量上。虽然语法简单，但当数据量增大时，或者数据结构比较复杂时，提取信息就会变得困难。ES6新增的结构语法就是为了解决这个问题。

我们先看这样一个例子：

var a = 'Hello';
(function(){
    alert(a); //输出结果为undefined
    var a = 'World';
})();

为什么a未定义实际上就是因为JavaScript的变量提升特性。这段代码实际上可以看作是这样:

var a = 'Hello';
(function(){
    var a;
    alert(a); //输出结果为undefined
    a = 'World';
})();

这就好理解了。但是为什么会存在这样一种特性呢？我们就必须从JS中查找变量和函数的机制——变量对象说起。

之前我们说到，当通过回调函数执行多步异步操作时，会创造难以理解和调试的代码，而且也缺乏控制异步操作时机的手段。比如想让两个异步操作同时运行，或者同时启动多个异步操作只采用某个结果，都很难做到。在这些情况下，通过使用ES6的新特性——Promise将能大幅度改善这种情况。

先看这样一个例子。

当上层的a浮动后，覆盖了下层的b。但当给b添加一个相对定位后，又覆盖了上层的a。

为什么一个relative定位属性就可以改变元素叠加的顺序呢？实际上就是元素的层叠规则在作怪。层叠规则就是CSS中的元素叠加后在视觉上谁上谁下的规则。为了深入理解这个规则，我们就从层叠顺序的应用范围——层叠上下文说起。

今天设计妹子有个要求让某个元素出现在浏览器中视口时触发某个动效。感觉是个比较常见的需求，因为浏览器中获取位置的方法实在是又多又杂，索性做个总结以后自己查起来也方便~

JS最有特点的一方面就在于它能轻易地处理异步编程。作为因互联网而生的语言，必须要求JS能响应用户的点击，按键，鼠标滚动之类的交互行为。但是JS引擎是单线程运行的，就是说浏览器无论在什么时候都只有一个线程在运行JS，那么如何配合浏览器内核处理这些异步事件呢？事实上除了处理JS的线程外，浏览器内核中还存在其他线程共同配合完成工作。我们就从头来说说JS的异步编程。

大家都知道，获取一个DOM元素的样式通过elem.style或者elem.getAttribute('style')都能实现。那么这两者有什么区别呢？