原文：Optimising the front end for the browser
笔记：涂鸦码龙

优化关乎速度和满意度。

• 从用户体验（UX）角度，我们希望前端网页可以快速加载

• 从开发体验（DX）角度，我们希望前端是快速，简洁，规范的

  浏览器都做了什么

我们希望浏览器打开一个简单的网页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html>
  <head>
    <title>The "Click the button" page</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css" />
  </head>
  
  <body>
    <h1>
      Click the button.
    </h1>
    
    <button type="button">Click me</button>
    
    <script>
      var button = document.querySelector("button");
      button.style.fontWeight = "bold";
      button.addEventListener("click", function () {
        alert("Well done.");
      });
    </script>
  </body>
</html>

浏览器如何渲染网页

1. 使用 HTML 创建文档对象模型（DOM）
2. 使用 CSS 创建 CSS 对象模型（CSSOM）
3. 基于 DOM 和 CSSOM 执行脚本（Scripts）
4. 合并 DOM 和 CSSOM 形成渲染树（Render Tree）
5. 使用渲染树布局（Layout）所有元素
6. 渲染（Paint）所有元素

步骤一 — HTML

浏览器从上到下读取标签，把他们分解成节点，从而创建 DOM 。

HTML 加载优化策略

• 样式在顶部，脚本在底部

总体思路是尽可能早的加载样式，尽可能晚的加载脚本。原因是脚本执行之前，需要 HTML 和 CSS 解析完成，因此，样式尽可能的往顶部放，当底部脚本开始执行之前，样式有足够的时间完成计算。

进一步讲讲如何优化

• 最小化和压缩

方法可用于所有内容，包括 HTML，CSS，JavaScript，图片和其它资源。

最小化是移除所有多余的字符，包括空格，注释，多余的分号，等等。

压缩比如 GZip，大大压缩下载文件的大小

两种方法都用的情况下，资源加载量减少了 80% 到 90%。比如：bootstrap 节省了 87% 的流量。

• 无障碍

不会提升页面的下载速度，但会大大提升残障人士的满意度。给元素加上 aria 标签，图片提供 alt 文本，HTML 5 无障碍参见。

使用诸如 WAVE 的工具鉴别哪些地方可以提高可访问性。

步骤二 — CSS

当浏览器发现任何与节点相关的样式时，比如：外部，内部，或行内样式，立即停止渲染 DOM ，并利用这些节点创建 CSSOM。这就是 CSS “渲染阻塞“ 的由来。这里是不同类型样式的优缺点。

1
2
3
4
5
6
7
8
9
10
11
12

//外部样式
<link rel="stylesheet" href="styles.css">
// 内部样式
<style>
  h1 {
    font-size: 18px;
  }
</style>
// 行内样式
<button style="background-color: blue;">Click me</button>

CSSOM 节点创建与 DOM 节点创建类似，随后，两者合并如下：

CSSOM 的构建会阻塞页面的渲染，因此我们想尽早加载样式，

CSS 加载优化策略

• 使用 media 属性

media 属性指定加载样式的条件，比如：符合最大或最小分辨率？还是面向屏幕阅读器？

• 延迟加载 CSS

有些样式，比如：首屏以下的，或者不那么重要的，可以等待首屏最有价值的内容渲染完成再加载，可以使用脚本等待页面加载，然后再插入样式。

这有两个栗子：The future of loading CSS，Defer load CSS

• 只加载需要的样式

使用 uncss 类似的工具，尽量移除不需要的样式。

步骤三 — JavaScript

浏览器不断构建 DOM / CSSOM 节点，直到发现外部或者行内的脚本。

由于脚本可能需要访问或操作之前的 HTML 或样式，我们必须等待它们构建完成。

因此浏览器必须停止解析节点，完成构建 CSSOM，执行脚本，然后再继续。这就是 JavaScript 被称作“解析器阻塞”的原因。

脚本只能等到先前的 CSS 节点构建完成。

JavaScript 加载优化策略

• 异步加载脚本

脚本添加 async 属性，可以通知浏览器不要阻塞其余页面的加载，下载脚本处于较低的优先级。一旦下载完成，就可以执行。

async 适用于不影响 DOM 或 CSSOM 的脚本，对一些跟我们的代码无关的，不影响用户体验的外部脚本尤其适用，比如：分析统计脚本。

• 延迟加载脚本

defer 跟 async 非常相似，不会阻塞页面加载，但会等到 HTML 完成解析后再执行。

使用 defer 策略的 另一个好选择，或者也可以使用 addEventListener，了解更多，参加这里。

不幸的是 async 和 defer 对于行内的脚本不起作用，浏览器默认会编译执行它们。

• 操作之前克隆节点

多次操作 DOM 时可以尝试，首先克隆整个 DOM 节点更加高效，操作克隆后的节点，然后替换先前的节点，避免了多次重绘，降低了 CPU 和内存消耗，同时也避免了不必要的页面闪烁。

需要注意，克隆的时候并没有克隆事件监听。

• Preload/Prefetch/Prerender/Preconnect

这些新属性并不是所有的浏览器都支持。了解详情可以看这里：Prefetching, preloading, prebrowsing

步骤四 — 渲染树（Render Tree）

一旦所有节点已被解析，DOM 和 CSSOM 准备合并，浏览器便会构建渲染树。如果我们把节点想象成单词，那么对象模型就是句子，渲染树便是整个页面。

步骤五 — 布局（Layout）

布局阶段需要确定页面上所有元素的大小和位置。

步骤六 — 渲染（Paint）

最终的渲染阶段，会真正地光栅化屏幕上的像素，把页面呈现给用户。

整个过程耗时1秒或十分之一秒，我们的任务是让它更快。

如果 JavaScript 事件改变了页面的某部分，便会引起渲染树的重绘，并且迫使布局（Layout）和渲染（Paint）过程再次进行。

浏览器如何发起网络请求

当浏览器请求一个 URL，服务端会响应一些 HTML。

我们需要认识一个新术语，关键渲染路径（Critical Rendering Path (CRP)），就是浏览器渲染页面的步骤数，如下图。

关键路径长度

关键渲染路径的度量标准是路径长度。最理想的关键路径长度是1。

如果页面包含一些内部样式和 JavaScript ，关键路径发生以下改变。

新增两步，构建 CSSOM和执行脚本，因为我们的 HTML 有内部样式和脚本需要计算。由于没有外部请求，我们的关键路径长度没变。

但是注意，我们的 HTML 大小增加到了 2kb，某些地方还是受了影响。

关键字节数

三个度量标准之二出现了，关键字节数，它用来衡量渲染页面需要传送多少字节数。

如果你认为不需要外部资源，就大错特错了，外部资源可以被缓存。

我们使用一个外部 CSS 文件，一个外部 JavaScript 文件，和一个外部带 async 属性的 JavaScript 文件。关键路径图如下：

浏览器请求页面，构建 DOM，发现外部资源后开始下载，CSS 和 JavaScript 有较高的优先级，其它资源次之。

styles.css 和 app.js 通过另一个关键路径获取。暂时不获取 analytics.js ，因为加了 async 属性，浏览器将用另一个线程下载它，它处于较低优先级，不会阻塞页面渲染，也不影响关键路径。

关键文件

最后一个度量标准是关键文件，浏览器渲染页面需要下载的文件总量。以上例子，HTML 文件，CSS 和 JavaScript 文件算关键文件，async 的脚本不算。当然是文件越少越好。

回到关键路径长度

以上例子就是最长的渲染路径吗？我认为渲染页面时，我们仅需要下载 HTML，CSS 和 JavaScript 文件，仅通过两次服务器往返就做到了。

HTTP1 文件限制

我们浏览器的 HTTP1 协议，在同一个域名，同一次，允许下载的文件数有最大限制，范围从 2（老旧的浏览器）到 6（Edge，Chrome）。

各种浏览器请求文件的最大并发数，参见Maximum concurrent connections to the same domain for browsers。

通过把一些资源存放到影子域名，可以绕过这个限制，以达到最佳优化效果。

注意：不要把关键的 CSS 放到根域名之外的其他域名，有些场景下会对 DNS 查找和延迟起反作用。

HTTP2

如果网站使用了 HTTP2，并且用户的浏览器也兼容，则可以完全避开这个下载限制。

这里有个 HTTP2 测试网站。

TCP 往返限制

每一次服务器往返可以传送的最大数据量是 14kb，包括所有 HTML，CSS 和脚本的网络请求。

如果我们的 HTML，或者积累的资源请求超过 14kb时，需要多做一次服务器往返。

大魔法师

我们整个 HTML 页面可以很好的压缩， GZip 可以压缩到 2kb，远低于 14kb 的限制，因此，一次服务器往返就可以搞定。

关键路径度量: 长度 1，文件数 1，字节数 2kb

浏览器发现外部资源（CSS 和 JavaScript）时，发起请求开始下载它们。首要下载的 CSS 文件是 14kb，达到了往返传输的最大限制，因此增加了一条关键路径。

关键路径度量: 长度 2，文件数 2，字节数 16kb

余下的资源低于 14kb，但是总共有 7 个资源，由于网站未启用 HTTP2，我们的 Chrome，每一次往返仅可以下载 6 个文件。

关键路径度量: 长度 3，文件数 8，字节数 28kb

下载完最终文件，并开始渲染 DOM。

关键路径度量: 长度 4，文件数 9，字节数 30kb

基于以上的信息和知识，发起每个连接时，就可以准确地预估页面的性能了。

浏览器网络优化策略

• Pagespeed Insights

使用 Insights 鉴别性能问题，Chrome DevTools 也有个 audit 标签。

• 充分利用 Chrome 开发者工具

这篇文章 值得一读，帮你理解网络资源

• 在优质的环境里开发，在艰苦的环境里测试

开发时大可使用 1Tb SSD，32G 内存的 Macbook Pro ，但是性能测试时还是要到 Chrome 的 network 标签下模拟低带宽的情形，从而获取有价值的信息。

• 合并资源/文件

基本上，每接收到一个外部 CSS 和 JavaScript 文件，浏览器都会构建 CSSOM，执行脚本。尽管几个文件可以在一次往返中传送，但也浪费了浏览器的宝贵时间和资源，最好还是合并文件，减少不必要的加载。

• 首屏内容使用内部样式

内部 CSS 和 JavaScript 不需要请求外部资源，相反，外部资源又可以被缓存，并保持 DOM 轻量，两者没有非黑即白。

但是一个非常好的论点是首屏关键内容使用内部样式，可以避免请求额外的资源，节省时间做最有意义的渲染。

• 最小化/压缩图片

• 延迟加载图片

• 异步记载字体

• 是否真正需要 JavaScript / CSS?

原生 HTML 元素可以实现的行为是否用了脚本？是否有样式或者图标可以行内创建的，不需要内部/外部资源？比如：行内 SVG。

• CDN

可以利用 CDN（内容分发网络）存储资源，它会从离用户最近，延迟最低的位置分发到用户设备，加载时间更快。

延伸阅读

• Google 的优化文档
• 高性能浏览器网络

综述

关键渲染路径是最重要的，它使得网站优化有规律可循。需要关注3个指标：

1—关键字节数
2—关键文件数
3—关键路径长度

原文：“JavaScript Array Methods: Mutating vs. Non-Mutating”
笔记：涂鸦码龙

JavaScript 提供了多种新增，移除，替换数组元素的方法，但是有些会影响原来的数组；有些则不会，它是新建了一个数组。

注意：区分以下两个方法的不同点：

1. array.splice() 影响原来的数组
2. array.slice() 不影响原来的数组

I. 新增：影响原数组

使用 array.push() 和 array.ushift() 新增元素会影响原来的数组。

1
2
3

let mutatingAdd = ['a', 'b', 'c', 'd', 'e']; 
mutatingAdd.push('f'); // ['a', 'b', 'c', 'd', 'e', 'f']
mutatingAdd.unshift('z'); // ['z', 'b', 'c', 'd', 'e' 'f']

II. 新增：不影响原数组

两种方式新增元素不会影响原数组，第一种是 array.concat() 。

1
2
3
4

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = arr1.concat('f'); // ['a', 'b', 'c', 'd', 'e', 'f']  （注：原文有误，我做了修改 “.” ---> “,”）
console.log(arr1); // ['a', 'b', 'c', 'd', 'e']

第二种方法是使用 JavaScript 的展开（spread）操作符，展开操作符是三个点（…）

1
2
3
4

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = [...arr1, 'f']; // ['a', 'b', 'c', 'd', 'e', 'f']  
const arr3 = ['z', ...arr1]; // ['z', 'a', 'b', 'c', 'd', 'e']

展开操作符会复制原来的数组，从原数组取出所有元素，然后存入新的环境。

III. 移除：影响原数组

使用 array.pop() 和 array.shift() 移除数组元素时，会影响原来的数组。

1
2
3

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
mutatingRemove.pop(); // ['a', 'b', 'c', 'd']  
mutatingRemove.shift(); // ['b', 'c', 'd']

array.pop() 和 array.shift() 返回被移除的元素，你可以通过一个变量获取被移除的元素。

1
2
3
4
5
6
7
8
9

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];
const returnedValue1 = mutatingRemove.pop();  
console.log(mutatingRemove); // ['a', 'b', 'c', 'd']  
console.log(returnedValue1); // 'e'
const returnedValue2 = mutatingRemove.shift();  
console.log(mutatingRemove); // ['b', 'c', 'd']  
console.log(returnedValue2); // 'a'

array.splice() 也可以删除数组的元素。

1
2

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
mutatingRemove.splice(0, 2); // ['c', 'd', 'e']

像 array.pop() 和 array.shift() 一样，array.splice() 同样返回移除的元素。

1
2
3
4

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
let returnedItems = mutatingRemove.splice(0, 2);  
console.log(mutatingRemove); // ['c', 'd', 'e']  
console.log(returnedItems) // ['a', 'b']

IV. 移除：不影响原数组

JavaScript 的 array.filter() 方法基于原数组创建一个新数组，新数组仅包含匹配特定条件的元素。

1
2
3
4
5
6
7

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = arr1.filter(a => a !== 'e'); // ['a', 'b', 'c', 'd']（注：原文有误，我做了修改）  
// 或者
const arr2 = arr1.filter(a => {  
  return a !== 'e';
}); // ['a', 'b', 'c', 'd']（注：原文有误，我做了修改）

以上代码的条件是“不等于 ‘e’ ”，因此新数组（arr2）里面没有包含 ‘e’。

箭头函数的独特性：

单行箭头函数，’return’ 关键字是默认自带的，不需要手动书写。

可是，多行箭头函数就需要明确地返回一个值。

另一种不影响原数组的方式是 array.slice()（不要与 array.splice() 混淆）。

1
2
3

const arr1 = ['a', 'b', 'c', 'd', 'e'];  
const arr2 = arr1.slice(1, 5) // ['b', 'c', 'd', 'e']  
const arr3 = arr1.slice(2) // ['c', 'd', 'e']

V. 替换：影响原数组

如果知道替换哪一个元素，可以使用 array.splice() 。

1
2
3
4

let mutatingReplace = ['a', 'b', 'c', 'd', 'e'];  
mutatingReplace.splice(2, 1, 30); // ['a', 'b', 30, 'd', 'e']  
// 或者
mutatingReplace.splice(2, 1, 30, 31); // ['a', 'b', 30, 31, 'd', 'e']

VI. 替换：不影响原数组

可以使用 array.map() 创建一个新数组，并且可以检查每一个元素，根据特定的条件替换它们。

1
2
3
4
5
6
7

const arr1 = ['a', 'b', 'c', 'd', 'e']  
const arr2 = arr1.map(item => {  
  if(item === 'c') {
    item = 'CAT';
  }
  return item;
}); // ['a', 'b', 'CAT', 'd', 'e']

使用 array.map() 转换数据

array.map() 是个强力方法，可以用于转换数据，而不污染原先的数据源。

1
2
3

const origArr = ['a', 'b', 'c', 'd', 'e'];  
const transformedArr = origArr.map(n => n + 'Hi!'); // ['aHi!', 'bHi!', 'cHi!', 'dHi!', 'eHi!']  
console.log(origArr); // ['a', 'b', 'c', 'd', 'e']; // 原数组毫发无损

• React 主要用于浏览器端实现一些 UI 组件，也可用于服务端渲染。React 可以使用 HTML 提供的标签，也可封装自定义的组件，React 也提供直接操作 DOM 的方法；
• React Native 主要用于实现客户端应用（App）的 UI 组件，它只能使用 Facebook 封装的 Native 组件，或者自己封装的 Native 组件。开发中主要借助 JavaScript，基本告别 HTML 和 CSS 了，不过优点是可以用 ES6。

言归正传，正文开始

之前没搞过 React ，直接开撸的 React Native，使用过程也是各种踩坑填坑，磕磕绊绊，这里简单总结一下我用过的组件通信的几种方式吧。

React 最基础的 props 和 state

组件内部用 state

1
2
3
4
5
6
7
8
9
10
11
12
13

constructor(props) {
    super(props);
    this.state = {
        isOnline: true	//组件 state
    };
}
render() {
    if(this.state.isOnline){
        //...剩余代码
    }
    //...剩余代码
}

父子组件通信用 props

1
2
3
4
5
6
7
8
9
10
11
12
13

//父组件设置属性参数
<MyComponet isOnline={true} />
//子组件
class MyComponent extends Component {
    constructor(props) {
        super(props);
        //子组件获取属性
        let isOnline = this.props.isOnline;  
    }
    //...剩余代码
}

子父组件通信也可用 props

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//子组件
class MyComponent extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        //子组件给父组件的方法传参
        this.props.onChange('newVal');
    }
    render() {
        return (
            <View />
        );
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//父组件
class parentCpt extends Component {
    constructor(props) {
        super(props);
        this.state = {
            key: 'defVal'
        };
    }
    //父组件接受子组件的参数，并改变 state
    handleChange(val) {
        this.setState({
            key: val 
        });
    }
    render() {
        //...剩余代码
        return (
            <MyComponent onChange={(val) => {this.handleChange(val)}} />
        );
    }
}

使用 Refs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//子组件
class MyComponent extends Component {
    constructor(props) {
        super(props);
    }
    //开放的实例方法
    doIt() {
        //...做点什么
    }
    render() {
        return (
            <View />
        );
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//父组件
class parentCpt extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        //this.myCpt 保存组件的实例
        return (
            <MyComponent ref={(c) => {this.myCpt = c;}} />
        );
    }
    componentDidMount() {
        //调用组件的实例方法
        this.myCpt.doIt();
    }
}

使用 global

global 类似浏览器里的 window 对象，它是全局的，一处定义，所有组件都可以访问，一般用于存储一些全局的配置参数或方法。

使用场景：全局参数不想通过 props 层层组件传递，有些组件对此参数并不关心，只有嵌套的某个组件使用

1

global.isOnline = true;

使用 RCTDeviceEventEmitter

RCTDeviceEventEmitter 是一种事件机制，React Native 的文档只是草草带过，也可以使用 DeviceEventEmitter ，它是把 RCTDeviceEventEmitter 封装了一层，用法略不同。

按文档所言，RCTDeviceEventEmitter 主要用于 Native 发送事件给 JavaScript，实际上也可以用来发送自定义事件。

使用场景：多个组件都使用了异步模块，且异步模块之间有顺序依赖时，可以使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//引入模块
import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter';
//监听自定义事件
RCTDeviceEventEmitter.addListener('customEvt', (o) => {
    console.log(o.data);    //'some data'
    //做点其它的
});
//发送自定义事件，可传数据
RCTDeviceEventEmitter.emit('customEvt', {
    data: 'some data'
});

使用 AsyncStorage

这是官方提供的持久缓存的模块，类似浏览器端的 localStorage，用法也很类似，不过比 localStorage 多了不少 API。

使用场景：当然也类似，退出应用需要保存的少量数据，可以存在这里，至于大小限制，Android 貌似是 6M 。

1
2
3
4
5
6
7
8

import {
  AsyncStorage
} from 'react-native';
//设置
AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.');
//获取
AsyncStorage.getItem('@MySuperStore:key')

综上所述，这是我能想到的组件通信方式，其它想到了再补充吧。

原文：Filtered background with fallback for legibility
翻译：涂鸦码龙

你知道现在有多火吗？用这种很大的，高质量的，支持 Retina 屏的模糊的 JPEG 图片作为 header 背景 :

See the Pen Web site header, circa 2016 by Taylor Hunt (@tigt) on CodePen.

潜在的问题是如果浏览器不支持滤镜 filter，文字将不可读 。这违背了可访问性的原则，再完美的视觉也无济于事。

支持和不支持 filter 的效果对比

因此呢，你需要提前准备好处理模糊的图片，可是设计师偏要你实现动态模糊呢，图片不固定，跟 Apple 的效果一样一样的，咋办？如果是用户上传的图片又咋办？嗯，你需要一台图片处理服务器，听起来成本很高。

我碰巧想到一个妙招，让不支持 filter 的浏览器用颜色图层代替，方案并不完美，但是具有高可读性：

不支持 filter 的效果

基本实现

我用伪元素作为背景，因为给元素加 filter 比单纯给背景加 filter 兼容性更好 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.backdrop { position: relative }
.backdrop::after {
  content: "";
  /* 铺满整个父元素 */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  /* 放到父元素内容的下层 */
  z-index: -2;
  /* 像父元素一样展示背景 */
  background: #222 url("inspirational-landscape-and/or-laughing-with-salad.jpg");
}

加特效

此时，设计师发话了，让背景图模糊一下，再来个轻微变暗效果就更好了。

1
2

/* 不要忘记前缀，Safari >9.1 和所有 Chrome 仍然需要 -webkit- */
filter: blur(4px) brightness(75%);

这么做还远远不够，不支持 filter 的浏览器将严重影响阅读。

上妙招

是否听过 filter 有 opacity() 效果 ？对比广泛支持的 opacity 属性，它显得有点鸡肋，但是它的存在才使得兼容方案得以实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.backdrop::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  /* 把它放到其它伪元素的上面，但是仍在父元素内容的下面 */
  z-index: -1;
  /* 让遮罩层足够的暗，无论什么背景都可以看清楚上面的文字 */
  background: rbgba(0,0,0, 0.5);
  /* 使用滤镜完全隐藏它？？ */
  filter: opacity(0%);
}

如果支持 filter 滤镜，带图片的伪元素是模糊的，微微变暗的，这一黑色的遮罩层是完全透明的。如果不支持滤镜呢，显示效果并不完美，但是不会阻碍任何人阅读上面的文字。

CodePen 的例子在此，希望你喜欢：

See the Pen Filtered background with fallback for legibility by Taylor Hunt (@tigt) on CodePen.

其它 filter 滤镜的使用或许也能受此启发，我把它放到了我的锦囊里。

何不用 @supports 代替？

浏览器对 CSS 特性检测（@supports）的支持程度跟 filter 保持一致 ，替换以后代码更加清晰明了：

1
2
3

@supports (filter: blur(4px) brightness(75%)) or (-webkit-filter: blur(4px) brightness(75%)) {
  /* 浏览器支持 filter 的话... */
}

你完全可以这么写，全看个人喜好。我查阅了 CanIUse 的使用数据，有一些环境仍不支持 @supports ：

• Chrome 18–27
• Safari 8.x
• UC Browser 9.9（撰写本文时）

直到2016年5月，以上浏览器的联合使用份额是 ≈ 美国 3.6%、世界范围 10.5%（感谢大洋彼岸 UC 的盛行）。这些数字会随着时间流逝逐渐减少，到那时，如果想写更加清晰的 CSS 就推荐使用 @supports 了。

原文：4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them
笔记：涂鸦码龙

译者注：本文并没有逐字逐句的翻译，而是把我认为重要的信息做了翻译。如果您的英文熟练，可以直接阅读原文。

本文将探索常见的客户端 JavaScript 内存泄漏，以及如何使用 Chrome 开发工具发现问题。

简介

内存泄漏是每个开发者最终都要面对的问题，它是许多问题的根源：反应迟缓，崩溃，高延迟，以及其他应用问题。

什么是内存泄漏？

本质上，内存泄漏可以定义为：应用程序不再需要占用内存的时候，由于某些原因，内存没有被操作系统或可用内存池回收。编程语言管理内存的方式各不相同。只有开发者最清楚哪些内存不需要了，操作系统可以回收。一些编程语言提供了语言特性，可以帮助开发者做此类事情。另一些则寄希望于开发者对内存是否需要清晰明了。

JavaScript 内存管理

JavaScript 是一种垃圾回收语言。垃圾回收语言通过周期性地检查先前分配的内存是否可达，帮助开发者管理内存。换言之，垃圾回收语言减轻了“内存仍可用”及“内存仍可达”的问题。两者的区别是微妙而重要的：仅有开发者了解哪些内存在将来仍会使用，而不可达内存通过算法确定和标记，适时被操作系统回收。

JavaScript 内存泄漏

垃圾回收语言的内存泄漏主因是不需要的引用。理解它之前，还需了解垃圾回收语言如何辨别内存的可达与不可达。

Mark-and-sweep

大部分垃圾回收语言用的算法称之为 Mark-and-sweep 。算法由以下几步组成：

1. 垃圾回收器创建了一个“roots”列表。Roots 通常是代码中全局变量的引用。JavaScript 中，“window” 对象是一个全局变量，被当作 root 。window 对象总是存在，因此垃圾回收器可以检查它和它的所有子对象是否存在（即不是垃圾）；
2. 所有的 roots 被检查和标记为激活（即不是垃圾）。所有的子对象也被递归地检查。从 root 开始的所有对象如果是可达的，它就不被当作垃圾。
3. 所有未被标记的内存会被当做垃圾，收集器现在可以释放内存，归还给操作系统了。

现代的垃圾回收器改良了算法，但是本质是相同的：可达内存被标记，其余的被当作垃圾回收。

不需要的引用是指开发者明知内存引用不再需要，却由于某些原因，它仍被留在激活的 root 树中。在 JavaScript 中，不需要的引用是保留在代码中的变量，它不再需要，却指向一块本该被释放的内存。有些人认为这是开发者的错误。

为了理解 JavaScript 中最常见的内存泄漏，我们需要了解哪种方式的引用容易被遗忘。

三种类型的常见 JavaScript 内存泄漏

1：意外的全局变量

JavaScript 处理未定义变量的方式比较宽松：未定义的变量会在全局对象创建一个新变量。在浏览器中，全局对象是 window 。

1
2
3

function foo(arg) {
    bar = "this is a hidden global variable";
}

真相是：

1
2
3

function foo(arg) {
    window.bar = "this is an explicit global variable";
}

函数 foo 内部忘记使用 var ，意外创建了一个全局变量。此例泄漏了一个简单的字符串，无伤大雅，但是有更糟的情况。

另一种意外的全局变量可能由 this 创建：

1
2
3
4
5
6
7

function foo() {
    this.variable = "potential accidental global";
}
// Foo 调用自己，this 指向了全局对象（window）
// 而不是 undefined
foo();

在 JavaScript 文件头部加上 'use strict'，可以避免此类错误发生。启用严格模式解析 JavaScript ，避免意外的全局变量。

全局变量注意事项

尽管我们讨论了一些意外的全局变量，但是仍有一些明确的全局变量产生的垃圾。它们被定义为不可回收（除非定义为空或重新分配）。尤其当全局变量用于临时存储和处理大量信息时，需要多加小心。如果必须使用全局变量存储大量数据时，确保用完以后把它设置为 null 或者重新定义。与全局变量相关的增加内存消耗的一个主因是缓存。缓存数据是为了重用，缓存必须有一个大小上限才有用。高内存消耗导致缓存突破上限，因为缓存内容无法被回收。

2：被遗忘的计时器或回调函数

在 JavaScript 中使用 setInterval 非常平常。一段常见的代码：

1
2
3
4
5
6
7
8

var someResource = getData();
setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        // 处理 node 和 someResource
        node.innerHTML = JSON.stringify(someResource));
    }
}, 1000);

此例说明了什么：与节点或数据关联的计时器不再需要，node 对象可以删除，整个回调函数也不需要了。可是，计时器回调函数仍然没被回收（计时器停止才会被回收）。同时，someResource 如果存储了大量的数据，也是无法被回收的。

对于观察者的例子，一旦它们不再需要（或者关联的对象变成不可达），明确地移除它们非常重要。老的 IE 6 是无法处理循环引用的。如今，即使没有明确移除它们，一旦观察者对象变成不可达，大部分浏览器是可以回收观察者处理函数的。

观察者代码示例：

1
2
3
4
5
6

var element = document.getElementById('button');
function onClick(event) {
    element.innerHTML = 'text';
}
element.addEventListener('click', onClick);

对象观察者和循环引用注意事项

老版本的 IE 是无法检测 DOM 节点与 JavaScript 代码之间的循环引用，会导致内存泄漏。如今，现代的浏览器（包括 IE 和 Microsoft Edge）使用了更先进的垃圾回收算法，已经可以正确检测和处理循环引用了。换言之，回收节点内存时，不必非要调用 removeEventListener 了。

3：脱离 DOM 的引用

有时，保存 DOM 节点内部数据结构很有用。假如你想快速更新表格的几行内容，把每一行 DOM 存成字典（JSON 键值对）或者数组很有意义。此时，同样的 DOM 元素存在两个引用：一个在 DOM 树中，另一个在字典中。将来你决定删除这些行时，需要把两个引用都清除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var elements = {
    button: document.getElementById('button'),
    image: document.getElementById('image'),
    text: document.getElementById('text')
};
function doStuff() {
    image.src = 'http://some.url/image';
    button.click();
    console.log(text.innerHTML);
    // 更多逻辑
}
function removeButton() {
    // 按钮是 body 的后代元素
    document.body.removeChild(document.getElementById('button'));
    // 此时，仍旧存在一个全局的 #button 的引用
    // elements 字典。button 元素仍旧在内存中，不能被 GC 回收。
}

此外还要考虑 DOM 树内部或子节点的引用问题。假如你的 JavaScript 代码中保存了表格某一个 <td> 的引用。将来决定删除整个表格的时候，直觉认为 GC 会回收除了已保存的 <td> 以外的其它节点。实际情况并非如此：此 <td> 是表格的子节点，子元素与父元素是引用关系。由于代码保留了 <td> 的引用，导致整个表格仍待在内存中。保存 DOM 元素引用的时候，要小心谨慎。

4：闭包

闭包是 JavaScript 开发的一个关键方面：匿名函数可以访问父级作用域的变量。

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var theThing = null;
var replaceThing = function () {
  var originalThing = theThing;
  var unused = function () {
    if (originalThing)
      console.log("hi");
  };
  theThing = {
    longStr: new Array(1000000).join('*'),
    someMethod: function () {
      console.log(someMessage);
    }
  };
};
setInterval(replaceThing, 1000);

代码片段做了一件事情：每次调用 replaceThing ，theThing 得到一个包含一个大数组和一个新闭包（someMethod）的新对象。同时，变量 unused 是一个引用 originalThing 的闭包（先前的 replaceThing 又调用了 theThing ）。思绪混乱了吗？最重要的事情是，闭包的作用域一旦创建，它们有同样的父级作用域，作用域是共享的。someMethod 可以通过 theThing 使用，someMethod 与 unused 分享闭包作用域，尽管 unused 从未使用，它引用的 originalThing 迫使它保留在内存中（防止被回收）。当这段代码反复运行，就会看到内存占用不断上升，垃圾回收器（GC）并无法降低内存占用。本质上，闭包的链表已经创建，每一个闭包作用域携带一个指向大数组的间接的引用，造成严重的内存泄漏。

Meteor 的博文 解释了如何修复此种问题。在 replaceThing 的最后添加 originalThing = null 。

Chrome 内存剖析工具概览

Chrome 提供了一套很棒的检测 JavaScript 内存占用的工具。与内存相关的两个重要的工具：timeline 和 profiles。

Timeline

timeline 可以检测代码中不需要的内存。在此截图中，我们可以看到潜在的泄漏对象稳定的增长，数据采集快结束时，内存占用明显高于采集初期，Node（节点）的总量也很高。种种迹象表明，代码中存在 DOM 节点泄漏的情况。

Profiles

Profiles 是你可以花费大量时间关注的工具，它可以保存快照，对比 JavaScript 代码内存使用的不同快照，也可以记录时间分配。每一次结果包含不同类型的列表，与内存泄漏相关的有 summary（概要） 列表和 comparison（对照） 列表。

summary（概要） 列表展示了不同类型对象的分配及合计大小：shallow size（特定类型的所有对象的总大小），retained size（shallow size 加上其它与此关联的对象大小）。它还提供了一个概念，一个对象与关联的 GC root 的距离。

对比不同的快照的 comparison list 可以发现内存泄漏。

实例：使用 Chrome 发现内存泄漏

实质上有两种类型的泄漏：周期性的内存增长导致的泄漏，以及偶现的内存泄漏。显而易见，周期性的内存泄漏很容易发现；偶现的泄漏比较棘手，一般容易被忽视，偶尔发生一次可能被认为是优化问题，周期性发生的则被认为是必须解决的 bug。

以 Chrome 文档中的代码为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

var x = [];
function createSomeNodes() {
    var div,
        i = 100,
        frag = document.createDocumentFragment();
    for (;i > 0; i--) {
        div = document.createElement("div");
        div.appendChild(document.createTextNode(i + " - "+ new Date().toTimeString()));
        frag.appendChild(div);
    }
    document.getElementById("nodes").appendChild(frag);
}
function grow() {
    x.push(new Array(1000000).join('x'));
    createSomeNodes();
    setTimeout(grow,1000);
}

当 grow 执行的时候，开始创建 div 节点并插入到 DOM 中，并且给全局变量分配一个巨大的数组。通过以上提到的工具可以检测到内存稳定上升。

找出周期性增长的内存

timeline 标签擅长做这些。在 Chrome 中打开例子，打开 Dev Tools ，切换到 timeline，勾选 memory 并点击记录按钮，然后点击页面上的 The Button 按钮。过一阵停止记录看结果：

两种迹象显示出现了内存泄漏，图中的 Nodes（绿线）和 JS heap（蓝线）。Nodes 稳定增长，并未下降，这是个显著的信号。

JS heap 的内存占用也是稳定增长。由于垃圾收集器的影响，并不那么容易发现。图中显示内存占用忽涨忽跌，实际上每一次下跌之后，JS heap 的大小都比原先大了。换言之，尽管垃圾收集器不断的收集内存，内存还是周期性的泄漏了。

确定存在内存泄漏之后，我们找找根源所在。

保存两个快照

切换到 Chrome Dev Tools 的 profiles 标签，刷新页面，等页面刷新完成之后，点击 Take Heap Snapshot 保存快照作为基准。而后再次点击 The Button 按钮，等数秒以后，保存第二个快照。

筛选菜单选择 Summary，右侧选择 Objects allocated between Snapshot 1 and Snapshot 2，或者筛选菜单选择 Comparison ，然后可以看到一个对比列表。

此例很容易找到内存泄漏，看下 (string) 的 Size Delta Constructor，8MB，58个新对象。新对象被分配，但是没有释放，占用了8MB。

如果展开 (string) Constructor，会看到许多单独的内存分配。选择某一个单独的分配，下面的 retainers 会吸引我们的注意。

我们已选择的分配是数组的一部分，数组关联到 window 对象的 x 变量。这里展示了从巨大对象到无法回收的 root（window）的完整路径。我们已经找到了潜在的泄漏以及它的出处。

我们的例子还算简单，只泄漏了少量的 DOM 节点，利用以上提到的快照很容易发现。对于更大型的网站，Chrome 还提供了 Record Heap Allocations 功能。

Record heap allocations 找内存泄漏

回到 Chrome Dev Tools 的 profiles 标签，点击 Record Heap Allocations。工具运行的时候，注意顶部的蓝条，代表了内存分配，每一秒有大量的内存分配。运行几秒以后停止。

上图中可以看到工具的杀手锏：选择某一条时间线，可以看到这个时间段的内存分配情况。尽可能选择接近峰值的时间线，下面的列表仅显示了三种 constructor：其一是泄漏最严重的（string），下一个是关联的 DOM 分配，最后一个是 Text constructor（DOM 叶子节点包含的文本）。

从列表中选择一个 HTMLDivElement constructor，然后选择 Allocation stack。

现在知道元素被分配到哪里了吧（grow -> createSomeNodes），仔细观察一下图中的时间线，发现 HTMLDivElement constructor 调用了许多次，意味着内存一直被占用，无法被 GC 回收，我们知道了这些对象被分配的确切位置（createSomeNodes）。回到代码本身，探讨下如何修复内存泄漏吧。

另一个有用的特性

在 heap allocations 的结果区域，选择 Allocation。

这个视图呈现了内存分配相关的功能列表，我们立刻看到了 grow 和 createSomeNodes。当选择 grow 时，看看相关的 object constructor，清楚地看到 (string), HTMLDivElement 和 Text 泄漏了。

结合以上提到的工具，可以轻松找到内存泄漏。

延伸阅读

• Memory Management - Mozilla Developer Network
• JScript Memory Leaks - Douglas Crockford (old, in relation to Internet Explorer 6 leaks)
• JavaScript Memory Profiling - Chrome Developer Docs
• Memory Diagnosis - Google Developers
• An Interesting Kind of JavaScript Memory Leak - Meteor blog
• Grokking V8 closures

原文：Debouncing and Throttling Explained Through Examples
笔记：涂鸦码龙

防抖（Debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似而又不同。

当我们给 DOM 绑定事件的时候，加了防抖和节流的函数变得特别有用。为什么呢？因为我们在事件和函数执行之间加了一个控制层。记住，我们是无法控制 DOM 事件触发频率的。

看下滚动事件的例子：

See the Pen Scroll events counter by Corbacho (@dcorb) on CodePen.

当使用触控板，滚动滚轮，或者拖拽滚动条的时候，一秒可以轻松触发30次事件。经我的测试，在智能手机上，慢慢滚动一下，一秒可以触发事件100次之多。这么高的执行频率，你的滚动回调函数压力大吗？

早在2011年，Twitter 网站抛出了一个问题：向下滚动 Twitter 信息流的时候，变得很慢，很迟钝。John Resig 发表了一篇博客解释这个问题，文中解释到直接给 scroll 事件关联昂贵的函数，是多么糟糕的主意。

John（5年前）建议的解决方案是，在 onScroll 事件外部，每 250ms 循环执行一次。简单的技巧，避免了影响用户体验。

现如今，有一些稍微高端的方式处理事件。我来结合用例介绍下 Debounce，Throttle 和 requestAnimationFrame 吧。

防抖动（Debounce）

防抖技术可以把多个顺序地调用合并成一次。

假想一下，你在电梯中，门快要关了，突然有人准备上来。电梯并没有改变楼层，而是再次打开梯门。电梯延迟了改变楼层的功能，但是优化了资源。

在顶部按钮上点击或移动鼠标试一下：

See the Pen Debounce. Trailing by Corbacho (@dcorb) on CodePen.

你可以看到连续快速的事件是如何被一个 debounce 事件替代的。但是如果事件触发的时间间隔过长，debounce 则不会生效。

前缘（或者“immediate”）

你会发现，直到事件停止快速执行以后，debounce 事件才会触发相应功能。为何不立即触发呢？那样的话就跟原本的非 debounce 处理无异了。

直到两次快速调用之间的停顿结束，事件才会再次触发。

这是带 leading 标记的例子：

前缘 debounce 的例子

在 underscore.js 中，选项叫 immediate ，而不是 leading：

See the Pen Debounce. Leading by Corbacho (@dcorb) on CodePen.

Debounce 实现

我首次看到 debounce 的 JavaScript 实现是在 2009 年的 John Hann 的博文。

不久后，Ben Alman 做了个 jQuery 插件（不再维护），一年后 Jeremy Ashkenas 把它加入了 underscore.js。而后加入了 Lodash 。

See the Pen New example by Corbacho (@dcorb) on CodePen.

Lodash 给 _.debounce 和 _.throttle 添加了不少特性。之前的 immediate 被 leading（最前面） 和 trailing（最后面） 选项取代。你可以选一种，或者都选，默认只有 trailing 启用。

新的 maxWait 选项（仅 Lodash 有）本文未提及，但是也很有用。事实上，throttle 方法是用 _.debounce 加 maxWait 实现的，你可以看 lodash 源码。

Debounce 实例

调整大小的例子

调整桌面浏览器窗口大小的时候，会触发很多次 resize 事件。

看下面 demo：

See the Pen Debounce Resize Event Example by Corbacho (@dcorb) on CodePen.

如你所见，我们为 resize 事件使用了默认的 trailing 选项，因为我们只关心用户停止调整大小后的最终值。

基于 AJAX 请求的自动完成功能，通过 keypress 触发

为什么用户还在输入的时候，每隔50ms就向服务器发送一次 AJAX 请求？_.debounce 可以帮忙，当用户停止输入的时候，再发送请求。

此处也不需要 leading 标记，我们想等最后一个字符输完。

See the Pen Debouncing keystrokes Example by Corbacho (@dcorb) on CodePen.

相似的使用场景还有，直到用户输完，才验证输入的正确性，显示错误信息。

如何使用 debounce 和 throttle 以及常见的坑

自己造一个 debounce / throttle 的轮子看起来多么诱人，或者随便找个博文复制过来。我是建议直接使用 underscore 或 Lodash 。如果仅需要 _.debounce 和 _.throttle 方法，可以使用 Lodash 的自定义构建工具，生成一个 2KB 的压缩库。使用以下的简单命令即可：

1
2

npm i -g lodash-cli
lodash-cli include=debounce,throttle

常见的坑是，不止一次地调用 _.debounce 方法：

1
2
3
4
5
6
7

// 错误
$(window).on('scroll', function() {
   _.debounce(doSomething, 300); 
});
// 正确
$(window).on('scroll', _.debounce(doSomething, 200));

debounce 方法保存到一个变量以后，就可以用它的私有方法 debounced_version.cancel()，lodash 和 underscore.js 都有效。

1
2
3
4
5

var debounced_version = _.debounce(doSomething, 200);
$(window).on('scroll', debounced_version);
// 如果需要的话
debounced_version.cancel();

Throttle（节流阀）

使用 _.throttle 的时候，只允许一个函数在 X 毫秒内执行一次。

跟 debounce 主要的不同在于，throttle 保证 X 毫秒内至少执行一次。

节流阀实例

无限滚动

用户向下滚动无限滚动页面，需要检查滚动位置距底部多远，如果邻近底部了，我们可以发 AJAX 请求获取更多的数据插入到页面中。

我们心爱的 _.debounce 就不适用了，只有当用户停止滚动的时候它才会触发。只要用户滚动至邻近底部时，我们就想获取内容。

使用 _.throttle 可以保证我们不断检查距离底部有多远。

See the Pen Infinite scrolling throttled by Corbacho (@dcorb) on CodePen.

requestAnimationFrame（rAF）

requestAnimationFrame 是另一种限速执行的方式。

跟 _.throttle(dosomething, 16) 等价。它是高保真的，如果追求更好的精确度的话，可以用浏览器原生的 API 。

可以使用 rAF API 替换 throttle 方法，考虑一下优缺点：

优点

• 动画保持 60fps（每一帧 16 ms），浏览器内部决定渲染的最佳时机
• 简洁标准的 API，后期维护成本低

缺点

• 动画的开始/取消需要开发者自己控制，不像 ‘.debounce’ 或 ‘.throttle’由函数内部处理。
• 浏览器标签未激活时，一切都不会执行。
• 尽管所有的现代浏览器都支持 rAF ，IE9，Opera Mini 和 老的 Android 还是需要打补丁。
• Node.js 不支持，无法在服务器端用于文件系统事件。

根据经验，如果 JavaScript 方法需要绘制或者直接改变属性，我会选择 requestAnimationFrame，只要涉及到重新计算元素位置，就可以使用它。

涉及到 AJAX 请求，添加/移除 class （可以触发 CSS 动画），我会选择 _.debounce 或者 _.throttle ，可以设置更低的执行频率（例子中的200ms 换成16ms）。

rAF 实例

灵感来自于 Paul Lewis 的文章，我将用 requestAnimationFrame 控制 scroll 。

16ms 的 _.throttle 拿来做对比，性能相仿，用于更复杂的场景时，rAF 可能效果更佳。

See the Pen Scroll comparison requestAnimationFrame vs throttle by Corbacho (@dcorb) on CodePen.

headroom.js 是个更高级的例子。

结论

使用 debounce，throttle 和 requestAnimationFrame 都可以优化事件处理，三者各不相同，又相辅相成。

总之：

• debounce：把触发非常频繁的事件（比如按键）合并成一次执行。

• throttle：保证每 X 毫秒恒定的执行次数，比如每200ms检查下滚动位置，并触发 CSS 动画。

• requestAnimationFrame：可替代 throttle ，函数需要重新计算和渲染屏幕上的元素时，想保证动画或变化的平滑性，可以用它。注意：IE9 不支持。

原文： Say Hello To ES2015
笔记：涂鸦码龙

介绍 ES2015

ES2015 是新版的 JavaScript，Node.js 已经完全支持，浏览器端可以用 Babel 库编译。

运行本文的示例代码，可以用 JSBin 环境，也可以结合原文中的测试题检测学习效果。

使用 let 和 const

ES2015 可以用 const 或 let 替换 var ，它们定义了块级作用域变量。

示例代码：

1
2
3
4
5

for (var lc=0; lc < 10; lc++) {
  let value = lc;
}
console.log(value); //抛出错误

变量 value 只能在 for 循环中使用。

const 跟 let 很像，但是它定义的变量值无法改变。

示例代码：

1
2
3

const user = {name: "Arunoda"};
user.name = "Susiripala";
console.log(user.name);

改变的是变量 user 内部的属性，并没有改变 user 本身。

许多人更喜欢用 const 代替 let 。

使用箭头函数整理你的代码

熟悉的方式：

1
2
3
4
5

const numbers = [10, 20, 30, 50];
const multiplyBy10 = numbers.map(function(a) {
    return a * 10;
});
console.log(multiplyBy10);

使用箭头函数以后：

1
2
3

const numbers = [10, 20, 30, 50];
const multiplyBy10 = numbers.map(a => a * 10);
console.log(multiplyBy10);

如果方法接受不止1个参数，可以这么写：

1
2
3

const numbers = [10, 20, 30, 50];
const multiplyByIndex = numbers.map((a, i) => a * i);
console.log(multiplyByIndex);

箭头函数返回一个对象的话，需要加圆括号：

1
2
3

const numbers = [10, 20, 30, 50];
const multiplyBy10 = numbers.map(a => ({res: a * 10}));
console.log(multiplyBy10);

不再使用“self=this”

以前的代码：

1
2
3
4
5
6
7
8
9
10

function Clock() {
    this.currentTime = new Date();
}
Clock.prototype.start = function() {
    var self = this;
    setInterval(function() {
        self.currentTime = new Date();
    }, 1000);
}

可以用箭头函数代替 self=this：

1
2
3
4
5
6
7
8
9

function Clock() {
    this.currentTime = new Date();
}
Clock.prototype.start = function() {
    setInterval(() => {
        this.currentTime = new Date();
    }, 1000);
}

setInterval 里面用了箭头函数，它携带了 start 方法的上下文（this）。

使用箭头函数要多加小心，并不是随处可用的，箭头函数会携带函数定义时的上下文。

正如这个例子：https://jsbin.com/zuseqap/edit?js,console

改良的对象字面量

在对象里面定义一个方法，可以这么写：

1
2
3
4
5
6
7

const user = {
    getName() {
        return 'Arunoda';
    }
}
console.log(user.getName());

不必每次都写 function 关键字。

这是最酷的特性，你会喜欢的：

1
2
3
4

const name = 'Arunoda';
const age = 80;
const user = {name, age};

瞅瞅多简单，并不用这么啰嗦：

1
2
3
4
5
6
7

const name = 'Arunoda';
const age = 80;
const user = {
    name: name,
    age: age
};

解构对象

很容易地提取 user 对象的 name 和 age 字段：

1
2
3
4
5
6
7
8

const user = {
    name: 'Arunoda',
    age: 80,
    city: 'Colombo'
};
const {name, age} = user;
console.log(name, age);

对于函数相当有用，上代码：

1
2
3
4
5
6
7
8
9
10

function printName({name}) {
    console.log('Name is: ' + name);
}
const user = {
    name: 'Arunoda',
    age: 80,
    city: 'Colombo'
};
printName(user);

不仅简化了代码，而且可以自描述。看到函数第一行时，我们便会明白使用传入对象的哪个字段。

可以定义传入对象的默认值。

1
2
3

function printUser({name, age = 20}) {
    console.log('Name is: ' + name + ' Age: ' + age);
}

像传入对象一样，同样可以从传入的数组中解构值：

1
2
3
4
5

function printUser([name, age = 20]) {
    console.log('Name is: ' + name + ' Age: ' + age);
}
printUser(["Arunoda", 80]);

前所未见的方式传递（spread）数组

以前的代码：

1
2
3
4
5
6
7
8
9
10
11

function sum(a, b) {
    return a + b;
}
function sumAndLog(a, b) {
    var result = sum(a, b);
    console.log('Result is: ' + result);
    return result;
}
sumAndLog(10, 20);

ES2015 代码：

1
2
3
4
5
6
7
8
9
10
11

function sum(a, b) {
    return a + b;
}
function sumAndLog(...args) {
    const result = sum(...args);
    console.log('Result is: ' + result);
    return result;
}
sumAndLog(10, 20);

在 sumAndLog 方法中使用 spread 操作符（...），可以很简单地把所有参数存入 args 变量，然后再用 spread 操作符把 args 传入 sum 方法。

再看以下例子：

1
2
3
4
5
6

function printTeam(leader, ...others) {
  console.log('Leader: ' + leader + ' - Others: ' + others);
}
printTeam('Arunoda', 'John', 'Singh');
//输出结果："Leader: Arunoda - Others: John,Singh"

克隆、合并对象

以往都是用 underscore 或者 lodash，克隆、合并对象：

1
2
3
4
5
6

var user = {name: "Arunoda"};
var newUser = _.clone(user);
var withAge = _.extend(user, {age: 20});
var newUserVersion = _.defaults({age: 80}, user);
console.log(newUser, withAge, newUserVersion);

ES2015 不需要任何工具库，轻松实现以上功能。

1
2
3
4
5
6

const user = {name: "Arunoda"};
const newUser = {...user};
const withAge = {...user, age: 20};
const newUserVersion = {age: 80, ...user};
console.log(newUser, withAge, newUserVersion);

看以下例子：

1
2
3
4
5
6
7
8
9
10

const user = {
  name: 'Arunoda',
  emails: ['hello@arunoda.io']
};
const newUser = {...user};
newUser.emails.push('mail@arunoda.io');
console.log(user.emails);
//输出结果：["hello@arunoda.io", "mail@arunoda.io"]

尽管我们克隆了对象，但不是深度克隆，只克隆了顶层字段，emails 数组字段使用的仍是同一个。

往数组里添加元素

跟对象类似，我们同样可以克隆数组：

1
2
3
4

const marks = [10, 20, 30];
const newMarks = [...marks, 40];
console.log(marks, newMarks);

JavaScript 不变性（Immutability）

这些日子，JavaScript 也兴起函数式编程的概念。因此，我们可以尝试写写纯函数。

纯函数：一个函数接收一些值，并且返回一些值，但是通过参数接收到的值不会被改变。 同样的输入总是返回同样的值。
random() 就不是一个纯函数，任何可以修改全局状态的函数都不能称之为纯。

用 spread 操作符可以轻松实现。

用于对象：

1
2
3
4
5
6
7
8
9
10
11

function addMarks(user, marks) {
  return {
    ...user,
    marks
  };
}
const user = {username: 'arunoda'};
const userWithMarks = addMarks(user, 80);
console.log(user, userWithMarks);

用于数组：

1
2
3
4
5
6
7
8
9
10
11
12
13

function addUser(users, username) {
  const user = {username};
  return [
    ...users,
    user
  ];
}
const user = {username: 'arunoda'};
const users = [user];
const newUsers = addUser(users, 'john');
console.log(users, newUsers);

以 Python 方式合并字符串

合并字符串通常很烦，可以用 + 操作符，或者类似 underscore 的模板。

ES2015 的模板字符串，非常简单，看例子：

1
2
3
4

const name = "Arunoda";
const welcome = `Hello ${name}, Good Morning!`;
console.log(welcome);

注意 “`” 的使用。

多行字符串

既然支持模板字符串，多行字符串也不在话下：

1
2
3
4
5
6
7

const message = `
  # Title
  This is a multi line string as markdown.
  It's pretty nice.
`;
console.log(message);

没有模板字符串的话，是这个样子的：

1
2

var message = "\n  # Title\n\n  This is a multi line string as markdown.\n  It's pretty nice.\n";
console.log(message);

像 Java 一样写 Class

JavaScript 并不是真正的面向对象语言，但是可以用函数和原型模拟类。ES2015 可以写真正原生的类了。

1
2
3
4
5
6
7
8
9
10
11
12
13

class Vehicle {
  constructor(type, number) {
    this.type = type;
    this.number = number;
  }
  display() {
    return `Number: ${this.number}`;
  }
}
const v1 = new Vehicle('Car', 'GH-2343');
console.log(v1.display());

继承一个类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

class Vehicle {
  constructor(type, number) {
    this.type = type;
    this.number = number;
  }
  display() {
    return `Number: ${this.number}`;
  }
}
class Car extends Vehicle {
  constructor(number) {
    super('Car', number);
  }
  display() {
    const value = super.display();
    return `Car ${value}`;
  }
}
const v1 = new Car('GH-2343');
console.log(v1.display());

小汽车继承了车辆：

• 在 Car constructor 内部调用了 super constructor （Vehicle 的 constructor）。
• Car 的 display() 方法内部，调用了 super.display() 。这里展示了子类如何继承方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

class Vehicle {
  constructor(type, number) {
    this.type = type;
    this.number = number;
  }
  display() {
    return `Number: ${this.number}`;
  }
}
class Car extends Vehicle {
  display() {
    const value = super.display();
    return `Car ${value}`;
  }
}
const v1 = new Car('GH-2343');
console.log(v1.display());

Car 类没有实现 constructor 的话，它会用 Vehicle 的 constructor 。

ES2015 模块系统

ES2015 的模块系统很像 CommonJS 模块系统（或者 Node.js 的模块系统），但是有一点主要的区别：

所有的模块导入应该是静态的，无法在运行时导入模块。编译时间应该完成导入（或者最好在解释 JavaScript 期间完成）。
以下代码在 ES2015 模块里无法使用：

1
2
3
4
5
6
7

let router;
if (typeof window === 'function') {
  router = import './client-router';
} else {
  router = import './server-router';
}

命名导出函数

定义一个简单的导出函数 sum ：

1
2
3

export function sum(a, b) {
    return a + b;
}

然后导入它：

1
2
3
4

import {sum} from './lib/math';
const total = sum(10, 20);
console.log(total);

导入多个函数：

1

import {sum, multiply}

像函数一样，可以导出任何类型的变量，包括类。

1
2
3

export const BASE = 10;
export let name = 'Arunoda';
export class Vehicle {};

默认导出

有时需要导出一个独立的模块，叫做默认导出。

1
2
3
4
5
6
7
8
9
10

export default class {
  constructor(type, number) {
    this.type = type;
    this.number = number;
  }
  display() {
    return `Number: ${this.number}`;
  }
}

可以这么导入：

1
2
3
4

import Vehicle from './lib/vehicle';
const v1 = new Vehicle('Car', 'GH-3355');
console.log(v1.display());

如果再导出一个 print 函数，这么写：

1

import Vehicle, {print} from './lib/vehicle';

这便是我们如何在同一模块导入 “默认导出” 和 “命名导出” 的方式。

重命名导入，一次导入所有命名导出，以及更多知识，参见 MDN 文档。

在实际的项目中使用 ES2015？

至今还没有浏览器完全实现 ES2015 的所有规范。因此，无法直接在浏览器里使用 ES2015 。

那么我们该怎么做？

欢迎来到 transpiling 的世界。

现在可以按 ES2015 写代码，然后使用一个工具把它转换成 ES5，最有名的一个 transpiler 便是 Babel。

设置 Babel 并没那么简单，需要一定的经验，这是一些新手包，拿去用吧。

• 在 Node.js 中使用 node-base
• 在 NPM 模块中使用 npm-base
• 在 React app 中使用 react-hot-boilerplate

此外，可以使用 Meteor，默认支持 ES2015 了。

深入研究 ES2015

深入研究，可以参考以下链接：

• Babel’s Learn ES2015 Guide
• Massive List of ES2015 Learning Resources

原文：‘flex-grow’ is weird. Or is it?
翻译：涂鸦码龙

当我刚接触 flex-grow 时，为了探寻它的工作原理，做了一个简单的例子。

我以为理解的挺透彻了，但是当我把它应用到同事的网站上时，效果跟我想象的完全不同。无论怎么改，布局都无法像我的demo那样展示。这时我才意识到，我并没有完全掌握 flex-grow 。

flex-grow 为何不正常

在我深入剖析 flex-grow 的功能之前，我想解释一下我起初犯了什么错。

我认为所有 flex 元素的 flex-grow 如果设置为 1 ，它们将一样宽。如果某一项的 flex-grow 设置为 2 ，它将是其它元素的二倍宽。

一切听起来顺理成章。我上面的例子 貌似也印证了这点。父元素是900px宽，flex-grow: 2 的 section 元素计算后是600px宽，flex-grow: 1 的 aside 元素计算后是300px宽。

如你所见，它在这个例子中展现的近乎完美，可是在真实的例子中却不尽人意，即使我们用了完全相同的 CSS。事实证明，问题不在 CSS，而在于内容（或者说缺乏内容）。我的测试用例只用了两个空元素，无法展示这个属性最重要的细节。

flex-grow 到底如何工作

啰嗦了半天，我终于要解释 flex-grow 没有尽如人意的原因了。

为了阐明原因，我又搞了个栗子 ，所有的设置跟第一个栗子 完全一致，只不过 section 和 aside 元素不再是空的。看吧，两个元素的比例不再是 2 : 1，flex-grow 为 1 的元素的确比 flex-grow 为 2 的元素宽不少呐。

解析

如果给父元素设置了 display: flex; ，子元素仅仅是水平排列，没有其它效果了。如果没有足够的空间，它们会收缩一些尺寸。另一方面，如果有足够的空间，它们也不会扩展，因为 Flexbox 希望我们自己定义扩展多少。flex-grow 恰恰用来定义剩余空间如何分配，每一项分享多大宽度。

换言之：

flex 容器为它的子元素分配剩余空间（它们的扩展系数是成比例的），从而填满整个容器，或者收缩元素（它们的收缩系数也是成比例的），从而阻止溢出。

https://drafts.csswg.org/css-flexbox/#flexibility

证明

如果我们可视化一把，概念就很清晰明了了。

首先，我们给父元素设置了 display: flex，然后它的子元素成了 flex 元素，一个挨一个的横向排列。

下一步，我们要决定每个元素能获得多少剩余空间。先前的例子中，第一个元素获得了 2/3 的剩余空间（flex-grow: 2），第二个元素获得了 1/3 的剩余空间（flex-grow: 1）。想知道 flex-grow 总共的值是多少，看看剩余空间被分成了几份吧。

最终我们得出了可分配的块数，根据 flex-grow 的值，每个元素可以获得适当的块数。

计算结果

理论和视觉展示都不错，让我们为上面例子 做点算术吧。

我们需要4组数字：父容器宽度， section 和 aside 元素的初始宽度，以及 flex-grow 的总值。

父容器宽：900px
section 宽：99px
aside 宽：623px
flex-grow 总值：3

1. 首先计算剩余空间

父容器宽减去每一个子元素的初始宽度。

1

900 - 99 - 623 = 178

父容器宽 - section 宽 - aside 宽 = 剩余空间

2. 然后计算 flex-grow 的1份是多宽

既然有了剩余空间，我们还需要确定把它切成几份。重要的是，我们不按元素的个数切分剩余空间，而是按 flex-grow 总值，所以这里是 3 （flex-grow: 2 + flex-grow: 1）

1

178 / 3 = 59.33

剩余空间 / flex-grow 总值 = “1份 flex-grow 的宽”

3. 最终所有的元素瓜分剩余空间

依据它们的 flex-grow 值，section 需要 2 份（2 59.33），aside 需要 1 份（1 59.33）。这个数字再与每个元素的初始宽度相加。

1

99 + (2 * 59.33) = 217.66 (≈218px)

初始 section 宽度 + （section 的 flex-grow 值 * “1 份 flex-grow 的宽”） = 新的宽度

1

623 + (1 * 59.33) = 682.33 (≈682px)

初始 aside 宽度 + （aside 的 flex-grow 值 * “1 份 flex-grow 的宽”） = 新的宽度

so easy，不是吗？

好吧，那为什么第一个例子正常呢？

我们按已有的公式，算下第一个例子 。

父容器宽：900px
section 宽：0px
aside 宽：0px
flex-grow 总值：3

1. 计算剩余空间

1

900 - 0 - 0 = 900

2. 计算 flex-grow 的1份是多宽

1

900 / 3 = 300

3. 分配剩余空间

1
2

0 + (2 * 300) = 600  
0 + (1 * 300) = 300

如果每个元素的宽是 0，剩余空间等于父容器的宽度，因此，看起来像是 flex-grow 按比例划分了父容器的宽度。

flex-grow 和 flex-basis

快速回顾一下：剩余空间被 flex-grow 的总值划分，由此产生的商，乘以各自的 flex-grow 值，结果再加上每个元素的初始宽度。

但是如果没有剩余空间或者不想依赖元素的初始宽度，我们可以设置它吗？还能用 flex-grow 吗？

当然可以。有个 flex-basis 属性，它可以定义元素的初始宽度。如果 flex-basis 和 flex-grow 一起设置，宽度的计算方式得变一下。

<‘flex-basis’> ：按 flex 因子分配剩余空间之前，每个 flex 元素的最初主要尺寸。

https://drafts.csswg.org/css-flexbox/#valdef-flex-flex-basis

如果给某个元素设置了 flex-basis 属性，我们计算的时候就不能再用元素本身的初始宽度了，而要用 flex-basis 属性的值。

我调整了一下先前的例子 ，给每个元素加了 flex-basis 属性。

父容器宽：900px
section 宽：400px（flex-basis 值）
aside 宽：200px（flex-basis 值）
flex-grow 总值：3

1. 计算剩余空间

1

900 - 400 - 200 = 300

2. 计算 flex-grow 的1份是多宽

1

300 / 3 = 100

3. 分配剩余空间

1
2

400 + (2 * 100) = 600  
200 + (1 * 100) = 300

仅仅是为了完整性，我才用到 px 值，用百分比的话当然也没问题 。

与盒模型结合

为了覆盖所有情况，如果我们加上 padding 和 margin 看看会发生什么，啥也没发生 ，第一步计算的时候，只要减去 margin 就好了。

唯一需要注意的是，使用 box-sizing 的话， flex-basis 跟 width 属性表现相似。如果 box-sizing 属性改变，计算结果也会变化。如果 box-sizing 设置为 border-box ，计算时只需用到 flex-basis 和 margin 值，因为 padding 已经包含到宽度里面了。

更多实用的例子

好吧，算术是玩够了。我再展示一些项目中合理使用 flex-grow 的例子吧。

不限宽度：[ x ]%

实际应用中，剩余空间是自动分配的，如果想让子元素填满父容器的话，我们没必要再考虑宽度值。

See the Pen flex-grow by Manuel Matuzovic (@matuzo) on CodePen.

固定宽度的 “圣杯” 3列流式布局

固定加自适应宽度的混合布局，可以用浮动实现，但是既不简单直观，又不灵活。Flexbox 实现的话，加点儿 flex-grow 和 flex-basis 魔法，简直小菜一碟。

See the Pen Layout using fluid and fixed widths by Manuel Matuzovic (@matuzo) on CodePen.

使用任何元素填满剩余空间

比如，一个 label 元素后面紧跟着输入框，想让输入框填满剩余空间，不再需要丑陋的 hacks 。

See the Pen Filling up the remaining space in a form by Manuel Matuzovic (@matuzo) on CodePen.

Philip Waltons 的 Solved by Flexbox 一文可以找到更多示例。

听听标准规范怎么说

根据标准，使用 flex 的简写，比直接用 flex-grow 更好。

Authors are encouraged to control flexibility using the flex shorthand rather than flex-grow directly, as the shorthand correctly resets any unspecified components to accommodate common uses.

https://drafts.csswg.org/css-flexbox/#flex-grow-property

但是小心！如果仅仅使用 flex: 1; ，以上某些例子可能无法正常展示。

我们的例子要用 flex 的话，应该这么定义：

1

flex: 2 1 auto;  /* (<flex-grow> | <flex-shrink> | <flex-basis>) */

深入学习 Flexbox

如果你想深入学习 Flexbox，可以看看这些不错的资源：

• A Complete Guide to Flexbox by Chris Coyier
• Flexbox adventures by Chris Wright
• Flexbox Froggy by Thomas Park
• What the Flexbox? by Wes Bos
• flexboxin5
• Flexbox Tester by Mike Riethmuller

总结经验教训

flex-grow 不易理解吗？也不全是。我们只需理解它如何工作，它做了什么。如果一个元素设置 flex-grow 为 3 ，并不代表它是 flex-grow 为 1 的元素的3倍大，准确含义是：它的初始宽度可以增加的像素值是另一个元素的3倍。

我通过两个空元素 测试 flex-grow ，得到的结论跟真实情况 完全不符。应该在尽可能真实的环境中验证新事物，这样才能得到最切合实际的结论。

原文：Moving along a curved path in CSS with layered animation
翻译：涂鸦码龙

译者注：部分代码示例在原文中可以看效果（作者写在博文里面了…），我偷懒把它做成Gif图了。

CSS 的 animations （动画） 和 transitions（变换）擅于实现从点 A 到点 B 的直线运动，运动轨迹是直线路径。给一个元素添加了 animation 或者 transition 以后，无论你如何调整贝塞尔曲线，都无法让它沿着弧形路径运动。你可以通过自定义 timing function 属性，做出弹动的效果，但是它沿着 X 和 Y 轴相对移动的值永远是相同的。

与其使用 JavaScript 实现外观自然的运动，不如尝试用这种简单的方式：分层动画，绕过已有的限制。通过使用两个或多个元素实现动画效果，我们可以更加细粒度地控制某个元素的路径，沿着 X 轴运动使用一种 timing function ，沿着 Y 轴运动使用另一种 timing function 。

问题所在

当我们深入探讨解决方案之前，看看到底问题在哪。CSS animations 和 transitions 限制我们只能沿直线路径运动。元素总是沿着点 A 到点 B 的最短路径运动，如果我们另辟蹊径，告诉 CSS 沿着“更好的路径”，而不是“最短路径”运动呢？

用 CSS （开启硬件加速）实现两点之间的运动，最直截了当的方式是使用 transform 的 translate 在一定时间内移动某个元素。这就产生了直线运动。在 @keyframes 中，我们打算在 (0,0) 和 (100,-100) 间来回运动，见上图例子：

1
2
3
4
5
6
7
8
9

@keyframes straightLine {
  50% {
    transform: translate3D(100px, -100px, 0);
  }
}
.dot {
  animation: straightLine 2.5s infinite linear;
}

这些看起来并不难懂，但我们稍等片刻，思考一下我们需要的解决方案，拆分开来的动画，视觉上长什么样子呢。

0% 时，元素从 (0,0) 出发，50% 时，我们用了 translate3D(100px, -100px, 0) 把它移动到 (100,-100)，然后原路返回。换句话说，我们把元素向右移动了 100px，向上移动了 100px，两个方向联合作用使元素沿着一个角度运动。

解决方案：每个轴执行自己的动画函数

那么，原先展示的例子中我们如何实现的弧形路径呢？为了让创建的路径不是直线，我们想让元素沿 X 轴和 Y 轴的运动速度不同步。

先前例子中都用到了 linear 线性运动函数，如果我们给运动的元素包裹一个容器，我们可以为 X 轴应用一种动画函数，Y 轴应用另一种动画函数。以下例子，我们在 X 轴使用 ease-in ，Y 轴使用 ease-out 。

每个轴元素的具体实现

不幸的是，我们不能只把 transform 动画简单叠加：因为只有最后声明的动画会执行。那么我们如何把两个动画效果联合起来呢？可以把一个元素放入另一个元素内部，给容器元素加一种动画，给里面的子元素添加另一种动画。

在以上例子中，你已经看到一个点沿着弧形路径运动，看到两个独立的元素一起做动画，只不过容器元素是完全透明的。为了清晰地看到两个元素沿着弧形路径是如何相互作用的，我们给容器元素加个边框看看呗：

那个点藏在带边框的盒子内部，跟随盒子一起沿 X 轴远动，同时它自己又在 Y 轴方向上下运动。去掉容器盒子的边框，我们就得到了弧形路径。与其在 HTML 中用两个元素，还不如用伪元素实现嘞。如果 HTML 是这样：

1

<div class="dot"></div>

我们可以添加伪元素：

1
2
3
4
5
6
7

.dot {
  /* 容器：沿 X 轴运动 */
}
.dot::after {
  /* 黑点儿，沿 Y 轴运动 */
}

然后，我们需要两块独立的动画代码：X 轴，Y 轴各一块。注意一处用了 ease-in，另一处用了 ease-out：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.dot {
  /*省略 一些布局代码...*/
  animation: xAxis 2.5s infinite ease-in;
}
.dot::after {
  /* 渲染小黑点儿*/
  animation: yAxis 2.5s infinite ease-out;
}
@keyframes xAxis {
  50% {
    animation-timing-function: ease-in;
    transform: translateX(100px);
  }
}
@keyframes yAxis {
  50% {
    animation-timing-function: ease-out;
    transform: translateY(-100px);
  }
}

加上 WebKit 前缀，用一些自定义的贝塞尔曲线代替 ease-in 和 ease-out，我们就可以实现文章最开头展示的效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

.demo-dot {
  -webkit-animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
}
.demo-dot::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: #fff;
  -webkit-animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
  animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}
@-webkit-keyframes yAxis {
  50% {
    -webkit-animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
}
@keyframes yAxis {
  50% {
    -webkit-animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
}
@-webkit-keyframes xAxis {
  50% {
    -webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
  }
}
@keyframes xAxis {
  50% {
    -webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
  }
}

以下是文章起始处的例子：

JS Bin on jsbin.com

你可能注意到我们在所有例子中都用了 @keyframes ，这纯粹是因为我们想展示黑点儿往返的两种状态。如果只想实现点 A 至点 B 的运动，使用 transition 属性做分层动画同样好用。

如果有个绝对定位的元素，通过给 left 和 bottom 属性加特效，就可以实现弧形路径运动，单个元素就可以，不需要容器元素。为什么不这么做呢：它性能稍差一些，动画的每一帧都会引起重绘。使用带伪元素的分层动画，translate 属性又开了硬件加速，动画效果更好，性能也更高。

译者自己搞了个绝对定位的例子：

JS Bin on jsbin.com

原文：Checkbox Trickery with CSS
翻译：涂鸦码龙

Checkbox 复选框相当好用，加对 CSS 魔法有奇效。此文旨在展示一些利用 checkbox 实现的有创意的东西，并且文中的例子没用 JavaScript 哟。

基本配方

从 HTML 着手。

1
2

<input id="toggle" type="checkbox">
<label for="toggle">

此处无技巧可言。<label> 的 for 属性匹配 <input> 的 id 属性，因此点击 <label> 可以控制 <input> 复选框。这点尤其重要，因为下一步将隐藏 <input>。

1
2
3
4

input {
    position: absolute;
    left: -9999px;
}

为什么不用 display: none ？因为屏幕阅读机和键盘 Tab 会忽略它。此方法让 <input> 保持在文档流中，但是让它离屏隐藏（超出屏幕可见范围达到隐藏）。

隐藏 <input> 以后，我们更容易大展身手。我们仍需传达选中/未选两种状态，但是可以通过 <label> 完成。真正的派对开始啦。

1
2
3

input:checked + label {
    /* 牛X闪闪的样式 */
}

我们使用 :checked 伪类， 和相邻兄弟元素选择器（+）的组合达到目的，当复选框选中时，找到紧随其后的 <label>元素，加上想要的样式。还可以利用 <label> 中的伪元素（ ::before 和 ::after）实现更有创意的想法。

1
2
3

input:checked + label::before {
    /* 指示器的样式 */
}

来，看看实际效果吧。例子用到了以上提及的基本配方，把一个普普通通的复选框改造得当人眼前一亮。

See the Pen Checkbox Trickery: Simple Toggle by Will Boyd (@lonekorean) on CodePen.

最大的好处是，包含在 <form> 中的复选框的值仍然可以被提交。我们只改变了外观，并没有影响功能。

隐藏/显示内容

目前为止，我们都是给 <label> 加样式，我们可以更进一步。这个例子会根据用户的选择，动态地隐藏/显示表单的部分内容。

See the Pen Checkbox Trickery: Form Disclosure by Will Boyd (@lonekorean) on CodePen.

:checked 伪类对单选按钮同样奏效，考虑到这一点，“How did you hear about us?”这块的 HTML 用到了单选按钮。

1
2
3
4
5
6
7
8
9
10
11
12
13

<input id="how-friend" name="how" type="radio">
<label for="how-friend" class="side-label">From a friend</label>
<input id="how-internet" name="how" type="radio">
<label for="how-internet" class="side-label">Somewhere on the internet</label>
<input id="how-other" name="how" type="radio">
<label for="how-other" class="side-label">Other...</label>
<div class="how-other-disclosure">
    <label for="how-other-explain" class="top-label">Please explain</label>
    <textarea id="how-other-explain"></textarea>
</div>

单选按钮指示器利用 <label> 内的 ::before 伪元素（外部的圆环）和 ::after 伪元素（内部的绿点）实现，当单选按钮选中 / 未选时显示 / 隐藏 ::after 伪元素相当简单。

1
2
3
4
5
6
7
8
9

.side-label::after {
    display: none;
    /* 其它样式 */
}
input:checked + .side-label::after {
    display: block;
}

<div> 一直隐藏，直到“Other…”单选按钮选中时才显示。我使用了 display: none 隐藏 <div>，因为这次我确实想让屏幕阅读器和键盘 Tab 在内容隐藏时忽略它。当单选按钮选中时，利用 CSS 显示 <div>。

1
2
3

#how-other:checked ~ .how-other-disclosure {
    display: block;
}

之前我们一直使用相邻兄弟选择器（+），不过这次得用一般兄弟选择器（~）。它俩很相似，但是可以找到非相邻的兄弟元素，比如我们的 <div>。

树状文件夹

我们可以活用之前例子中的技巧，实现一个树状文件夹组件，同样具备隐藏 / 显示两种功能。

See the Pen Checkbox Trickery: Folder Tree by Will Boyd (@lonekorean) on CodePen.

单个文件夹的 HTML 如下：<label> 是文件夹，两个 <a> 元素是文件夹里的文件。

1
2
3
4
5
6
7
8

<div>
    <input id="n-1" type="checkbox">
    <label for="n-1">Blue</label>
    <div class="sub">
        <a href="#link">Mana Leak</a>
        <a href="#link">Time Warp</a>
    </div>
</div>

Font Awesome 图标用于表示选中（打开）和未选（关闭）状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

label::before, a::before {
    display: block;
    position: absolute;
    top: 6px;
    left: -25px;
    font-family: 'FontAwesome';
}
label::before {
    content: '\f07b'; /* closed folder */
}
input:checked + label::before {
    content: '\f07c'; /* open folder */
}
a::before {
    content: '\f068'; /* dash */
}

文件夹里的内容通过一般兄弟选择器（~）实现显示 / 隐藏。这就是 HTML 外面包裹额外 <div> 的原因，为了确保选择器能够选到元素，打开兄弟文件夹。

1
2
3

input:checked ~ .sub {
    display: block;
}

理所当然，文件夹可以嵌套。只需把另一个文件夹的 HTML 放入 <div class="sub"> 即可。点击 “Multicolor”看看效果吧。

最后，我们聊一下重置按钮。

1

<input type="reset" value="Collapse All">

表单的重置按钮很少有人用，不过这里巧用了一下。点击重置按钮，所有复选框恢复成初始的未选中状态，关闭了所有文件夹。有意思吧。

Split List（分隔列表）

这个例子依据已做或未做，把列表选项分成两部分。

See the Pen Checkbox Trickery: To-Do List by Will Boyd (@lonekorean) on CodePen.

HTML 像这样：

1
2
3
4
5
6
7
8
9

<div class="items">
    <input id="item1" type="checkbox" checked>
    <label for="item1">Create a to-do list</label>
    
    <!-- more items -->
    
    <h2 class="done" aria-hidden="true">Done</h2>
    <h2 class="undone" aria-hidden="true">Not Done</h2>
</div>

分隔列表是由 CSS flexbox 实现的，这是关键的 CSS。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.items {
    display: flex;
    flex-direction: column;
}
.done {
    order: 1;
}
input:checked + label {
    order: 2;
}
.undone {
    order: 3;
}
label {
    order: 4;
}

CSS flexbox 可以使用 order 属性重排元素。当复选框选中的时候，<label> 的 order 值由 4 变为 2，列表选项就从 “Not Done” <h2> 下面移到了 “Done” <h2> 下面。

不幸的是，键盘导航和许多屏幕阅读器 会遵循元素在 DOM 中的顺序，即使它们被 CSS flexbox 做了视觉上的重排。这就导致 “Done”和“Not Done”的标题对于屏幕阅读器无用，这便是我给它们加了 aria-hidden="true" 的原因 —— 被忽略总比引起混淆强。此外，通过键盘和屏幕阅读器完全可以控制分隔列表，正确显示列表项的状态（选中 / 未选）。

如果你对“Done”和“Not Done”其后的计数实现感到好奇，它们用到了 CSS counters。想深入学习的话，可以看这篇文章。

分组筛选

压轴的例子展示了如何根据筛选条件，高亮显示交叉区域的数据。

See the Pen Checkbox Trickery: Group Filter by Will Boyd (@lonekorean) on CodePen.

这是简短的 HTML 。注意一下 data-teams 属性是由空格分隔的列表，它们每一项恰恰与单选按钮的 id 属性一致。我就是这么把角色跟队伍匹配起来的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<input id="original" type="radio" name="team" checked>
<label for="original">Original X-Men</label>
<!-- 省略更多团队 -->
<br>
<ul class="characters">
    <li id="angel" data-teams="original force factor hellfire">
        <h2>Angel</h2>
        <img src="ct-angel.png" alt="">
    </li>
    
    <!-- 省略更多角色 -->
</ul>

关于可访问性，我使用了空的 alt 属性，因为角色的名字已显示在 <h2> 标签中了 —— 每个名字读两次也没有必要。此外，我没有真正的隐藏 <img> 元素（只是收缩和渐隐），屏幕阅读器可以轻易的跳过未高亮的角色。我仅仅需要隐藏 <h2> 。

当选择团队的时候，高亮对应的角色，CSS 是这么实现的。

1
2
3
4
5
6
7
8
9
10
11
12
13

#original:checked ~ .characters [data-teams~="original"] h2,
#force:checked ~ .characters [data-teams~="force"] h2,
#factor:checked ~ .characters [data-teams~="factor"] h2,
#hellfire:checked ~ .characters [data-teams~="hellfire"] h2 {
    /* styles to show character name */
}
#original:checked ~ .characters [data-teams~="original"] img,
#force:checked ~ .characters [data-teams~="force"] img,
#factor:checked ~ .characters [data-teams~="factor"] img,
#hellfire:checked ~ .characters [data-teams~="hellfire"] img {
    /* styles to show character avatar */
}

我清楚这些选择器看起来有点吓人，不过也不赖。我们来仔细分析下例子的第一行（译者注：以 CSS 中最长的选择器开始算）。当 id 为 ‘original’ 的元素被选中时，找到角色元素里面 data-teams 属性包含 ‘original’ 的元素，然后找到它里面的 <h2> 。2-4行的 ‘force’, ‘factor’, 和 ‘hellfire’ 重复上一步。8-11行继续重复上一步，只不过把 <h2> 换成了 <img> 。

综述

我希望你跟我一样从这些例子中找到了一些乐趣。通过复选框去实现一些好玩的东西，对我而言非常有趣。我并没有排斥在适当的时候使用 JavaScript ，但是没用它也可以实现这么多东西，也是蛮开心的。谢谢阅读！

原文：How to Schedule Background Tasks in JavaScript
翻译：涂鸦码龙

即使忘了 JavaScript 的一切知识，也不会忘记：它是阻塞的。

想象一下，你的浏览器里住着一个魔法小精灵，负责浏览器的正常运转。不论渲染 HTML，响应菜单命令，屏幕渲染，处理鼠标点击，或者执行 JavaScript 函数，所有事情都归一个小精灵处理。它哪忙得过来，一次只能处理一件事情。如果同时丢给它一堆任务，它会列一个长长的待办列表，按顺序完成它们。

人们常常希望初始化组件和事件处理的 JavaScript 可以尽快被执行。可是，有些不太重要的后台任务不会直接影响用户体验，比如：

• 记录统计数据
• 发送数据到社交网络（或添加‘分享’按钮）
• 预加载内容
• 预处理或预渲染 HTML

他们对时序要求不严格，但是为了让页面仍然响应，直到用户滚动页面或者与内容交互时才被执行。

选择之一是 Web Workers ，它可以在独立的线程同时执行代码。用于预加载和预处理再好不过，但是你没有权限直接访问或更新 DOM。你可以在自己的代码中避开这点，但是无法保证第三方脚本比如 Google Analytics 永远不需要这个。

另一个选择是 setTimeout ，比如 setTimeout(doSomething, 1); 。一旦其它的立即执行任务执行完毕，浏览器将执行 doSomething() 函数。实际上，它被放到了待办列表的底部。不幸的是，函数将被调用，而不顾处理需求。

requestIdleCallback

requestIdleCallback 是新API，当浏览器稍作喘息的时候，用来执行不太重要的后台计划任务。 难免让人想起 requestAnimationFrame，在下次重绘之前，执行函数更新动画。 想了解更多戳这里：使用 requestAnimationFrame 做简单的动画。

requestIdleCallback 特性监测：

1
2
3
4
5
6
7
8
9
10

if ('requestIdleCallback' in window) {
  // requestIdleCallback supported
  requestIdleCallback(backgroundTask);
}
else {
  // no support - do something else
  setTimeout(backgroundTask1, 1);
  setTimeout(backgroundTask2, 1);
  setTimeout(backgroundTask3, 1);
}

也可以指定配置参数对象，比如 timeout，

1

requestIdleCallback(backgroundTask, { timeout: 3000; });

确保函数在3秒之内调用，不管浏览器是否空闲。

deadline 对象传入以下参数时，requestIdleCallback 仅执行一次回调：

• didTimeout —— 如果可选的 timeout 触发，则设置为 true
• timeRemaining() —— 函数返回执行任务剩余的毫秒数
  timeRemaining() 最多分配50ms用于任务的执行，超过这个限制，也不会停止任务，但是，最好重新调用 requestIdleCallback 安排进一步的处理。

我们来创建一个简单的例子，让几个任务按序执行。任务的函数引用储存在数组中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

//待执行的函数数组
var task = [
    background1,
    background2,
    background3
];
if ('requestIdleCallback' in window) {
  //支持 requestIdleCallback
  requestIdleCallback(backgroundTask);
}
else {
  //不支持 —— 立刻执行所有任务
  while (task.length) {
    setTimeout(task.shift(), 1);
  }
}
//requestIdleCallback 回调函数
function backgroundTask(deadline) {
  //如果存在，执行下一个任务
  while (deadline.timeRemaining() > 0 && task.length > 0) {
    task.shift()();
  }
  //需要的话，安排进一步任务
  if (task.length > 0) {
    requestIdleCallback(backgroundTask);
  }
}

一次 requestIdleCallback 之间不应该做什么？

Paul Lewis 在他的文章中提到，一次 requestIdleCallback 执行的任务应该切成小块。它不适用于不可预知时间的情况（比如操作 DOM，使用 requestAnimationFrame 回调更好些）。resolving（或者 rejecting）Promises 时也要谨慎，即使没有更多的剩余时间，空闲回调完成之后，回调函数也将立即执行。

requestIdleCallback 浏览器支持情况

requestIdleCallback 是试验性特性，规范仍不稳定，碰到 API 变更时不足为奇。Chrome 47 已支持… 2015年结束前应该可用了。Opera 应该会紧跟其后。Microsoft 和 Mozilla 都在考虑 API 是否应该支持 Promises 。Apple 像往常一样不鸟。

Paul Lewis（上文提到的）写了一个简单的 requestIdleCallback shim ，它可以模拟浏览器的空闲监测行为，但不是一个 polyfill（shim 和 polyfill 的区别）。

requestIdleCallback shim代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/*!
 * Copyright 2015 Google Inc. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */
 
/*
 * @see https://developers.google.com/web/updates/2015/08/using-requestidlecallback
 */
window.requestIdleCallback = window.requestIdleCallback ||
  function (cb) {
    var start = Date.now();
    return setTimeout(function () {
      cb({ 
        didTimeout: false,
        timeRemaining: function () {
          return Math.max(0, 50 - (Date.now() - start));
        }
      });
    }, 1);
  }
window.cancelIdleCallback = window.cancelIdleCallback ||
  function (id) {
    clearTimeout(id);
  }

原文：Negating Predicate Functions in JavaScript
翻译：涂鸦码龙

如果你从没听过这个概念，那么至少用过谓语函数。谓语本质上是一个函数，根据它的参数，可以判断返回结果是 true 或者 false。一般都以“isX”命名，比如 isEven 或者 isNumber。

假如我们有个程序，需要处理漫画书里的英雄和坏蛋，以下面的简单对象为例：

1
2
3
4
5

var superman = {
    name: "Superman",
    strength: "Super",
    heroism: true
};

程序中难免会用到一些谓语，像这些：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function isSuperStrong (character) {
    return character.strength === "Super";
}
function isNotSuperStrong (character) {
    return character.strength !== "Super";
}
function isHeroic (character) {
    return character.heroism === true;
}
function isNotHeroic (character) {
    return character.heroism !== true;
}
// Outputs: false
console.log(isNotSuperStrong(superman));
// Outputs: false
console.log(isNotHeroic(superman));

如你所见，代码有些冗余。问题不是代码太长，而是核心逻辑定义了两次（每一对谓语，“is”和“isNot”）。逻辑重复意味着逻辑改变时，可能只更新了其中一处谓语，导致错误发生。

如何解决呢？我们首先想到的是这样改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function isSuperStrong (character) {
    return character.strength === "Super";
}
function isNotSuperStrong (character) {
    return !isSuperStrong(character);
}
function isHeroic (character) {
    return character.heroism === true;
}
function isNotHeroic (character) {
    return !isHeroic(character);
}
// Outputs: false
console.log(isNotSuperStrong(superman));
// Outputs: false
console.log(isNotHeroic(superman));

的确有进步，但是仍有冗余。“isNot”谓语只不过颠倒了“is”谓语的功能。

我们何不抽象成一个更清晰，更易维护的函数呢？

1
2
3
4
5

function negate (predicateFunc) {
    return function () {
        return !predicateFunc.apply(this, arguments);
    };
}

negate 函数接收一个谓语函数作为参数，返回一个函数用来对之前谓语的功能取反。

（如果对 apply 不了解，可以读读这篇《Invoking JavaScript Functions With ‘call’ and ‘apply’》）

使用 negate 函数解决我们先前的问题吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function isSuperStrong (character) {
    return character.strength === "Super";
}
var isNotSuperStrong = negate(isSuperStrong);
function isHeroic (character) {
    return character.heroism === true;
}
var isNotHeroic = negate(isHeroic);
// Outputs: false
console.log(isNotSuperStrong(superman));
// Outputs: false
console.log(isNotHeroic(superman));

程序如期运行，但是我们把核心逻辑放到了一处，从“is”谓语也很容易推导出“isNot”谓语。

这点小小的重构看起来微不足道，但是应用于复杂系统的许多分散函数时，negate 函数可以使程序更易维护。

Underscore 和 Lo-Dash 都已经填加了 negate 函数。

两种方式：

1. 项目 fetch 到本地，通过命令行的方式 merge
2. 懒人方法，只用 Github ，不用命令行

项目 fetch 到本地，通过命令行的方式 merge

提示：跟上游仓库同步代码之前，必须配置过 remote，指向上游仓库 。

1

git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git

1. 打开命令行工具
2. 切换当前工作路径至你的本地工程

3. 从上游仓库获取到分支，及相关的提交信息，它们将被保存在本地的 upstream/master 分支

   1 2 3 4 5 6 7

   git fetch upstream # remote: Counting objects: 75, done. # remote: Compressing objects: 100% (53/53), done. # remote: Total 62 (delta 27), reused 44 (delta 9) # Unpacking objects: 100% (62/62), done. # From https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY # * [new branch] master -> upstream/master

4. 切换到本地的 master 分支

   1 2	git checkout master # Switched to branch 'master'

5. 把 upstream/master 分支合并到本地的 master 分支，本地的 master 分支便跟上游仓库保持同步了，并且没有丢失你本地的修改。

   1 2 3 4 5 6 7 8

   git merge upstream/master # Updating a422352..5fdff0f # Fast-forward # README | 9 ------- # README.md | 7 ++++++ # 2 files changed, 7 insertions(+), 9 deletions(-) # delete mode 100644 README # create mode 100644 README.md

提示：同步后的代码仅仅是保存在本地仓库，记得 push 到 Github 哟。

懒人方法，只用 github ，不用命令行

盗几张知乎的图，见图知意。

这一页往下面拉:

参考资料：

• 《Github 上怎样把新 commits 使用在自己的 fork 上？》
• 《更新從Github上fork出來的repository (或是同步兩個不同server端的repository)》
• 《Syncing a fork》

原文：What forces layout / reflow
笔记：涂鸦码龙

注：本文只摘取了自己认为重要的知识点，并没有逐字逐句翻译

当在 JavaScript 中调用（requested/called）以下所有属性或方法时，浏览器将会同步地计算样式和布局。重排（也有叫 reflow 或 layout thrashing 的），通常是性能瓶颈。

元素

盒子计算

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

滚动相关

• elem.scrollBy(), elem.scrollTo()
• elem.scrollIntoView(), elem.scrollIntoViewIfNeeded()
• elem.scrollWidth, elem.scrollHeight
• elem.scrollLeft, elem.scrollTop，设置它们的值，同样会影响

获得焦点

• elem.focus() 可以引起两次重排（源码在此）

还有…

• elem.computedRole, elem.computedName
• elem.innerText（源码）

getComputedStyle

window.getComputedStyle() 通常会引起样式重新计算（源码）

如果以下任何一种情况存在，window.getComputedStyle() 将会引起重排：

1. 元素在 shadow tree 中
2. 使用了 media queries （viewport相关的一种），特别是以下某一属性：（源码）
   • min-width, min-height, max-width, max-height, width, height
   • aspect-ratio, min-aspect-ratio, max-aspect-ratio
   • device-pixel-ratio, resolution, orientation
3. 获取以下的某一种属性：（源码）
   • height, width
   • top, right, bottom, left
   • margin [-top, -right, -bottom, -left, 或简写] ，仅当 margin 是固定值。
   • padding [-top, -right, -bottom, -left, 或简写] ，仅当 padding 是固定值。
   • transform, transform-origin, perspective-origin
   • translate, rotate, scale
   • webkit-filter, backdrop-filter
   • motion-path, motion-offset, motion-rotation
   • x, y, rx, ry

window

• window.scrollX, window.scrollY
• window.innerHeight, window.innerWidth
• window.getMatchedCSSRules() 仅重新计算样式

表单

• inputElem.focus()
• inputElem.select(), textareaElem.select()（源码）

鼠标事件

• mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY（源码）

document

• doc.scrollingElement 仅重新计算样式

Range

• range.getClientRects(), range.getBoundingClientRect()

SVG

相当多；没有详尽的清单，但是 Tony Gentilcore’s 2011 Layout Triggering List 指出了一些。

contenteditable

数不胜数，…包含复制图片到剪切板（源码）

附录

• Reflow 仅在文档流已经改变，设定无效的样式或布局时，带来一定消耗。通常情况下，是由于 DOM 已经改变（class 名已修改，节点已新增/已移除，甚至添加一个伪类，像 :focus）。
• 如果引起重排，样式首先必须重新计算。因此重排会触发两种操作。它的消耗非常依赖于内容/形势，但通常两种操作成本相似。
• 我们该如何避免呢？长话短说：
  • for 循环里触发重排 & 改变 DOM 性能最低，尽量避免。
  • 使用 DevTools Timeline 看看问题在哪。
  • 合并读写 DOM 操作（通过 [FastDOM])(https://github.com/wilsonpage/fastdom) 或 虚拟 DOM 实现）

啃 Chromium 源码：

• 触发重排（和重新计算样式）：updateLayoutIgnorePendingStylesheets - Chromium Code Search
• 触发样式重算：updateLayoutTree - Chromium Code Search

CSS Triggers

CSS Triggers 是非常棒的参考资源。设置/改变给出的 CSS 值，在浏览器的生命周期会出现什么结果，会触发哪些操作都有展示。

更多资料

• Avoiding layout thrashing — Web Fundamentals
• Fixing Layout thrashing in the real world | Matt Andrews
• Timeline demo: Diagnosing forced synchronous layouts - Google Chrome
• Preventing ‘layout thrashing’ | Wilson Page
• wilsonpage/fastdom
• Rendering: repaint, reflow/relayout, restyle / Stoyan
• We spent a week making Trello boards load extremely fast. Here’s how we did it. - Fog Creek Blog
• Minimizing browser reflow | PageSpeed Insights | Google Developers
• Optimizing Web Content in UIWebViews and Websites on iOS
• Accelerated Rendering in Chrome
• web performance for the curious
• Jank Free

好的 API 设计：在自描述的同时，达到抽象的目标。

设计良好的 API ，开发者可以快速上手，没必要经常抱着手册和文档，也没必要频繁光顾技术支持社区。

流畅的接口

方法链：流畅易读，更易理解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//常见的 API 调用方式：改变一些颜色，添加事件监听
var elem = document.getElementById("foobar");
elem.style.background = "red";
elem.style.color = "green";
elem.addEventListener('click', function(event) {
  alert("hello world!");
}, true);
//（设想的）方法链 API
DOMHelper.getElementById('foobar')
  .setStyle("background", "red")
  .setStyle("color", "green")
  .addEvent("click", function(event) {
    alert("hello world");
  });

设置和获取操作，可以合二为一；方法越多，文档可能越难写

1
2
3
4
5
6
7
8
9
10

var $elem = jQuery("#foobar");
//setter
$elem.setCss("background", "green");
//getter
$elem.getCss("color") === "red";
//getter, setter 合二为一
$elem.css("background", "green");
$elem.css("color") === "red";

一致性

相关的接口保持一致的风格，一整套 API 如果传递一种熟悉和舒适的感觉，会大大减轻开发者对新工具的适应性。

命名这点事：既要短，又要自描述，最重要的是保持一致性

“There are only two hard problems in computer science: cache-invalidation and naming things.”
“在计算机科学界只有两件头疼的事：缓存失效和命名问题”
— Phil Karlton

选择一个你喜欢的措辞，然后持续使用。选择一种风格，然后保持这种风格。

处理参数

需要考虑大家如何使用你提供的方法，是否会重复调用？为何会重复调用？你的 API 如何帮助开发者减少重复的调用？
接收map映射参数，回调或者序列化的属性名，不仅让你的 API 更干净，而且使用起来更舒服、高效。

jQuery 的 css() 方法可以给 DOM 元素设置样式：

1
2
3
4
5

jQuery("#some-selector")
  .css("background", "red")
  .css("color", "white")
  .css("font-weight", "bold")
  .css("padding", 10);

这个方法可以接受一个 JSON 对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

jQuery("#some-selector").css({
  "background" : "red",
  "color" : "white",
  "font-weight" : "bold",
  "padding" : 10
});
//通过传一个 map 映射绑定事件
jQuery("#some-selector").on({
  "click" : myClickHandler,
  "keyup" : myKeyupHandler,
  "change" : myChangeHandler
});
//为多个事件绑定同一个处理函数
jQuery("#some-selector").on("click keyup change", myEventHandler);

处理类型

定义方法的时候，需要决定它可以接收什么样的参数。我们不清楚人们如何使用我们的代码，但可以更有远见，考虑支持哪些参数类型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//原来的代码
DateInterval.prototype.days = function(start, end) {
  return Math.floor((end - start) / 86400000);
};
//修改后的代码
DateInterval.prototype.days = function(start, end) {
  if (!(start instanceof Date)) {
    start = new Date(start);
  }
  if (!(end instanceof Date)) {
    end = new Date(end);
  }
  return Math.floor((end.getTime() - start.getTime()) / 86400000);
};

加了短短的6行代码，我们的方法强大到可以接收 Date 对象，数字的时间戳，甚至像 Sat Sep 08 2012 15:34:35 GMT+0200 (CEST) 这样的字符串

如果你需要确保传入的参数类型（字符串，数字，布尔），可以这样转换：

1
2
3
4
5

function castaway(some_string, some_integer, some_boolean) {
  some_string += "";
  some_integer += 0; // parseInt(some_integer, 10) 更安全些
  some_boolean = !!some_boolean;
}

处理 undefined

为了使你的 API 更健壮，需要鉴别是否真正的 undefined 值被传递进来，可以检查 arguments 对象：

1
2
3
4
5
6
7
8
9
10
11
12
13

function testUndefined(expecting, someArgument) {
  if (someArgument === undefined) {
    console.log("someArgument 是 undefined");
  }
  if (arguments.length > 1) {
    console.log("然而它实际是传进来的");
  }
}
testUndefined("foo");
// 结果: someArgument 是 undefined
testUndefined("foo", undefined);
// 结果:  someArgument 是 undefined , 然而它实际是传进来的

给参数命名

1
2
3
4
5

event.initMouseEvent(
  "click", true, true, window,
  123, 101, 202, 101, 202,
  true, false, false, false,
  1, null);

Event.initMouseEvent 这个方法简直丧心病狂，不看文档的话，谁能说出每个参数是什么意思？

给每个参数起个名字，赋个默认值，可好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

event.initMouseEvent(
  type="click",
  canBubble=true,
  cancelable=true,
  view=window,
  detail=123,
  screenX=101,
  screenY=202,
  clientX=101,
  clientY=202,
  ctrlKey=true,
  altKey=false,
  shiftKey=false,
  metaKey=false,
  button=1,
  relatedTarget=null);

ES6, 或者 Harmony 就有 默认参数值 和 rest 参数 了。

参数接收 JSON 对象

与其接收一堆参数，不如接收一个 JSON 对象：

1
2
3
4
5
6
7
8
9
10
11
12

function nightmare(accepts, async, beforeSend, cache, complete, /* 等28个参数 */) {
  if (accepts === "text") {
    // 准备接收纯文本
  }
}
function dream(options) {
  options = options || {};
  if (options.accepts === "text") {
    // 准备接收纯文本
  }
}

调用起来也更简单了：

1
2
3
4
5
6
7

nightmare("text", true, undefined, false, undefined, /* 等28个参数 */);
dream({
  accepts: "text",
  async: true,
  cache: false
});

参数默认值

参数最好有默认值，通过 jQuery.extend() http://underscorejs.org/#extend) 和 Protoype 的 Object.extend ，可以覆盖预设的默认值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var default_options = {
  accepts: "text",
  async: true,
  beforeSend: null,
  cache: false,
  complete: null,
  // …
};
function dream(options) {
  var o = jQuery.extend({}, default_options, options || {});
  console.log(o.accepts);
}
dream({ async: false });
// prints: "text"

扩展性

回调（callbacks）

通过回调， API 用户可以覆盖你的某一部分代码。把一些需要自定义的功能开放成可配置的回调函数，允许 API 用户轻松覆盖你的默认代码。

API 接口一旦接收回调，确保在文档中加以说明，并提供代码示例。

事件（events）

事件接口最好见名知意，可以自由选择事件名字，避免与原生事件 重名。

处理错误

不是所有的错误都对开发者调试代码有用：

1
2
3
4
5
6

// jQuery 允许这么写
$(document.body).on('click', {});
// 点击时报错
//   TypeError: ((p.event.special[l.origType] || {}).handle || l.handler).apply is not a function
//   in jQuery.min.js on Line 3

这样的错误调试起来很痛苦，不要浪费开发者的时间，直接告诉他们犯了什么错：

1
2
3

if (Object.prototype.toString.call(callback) !== '[object Function]') { // 看备注
  throw new TypeError("callback is not a function!");
}

备注：typeof callback === "function" 在老的浏览器上会有问题，object 会当成个 function 。

可预测性

好的 API 具有可预测性，开发者可以根据例子推断它的用法。

Modernizr’s 特性检测 是个例子：

a) 它使用的属性名完全与 HTML5、CSS 概念和 API 相匹配

b) 每一个单独的检测一致地返回 true 或 false 值

1
2
3
4
5
6
7
8

// 所有这些属性都返回 'true' 或 'false'
Modernizr.geolocation
Modernizr.localstorage
Modernizr.webworkers
Modernizr.canvas
Modernizr.borderradius
Modernizr.boxshadow
Modernizr.flexbox

依赖于开发者已熟悉的概念也可以达到可预测的目的。

jQuery’s 选择器语法 就是一个显著的例子，CSS1-CSS3 的选择器可直接用于它的 DOM 选择器引擎。

1
2
3

$("#grid") // Selects by ID
$("ul.nav > li") // All LIs for the UL with class "nav"
$("ul li:nth-child(2)") // Second item in each list

比例协调

好的 API 并不一定是小的 API，API 的体积大小要跟它的功能相称。

比如 Moment.js ，著名的日期解析和格式化的库，可以称之为均衡，它的 API 既简洁又功能明确。

像 Moment.js 这样特定功能的库，确保 API 的专注和小巧非常重要。

编写 API 文档

软件开发最艰难的任务之一是写文档，实际上每个人都恨写文档，怨声载道的是没有一个好用的文档工具。

以下是一些文档自动生成工具：

• YUIDoc (requires Node.js, npm)
• JsDoc Toolkit (requires Node.js, npm)
• Markdox (requires Node.js, npm)
• Dox (requires Node.js, npm)
• Docco (requires Node.js, Python, CoffeeScript)
• JSDuck (reqires Ruby, gem)
• JSDoc 3 (requires Java)

最重要的是：确保文档跟代码同步更新。

参考资料：

• 好的 API 设计
• Designing Better JavaScript APIs
• Secrets of Awesome JavaScript API Design

前些日子总被人问起 iOS Retina 屏，设置 1px 边框，实际显示 2px，如何解决？
原来一直没在意，源于自己根本不是像素眼……
今天仔细瞅了瞅原生实现的边框和CSS设置的边框，确实差距不小……

上图是原生实现，下图是 CSS 边框，手机上对比更加明显

然后，如何解决呢？搜遍整个谷歌，发现好多人早已开始研究解决方案了。到底有哪些方案，到底好不好用呢？试过才知道，把我试过的结论记录一下。

有说用 0.5px 解决的

在2014年的 WWDC，“设计响应的Web体验” 一讲中，Ted O’Connor 讲到关于“retina
hairlines”（retina 极细的线）：在retina屏上仅仅显示1物理像素的边框，开发者应该如何处理呢。

他们曾介绍到 iOS 8 和 OS X Yosemite 即将支持 0.5px 的边框：

额的神呐！so easy! 果真如此吗？

这样还不够（WWDC幻灯片通常是“唬人”的），但是相差不多。

问题是 retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和 之前版本，OS X Mavericks 及以前版本，还有 Android 设备。

解决方案

解决方案是通过 JavaScript 检测浏览器能否处理0.5px的边框，如果可以，给<html>元素添加个class。

1
2
3
4
5
6
7
8
9
10
11

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1)
  {
    document.querySelector('html').classList.add('hairlines');
  }
  document.body.removeChild(testElem);
}
// 脚本应该放在<body>内， 如果在<head>里面运行，需要包装 $(document).ready(function() {   })

然后，极细的边框样式就容易了：

1
2
3
4
5
6
7

div {
  border: 1px solid #bbb;
}
 
.hairlines div {
  border-width: 0.5px;
}

看起来是个解决方案，可是我要兼容安卓设备，和 iOS 8 以下设备怎么办？这个思路行不通。

还有用图片实现 border 的

6x6 的 一张图片

可以用 gif，png，或 base64 图片

1
2
3
4

.border{
    border-width: 1px;
    border-image: url(border.gif) 2 repeat;
}

缺点是改边框颜色时要改图片，不是很方便。