万妙之心

最近把项目的构建工具从 Grunt 换成了 Gulp，顺手记一下过程和原理层面的差异，不是教怎么用 API，而是搞清楚为什么 Gulp 快。

项目背景：中型后台系统，30+ 个 Less 文件，20+ 个 JS 模块，构建时 Grunt 要跑 40 多秒，换完 Gulp 大概 8 秒出头。

做了个滑动菜单，用 left 属性做位移动画，在 PC 上还行，但在手机上打开，滑动明显掉帧。改成 transform: translateX() 之后，同样的动画立刻丝滑了。

为什么？这背后涉及到浏览器渲染流水线和 GPU 合成层的原理，值得深挖一下。

最近在做一个功能，要先请求用户信息，再根据用户 ID 请求权限列表，权限拿到了再初始化菜单。三个请求串联，最直觉的写法是嵌套 callback：

1
2
3
4
5
6
7

$.ajax({ url: '/api/user', success: function(user) {
  $.ajax({ url: '/api/perms?uid=' + user.id, success: function(perms) {
    $.ajax({ url: '/api/menu', success: function(menu) {
      initMenu(menu, perms)
    }})
  }})
}})

三层嵌套，还没加错误处理，加上 error 回调再缩进两层，代码就基本没法看了。这个问题在 jQuery 1.5 引入 Deferred 对象之后其实有了很好的解法，但很多人用 jQuery 用了好几年，Deferred 根本没碰过。