CSS硬件加速的好与坏

本文翻译自Ariya Hidayat的Hardware Accelerated CSS: The Nice vs The Naughty。感谢Kyle He帮助校对。

每个人都痴迷于60桢每秒的顺滑动画。为了实现这个顺滑体验现在用的最流行的一个做法就是使用『CSS硬件加速』。在一些极端例子中,强制使用translate3d意味着大大提高应用程序的性能。

现代浏览器大都可以利用GPU来加速页面渲染。在GPU的众多特性之中,它可以存储一定数量的纹理(一个矩形的像素点集合)并且高效地操作这些纹理(比如进行特定的移动、缩放和旋转操作)。这些特性在实现一个流畅的动画时特别有用。浏览器不会在动画的每一帧都绘制一次,而是生成DOM元素的快照,并作为GPU纹理(也被叫做层)存储起来。之后浏览器只需要告诉GPU去转换指定的纹理来实现DOM元素的动画效果。这就叫做GPU合成,也经常被称作『硬件加速』。

不幸的是,浏览器是一个很复杂的软件(Firefox有几百万行代码)。因此一句简单的『使用translate3d来提高性能』并不能囊括所有的情况。如果碰巧有效那不过是瞎猫碰上死耗子而已。所以有必要知道更多的运行机制,才能更好地处理实际情况。

阅读全部

使用ES6进行开发的思考

ECMAScript6已经于近日进入了RC阶段,而早在其处于社区讨论时,我就开始一直在尝试使用ES6进行开发的方案。在Babel推出后,基于ES6的开发也有了具体可执行的解决方案,无论是Build还是Debug都能得到很好的支持。

而在有了充足的环境、工具之后,我们面临的是对ES6众多新特性的选择和分析,以便选取一个最佳的子集,让我们可以享受ES6带来的便利(减少代码量、提高可读性等)的同时,也可以顺利运行于当前以ES3-ES5为主的浏览器环境中。

经过分析后,本文试图对ES6各个特性得出是否适合应用的初步结论,并一一解释其使用场景。ES6的特性列表选自es6features

  • ★★★ 推荐使用
  • ★★ 有考虑地使用
  • ★ 慎重地使用
  • ☆ 不使用
特性 推荐程度
arrows ★★★
classes ★★★
enhanced object literals ★★★
template strings ★★★
destructuring ★★
default + rest + spread ★★★
let + const ★★★
iterators + for..of ★★
generators
unicode
modules ★★
module loaders
map + set + weakmap + weakset ★★
proxies
symbols
subclassable built-ins
promises ★★★
math + number + string + array + object APIs ★★★
binary and octal literals
reflect api
tail calls ★★

接下来我们以上特性挨个进行介绍。需要关注一点:如果你不想使用shim库(如Babel的browser-polyfill.jsgeneratorsRuntime.js)或者想使用尽可能少的helper(Babel的externalHelpers配置),那么需要按你的需求进一步缩减可使用的ES6特性,如MapSet这些就不应该使用。

阅读全部

使用FontEditor创建web字体图标

关于web字体图标,市面上已经有一些好的在线工具来管理和生成,iconfonticomoon都可以将svg图标转换成font图标以便在网页上使用。但是如果你想要更多:ttf、woff、eot、otf统统拿来用,svg、图片统统可导入,图标效果实时可调整,只需要在线动动鼠标,就可以完成呢。 那就需要一个好用的在线font编辑工具,FontEditor,你需要的东西都在这里。

阅读全部

VIM的JavaScript补全

最近微软出了个Visual Studio Code,听说很diao,尤其是对JavaScript的补全支持很令人惊艳!

如果你是一个vim党,那么请淡定!

在JavaScript开发过程中,使用vim内置的ins-completion再加上一些插件,我们同样可以获得很牛逼的completion支持!

阅读全部

ECharts 发布 2.2.2

在五一劳动节的前一天,ECharts发布了一个非常2的版本,2.2.2。在本版本中,我们一共做了以下重大升级:

  • 新增韦恩图(venn)及Treemap
  • 发布 ECharts 在线构建工具
  • 新增对数轴

并且修复了一些反馈较多、优先级较高的问题:

阅读全部

当我们谈论颜色时,我们在谈论什么 - 基础知识篇

谈到 颜色,前端工程师首先想起的便是基于 RGB 的 16 进制颜色代码,这也是我们工作中最常用到的 数值表示 方式。但是当我们的谈话再深入一些,话题远不止这些:

前端:「我在 hackathon 时做了个网站,配色怎么看都丑,你帮我看看?」
设计:「这俩颜色不搭,光晕现象都出来了,还有把这里的饱和度调低一点,亮度调高一点。」
前端:「……」(你™在说什么!)

这时你应该去向设计小伙伴要最熟悉的 16 进制颜色代码了,但被抱怨缺乏 设计感 的挫折还是有一点的。

想要和小伙伴愉快的交流下去,我们要了解颜色的「基础知识」,还要对「色彩空间」、「颜色搭配」、「颜色与情感」等各个方面都有些了解。作为一个边看书边查百科的伪设计师, 我想通过这个系列与大家一起从 颜色 开始,培养点 设计感

本篇我们一起复习一下基础知识。

阅读全部