如何编写更加自解释的代码

当你发现代码中的某些注释完全无用时你会怎么办？

我们经常会犯一个错误：当我们更新代码时，却忘记更新相应的注释。不友好的注释并不会影响代码的执行，但使我们的调试和阅读带来极大困扰，注释描述的是一种逻辑，而代码确是另外一种，结果会浪费我们大量时间来搞懂这段代码的意思，更糟糕的是这样的注释很可能误导我们。

这并不是说注释完全没有必要，优秀的代码有具有相应优秀的注释。我们可以利用某些编程技术来减少我们的注释，使我们的代码更加自解释。这不仅仅使我们的代码更加容易理解，还有助于改善项目的整体设计。

这样的代码通常被称为自解释的代码，下面我将介绍一些编写自解释代码的方法。

使用 FLIP 来提高 Web 动画的性能

CSS 动画已经存在很多年了，使用恰当可以很好地提高网站的用户体验，也正是由于其容易使用，就很可能出现性能低下的动画，从而降低了整个页面的运行效率。回想一下：你曾经是否使用过 CSS 来改变元素的宽度、高度或绝对位置？如果回答是肯定的，就意味着你触发了性能低下的重排或重绘计算，在某些情况下甚至可能导致页面闪烁。

什么样的情况会导致页面闪烁呢？现代浏览器根据设备的刷新率来刷新页面中的内容，对大多数设备而言，屏幕以 60 次每秒的频率刷新，即 60HZ。如果在屏幕上出现了某些运动，如滚动、过渡或动画，浏览器应该每秒刷新 60 帧，如果某些帧花费的时间太长，进而导致浏览器的刷新频率跟不上设备的刷新频率（跳帧现象），就会出现页面闪烁。所以在 Web 应用中运行的动画都应该保持在 60FPS 下。

为了生成流畅的动画，你需要让浏览器尽可能少地工作，最好的办法就是充分利用 GPU，并避免动画过程中触发页面重排或重绘。目前 Chrome，Firefox，Safari，Opera 和 IE11 都对 transform（translate，rotate 和 scale） 和 opacity 进行硬件加速。所以我们应该尽量使用 transform 和 opacity 属性来实现我们的动画，因为改变其他属性都可能导致页面重排或重绘。还有最好在绝对定位的元素上使用动画，因为这些元素位置的改变不会影响其他元素。只要严格遵循以上两条规则，就能确保在绝大多数情况下你的动画在 60FPS 下运行。这还不是全部，下面将介绍一个新的技术方案，可以帮助你创建真正轻量级的动画。

使用 SVG 输出 Octicon

GitHub 不再使用字体来输出图标了。我们把代码中所有的 Octicon 替换成了 SVG 版本。虽然这些改动并不那么明显，但马上你就能体会到 SVG 图标的优点。

左侧放大后的字体版本和右侧清晰的 SVG 版本

切换到 SVG 以后，图标会作为图片渲染而非文字，这使其在任何分辨率下都能很好地以各种像素值显示。

如何将 npm 作为构建工具使用

上个月，我在这篇文章《为什么要停止使用 Grunt 和 Gulp》中建议大家使用 npm 作为替代方案，npm 的 scripts 配置可以实现这些构建工具的所有功能，而且更简洁、更优雅和较少的模块依赖和维护开销。本文第一稿大概有 6000 字，深入讲解了如何将 npm 作为替代方案，但那篇文章主要在表达我的观点，而不是作为一篇教程。然而，读者的反馈却很强烈，许多读者告诉我 npm 并不能完全实现这些构建工具提供的特性，甚至有的读者直接给我一个 Gruntfile，然后反问我：“怎么用 npm 来实现这样的构建方案”？所以我决定进一步更新本文，将其作为一个新手入门教程，主要分享如何使用 npm 来完成一些常见的构建任务。

npm 是一个很好的工具，提供了一些奇特的功能，也是 NodeJS 的核心，包括我在内的很多人每天都在使用 npm，事实上在我的 Bash 历史记录中，npm 的使用频率仅次于 git。npm 更新也很快，旨在使 npm 成为一个强大的模块管理工具。而且，npm 有一个功能子集，可以通过运行一些任务来维护模块的生命周期，换句话说，它也是一个强大的构建工具。

任何人都可以使用到的 Gist 服务

Github 作为代码分享平台在开发者中非常流行。此平台托管了包括游戏、书籍以至于字体在内的一千两百多万个开源项目（现在更多），这使其成为互联网上最大的代码库。Github 还提供另一个非常有用的功能，这就是 Gist。开发人员常常使用 Gist 记录他们的代码片段，但是 Gist 不仅仅是为极客和码农开发的，每个人都可以用到它。如果您听说过类似 Pastebin 或 Pastie 这样的 Web 应用的话，那您就可以看到它们和 Gist 很像，但是 Gist 比它们要更优雅，因为这些免费应用一般含有广告，而且带有很多其他杂七杂八的功能。

如果您不是极客您也可以按照如下方式使用Gist：

前端性能优化 - 资源预加载

当提到前端性能优化时，我们首先会联想到文件的合并、压缩，文件缓存和开启服务器端的 gzip 压缩等，这使得页面加载更快，用户可以尽快使用我们的 Web 应用来达到他们的目标。

资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。

引用 Patrick Hamann 的解释：

预加载是浏览器对将来可能被使用资源的一种暗示，一些资源可以在当前页面使用到，一些可能在将来的某些页面中被使用。作为开发人员，我们比浏览器更加了解我们的应用，所以我们可以对我们的核心资源使用该技术。

这种做法曾经被称为 prebrowsing，但这并不是一项单一的技术，可以细分为几个不同的技术：DNS-prefetch、subresource 和标准的 prefetch、preconnect、prerender。

go2top