比来工作一一个项目在运行时有一些机能问题，为此我看了很多与机能优化相干的内容，下面做个简单的分享。

前端机能优化，这包含 CSS/JS 机能优化、收集机能优化等等内容，这方面的内容 《高机能网站扶植指南》、《高机能网站扶植进阶指南》、《高机能JavaScript》 等等书都做了很多讲解，强烈推荐浏览。（这些书单拜见本文结尾）

下面的内容，膳绫擎提到的书中大年夜都包含了，是以可以推敲转而去读这些书，做一个完完全全的懂得，对于本文，也就不要再读下去了。

如不雅你保持看到了这里，那就来谈谈我碰到的一些前端机能问题，并聊聊解决筹划。

1 优先优化对机能影响大年夜的部分

当应用有了机能问题后，不要一股脑扎到代码中去，起重要想想那部分对机能影响最大年夜。优先优化那些对机能影响大年夜的部分，可以起到吹糠见米的效不雅。

应用 Chrome DevTools ，可以很快地找到导致机能变差的最重要身分，关于 Chrome DevTools 的应用强烈推荐浏览 Google Developers 膳绫擎的系列教程 - Chrome DevTools。

别的在对代码进行优化的时刻，也起重要存眷那些存在轮回或者高频调用的处所。有的时刻我们可能不知道某个处所是否会高频履行，比如某些事宜的回调。这个时刻可以应用 console.count 来对履行次数进行统计。当这部分高频履行的代码已经足够优化的时刻，就要推敲是否可以或许削减履行次数。比如一个时光复杂度为 O(n*n*n) 的算法，再怎么竽暌古化也不如将其变为 O(n*n) 来的快。

2 对高频触发的事宜进行撙节或消抖

对于 Scroll 和 Touchmove 这类事宜，永远不要低估了它们的履行频率，处理这类事宜的时刻可以推敲是否要给它们添加一个撙节或者消抖过的回调。撙节和消抖，可能其他人不这么翻译，其实也就是 debounce 和throttle 这两个函数。

debounce 和 throttle 是两个类似（但不雷同）的用于控制函数在某段事宜内的履行频率的技巧。你可以在 underscore 或者 lodash 中找到这两个函数。

2.1 应用 debounce 进行消抖

多次持续的调用，最终实际上只会调用一次。想象本身在电梯琅绫擎，门将要关上，这个时刻别的一小我来了，撤消了关门的操作，过了一会儿门又要关上，又来了一小我，再次撤消了关门的操作。电梯会一向延迟关门的操作，直到某段时光琅绫腔人再来。

将频繁调用的函数限制在一个给定的调用频率内。它包管某个函数频率再高，也只能在给定的事宜内调用一次。比如在滚动的时刻要检查当前滚动的地位，来显示或隐蔽回到顶部按钮，这个时刻可以应用 throttle 来将滚动回调函数限制在每 300ms 履行一次。

须要提到的是，这两个函数经常被误用，且很多时刻当事人并没有意识到本身误用了。我曾经用错过，也见过别人用错。这两个函数都接收一个函数作为参数，然后返回一个撙节/去抖后的函数，下面第二种用法才是精确的用法：

// 缺点的用法，每次事宜触发都获得一个新的函数 
$(window).on('scroll', function() { 
   _.throttle(doSomething, 300); 
}); 
 
// 精确的用法，将撙节后的函数作为回调 
$(window).on('scroll', _.throttle(doSomething, 200)); 

3 JavaScript 很快，DOM 很慢

JavaScript 如今已经很快了，真正慢的是 DOM。是以避免应用一些不易读但据说能进步速度的写法。不久前，
一位同伙对我说应用 ‘+’ 号将字符串转为数字比应用 parseInt 快。对此我并没有困惑，因为直觉上 parseInt 进行了函数调用，很可能会慢一些，我们一路在 node v6.3.0 长进行了一些验证，结不雅切实其实如我们所估计的那样，然则差别有多大年夜呢，进行了 5 亿次迭代，应用 + 号的办法仅仅快了2秒。固然快了两秒，但实际中将字符转为数字的操作可能只会进行几回，是以如许的做法根本没有意义，它只会让代码变得更难读。

（豆瓣8.7分， https://book.douban.com/subject/3132277/）

plus: 1694.392ms 
parseInt: 3661.403ms