在一些年以前性能问题,我们前端开发能做的还是很有限的;不过随着 JAVAScript 应用越来越复杂,优化 JavaScript 性能的重要性就越发的凸显出来了。这里我分享 8 个提高 JavaScript 性能的方法。
入题
1. 尽可能的缓存
我们知道缓存一些资源或者结果是为了减少再次获得这些资源所需要的时间,所以这是一条很常见的通识。
有两种选择。
通过把重复访问的对象存储在用户定义的变量中,以及在后续对该对象的引用中使用变量,可以立即实现性能的提升。
2. 延迟不必要的 JS 首屏加载
我们希望页面的加载时间能不让用户焦虑,推迟不必要的 JS 首屏加载是一个很好地方法。
程序中不是所有函数都需要在页面的初始加载时就要用到。有很多是用户必须执行某个操作才能执行某个函数,那么你可以将该函数的加载推迟到初始页面加载之后。
一些通用方法
function loadScript (src, onload) { var scriptTag = document.createElement("script"); scriptTag.src = src; if (typeof onload === "function") { scriptTag.onload = onload; scriptTag.onreadystatechange = function () { if (scriptTag.readyState === 4) { onload(); } } } document.body.AppendChild(scriptTag); } 复制代码
3. 删除未使用的 JavaScript
这个步骤是十分必要的,很多人在不使用某些代码的时候仅仅只是注释掉;因为他们生怕产品经理又反悔。 其实你删除这些代码,不仅会缩短传输时间,还会缩短浏览器分析和编译代码所需的时间。
提供几点作为参考:
4. 避免内存泄漏
如果内存正在泄漏,则加载的页面将保留越来越多的内存,并最终占用设备的所有可用内存并严重影响性能。你可能见过此类故障(并且可能对此类故障感到懊恼),例如轮播。
在 Chrome 开发者工具中,你可以通过在“Performance ”标签中记录时间线来分析你的网站是否存在内存泄漏。
若内存占用基本平稳,就说明不存在内存泄漏,反之便是存在。
几种常见的内存泄漏原因:
5. 避免使用全局变量 & 优先使用局部变量
这一点主要是想说定义变量的时候用最近原则,即可以在当前作用域定义的变量就一定不要定义在上一级,更不要一股脑的直接定义在全局。也就是缩短作用域链的查找长度。
我们知道 JS 查找变量是按照作用域链查找的,多查找一层势必会多一点处理时间。定义在当前作用域可以加快代码的执行速度。
当作用域丢失时,该作用域的变量将被销毁。
6. 使用 web workers 处理需要大量执行时间的代码
web workers 使 Web 应用程序的主执行线程分开的后台线程中运行脚本操作成为可能。这样做的好处是,可以在单独的线程中执行费力的处理,允许主线程(通常是UI)运行,而不会阻塞/减慢速度。
web workers 的几个使用场景
7. 合理使用事件代理
我们知道事件代理可以合并类似的操作,可以直接降低与 DOM 的交互。使用事件代理的优点就可想而知了:
8. 将重复的代码一定抽象成函数
我们在写代码的时候,有一些代码会在很多模块中出现。有些人会觉得不以为然,这样不会消耗太多的性能,也就没有抽象出来。
其实这是必要的,这样做的目的是:
其他
还有一些诸如代码压缩、使用 CDN、合并代码、Gzip、减少 HTTP 请求、DOM操作优化、图片优化等也是优化性能的常见方法,不过这些都更加偏向前端工程一些。所以这里只是总结了一些优化 JavaScript 代码性能的方法。