关键词：
JavaScript 作为当前最为常见的直译式脚本语言，已经广泛应用于 Web 应用开发中。为了提高Web应用的性能，从 JavaScript 的性能优化方向入手，会是一个很好的选择。
本文从加载、上下文、解析、编译、执行和捆绑等多个方面来讲解 JavaScript 的性能优化技巧，以便让更多的前端开发人员掌握这方面知识。
什么是高性能的 JavaScript 代码？
尽管目前没有高性能代码的绝对定义，但却存在一个以用户为中心的性能模型，可以用作参考：RAIL模型。
- 响应
如果你的应用程序能在100毫秒内响应用户的操作，那么用户会认为该响应为即时的。这适用于可点击的元素，不适用于滚动或拖动操作。
- 动画
在60Hz的显示器上，我们希望动画和滚动时每秒有60帧，这种情况下每帧大约为16ms。在这16ms的时间内，实际上只有8-10ms来完成所有工作，其余时间则由浏览器的内部和其它差异占据。
- 空闲工作
如果你有一个耗时很久，需要持续运行的任务时，请确保把它分成很小的块，以便允许主线程对用户的输入操作做出反应。不应该出现一个任务延迟超过50ms的用户输入。
- 加载
页面加载应该在1000毫秒内完成。在移动设备上，这是一个很难达到的目标，因为它涉及到页面的互动，而不仅仅是在屏幕上渲染和滚动。
现代加载最佳实践（Chrome Dev Summit 2017）
如果移动网站的加载时间超过三秒，则会有53％的用户放弃访问
50%的用户希望在不到2秒的时间内完成页面加载
77％的移动网站需要10秒以上的时间来加载3G网络
19秒是3G网络上移动站点的平均加载时间
代码内容
你可能已经注意到了，最大的瓶颈是加载网站所需的时间。具体来说就是 JavaScript 的下载、解析、编译和执行时间。除了加载更少的 JavaScript 文件或者加载的更加灵活以外，看起来没有其它办法。
除去启动网站之外，JavaScript 代码又是如何实际工作的呢？
在进行代码优化之前，请考虑你当前正在构建的内容。你正在建立的是一个框架还是一个 VDOM 库？你的代码是否需要每秒执行数千次操作？你是否正在做一个对时间要求较为严格的库来处理用户输入和/或动画？如果没有，你需要把时间和精力转移到更有影响力的地方。
编写高性能代码并不是那么重要，因为对于宏观计划通常没有什么影响。50k ops/s 听起来好于 1k ops/s，但在大多数情况下整体时间并不会有所改变。
解析、编译和执行
从根本上说，大多数 JavaScript 的性能问题，并不在于运行代码本身，而是在代码开始执行之前必须采取的一系列步骤。
我们在这里讨论抽象层次的问题。计算机上运行的大多数代码都是编译后的二进制格式。意思是说，除了所有的操作系统级别的抽象外，代码都可以在硬件上本地运行，不需要准备工作。
JavaScript 代码不是预编译的，它在浏览器上是可读的。
JavaScript 代码首先会被解析，也就是读取并转换成可用于编译的计算机索引的结构，然后再被编译成字节码，最后被编译成机器码，用于设备/浏览器执行。
另一个非常重要的方面是：JavaScript 是单线程的，并且在浏览器的主线程上运行。这意味着一次只能运行一个进程。如果你的 DevTools 性能时间线充满黄色峰值，同时 CPU 占用率达到100%，则将出现丢帧的情况。这是滚动操作常出现的，也是很讨厌的一种情况。
在 JavaScript 代码运行之前，需要完成所有的这些解析、编译和执行工作。在 ChromeV8 引擎中，解析和编译占 JavaScript 执行总时间的50％左右。
所以在这部分中，应该了解两件事情：
1. 虽然 JavaScript 解析的时间长度和包的大小不是完全线性的，但是需要处理的 JavaScript 越少，则所花时间越少。
2. 你使用的每一个 JavaScript 框架（React，Vue，Angular，Preact ...）都是另一个抽象层次（除非它是一个预编译的）。这不仅会增加你的包的大小，而且会让你的代码变慢，因为你不是直接与浏览器通信的。
有些方法可以缓解这种情况，比如使用 service workers 在后台的另一个线程中执行部分工作，或者使用 asm.js 编写更容易编译机器指令的代码。
我们所能做的，就是避免使用 JavaScript 动画库。只有在使用常规的 CSS 转换和动画完全无法实现时，才去使用这些库。
即使这些 JavaScript 动画库使用 CSS 转换，合成属性和 requestAnimationFrame( )，但是它们仍然运行在 JavaScript 的主线程上。基本上这些库会使用内联样式每16ms访问一次 DOM。你需要确保所有的 JavaScript 都在每帧8ms以内完成，才能保持动画的平滑性。
另一方面，CSS 动画和转换会在主线程中运行，如果能够高效执行，则能避免重新布局/重排的情况出现。
考虑到大多数动画都在加载或用户交互的过程中运行，这可以为你的 web 应用程序提供非常重要的调整空间。
web Animations API 是一个即将到来的功能集，它能够脱离主线程执行高性能的 JavaScript 动画。但就目前而言，还需要继续使用 CSS 转换等技术。
howjavascriptworks(javascript工作原理)渲染引擎及性能优化小技巧(代码片段)
... |----> RenderTreeCSSOMtree ----| 这是JavaScript工作原理的第十一章。迄今为止，之前的JavaScript工作原理系列文章集中于关注JavaScri 查看详情
javascript的工作原理：解析抽象语法树（ast）+提升编译速度5个技巧(代码片段)
这是专门探索JavaScript及其所构建的组件的系列文章的第14篇。如果你错过了前面的章节，可以在这里找到它们：JavaScript是如何工作的：引擎，运行时和调用堆栈的概述！JavaScript是如何工作的：深入V8引擎&编写优化代码的5个... 查看详情
python代码性能优化技巧
...特别是在performance较差的机器上，因此有必要进行一定的代码优化来提高程序的执行效率。如何进行Python性能优化，是本文探讨的主要问题。本文会涉及常见的代码优化方法，性能优化工具的使用以及如何诊断代码的性能瓶颈等... 查看详情
.net性能优化小技巧(代码片段)
.NET性能优化小技巧Intro之前做了短信发送速度的提升，在大师的指导下，发送短信的速度有了极大的提升，学到了一些提升.NET性能的一些小技巧HttpClient优化关于使用HttpClient，大概很多人都知道尽量使用单例以提升HttpClient的性... 查看详情
性能优化:资源合并与压缩--文件合并(css与javascript文件合并提升前端性能)(代码片段)
...篇文章:性能优化:资源合并与压缩–压缩(前端开发过程中JavaScript、HTML、CSS文件的压缩)性能优化---下篇文章:性能优化:前端图片的相关内容–概述(讲解前端各种图片格式以及不同格式的图片对性能 查看详情
从页面加载到数据请求，前端页面性能优化实践分享(代码片段)
...端开发都知道前端的工作内容是很多的，对于HTML、CSS、Javascript、Image、Flash等各种内容的使用。为了更好提升应用的性能，我们需要对各种资源内容进行不同方面的优化。对用户而言，优化可以让应用的响应速度加快，加载更加... 查看详情
jquery性能优化和技巧(代码片段)
...时，应该需要注意的几个性能问题，希望对于大家在书写高性能的Web应用中有所帮助。 1.使用最新版本的jQuery类库jQuery每一个新的版本都会较上一版进行Bug修复和一些优化，同时也会包含一些创新，所以建议使用最新版本的j... 查看详情
15个javascript优化技巧
一段精简的代码不仅能让人心情愉悦，而且也会让代码的逼格有所提升。一个优秀的产品往往需要一点一点的打磨才能脱颖而出，精简的代码是其中重要的组成部分。那么，就让我们来了解一下一些常见的优化代码的手段吧。1... 查看详情
编写高效的java代码：常用的优化技巧
编写高效的Java代码：常用的优化技巧【二】编写高效的Java代码：常用的优化技巧【三】之JVM调优编写高效的Java代码：常用的优化技巧【四】之并发编程技巧1.代码结构优化代码结构优化是提高Java程序... 查看详情
android性能优化—布局优化技巧(代码片段)
前面几篇文章在前面几篇文章当中，Android内存泄漏和OOM分析(一)Android内存泄漏和OOM分析(二)Androidapp启动优化我们学习了如何通过合理管理内存，app的优化启动的方式来提升应用程序的性能。实际上界面布局也会对应用程... 查看详情
聊聊sql优化的15个小技巧(代码片段)
...想到的很有可能是优化sql语句，因为它的改造成本相对于代码来说也要小得多。那么，如何优化sql语句呢？这篇文章从15个方面，分享了sql优化的一些小技巧，希望对你有所帮助。1避免使用select*很多时候，我们写sql语句时，为... 查看详情
javascript优化项目代码技巧之语言基础
...eval7.消除switch歧义8.不要省略块标志{} Javascript的弱类型以及函数作用域等规则使用编写Javascript代码极为容易，但是编写可维护、高质量的代码却变得十分困难，这个系列的文章将总结 查看详情
从页面加载到数据请求，前端页面性能优化实践分享(代码片段)
...开发都知道前端的工作内容是很多的，对于HTML、CSS、Javascript、Image、Flash等各种内容的使用。为了更好提升应用的性能，我们需要对各种资源内容进行不同方面的优化。对用户而言，优化可以让应用的响 查看详情
react性能优化小技巧(代码片段)
REACT优化性能介绍一些项目中可用于改进React代码的有效技巧。避免在渲染函数中使用内联函数定义原因：如果在JSX属性中使用箭头函数，它将在每次渲染时创建新的函数实例。这可能会为垃圾收集器带来很多工作。可以... 查看详情
java性能优化
...总结https://www.cnblogs.com/yueshutong/p/9555174.html程序的性能受代码质量的直接影响。在本文中，主要介绍一些代码编写的小技巧和惯例，这些技巧有助于在代码级别上提升系统性能。1、慎用异常在Java软件开发中，经常使用try-catch进行... 查看详情
优雅编程|7个你应该掌握的javascript编码技巧
JavaScript是一个灵活性很强的语言，有很多和其他语言不一样的特性，本文分享7个日常开发中可以用到的JavaScript编码技巧，享受其优雅编程的快感。更多的编码技巧可以参阅《18个JavaScript代码的小技巧》和《24个Javascript代码优化... 查看详情
c＃提升性能的几点提示和技巧(代码片段)
C＃性能提示和技巧在Raygun[1]，我们是一群非常懂多种语言的开发人员。Raygun的各个部分使用不同的语言和框架编写-最好的工作方式。鉴于大量的C＃和我们正在处理的数据的爆炸性增长，在不同的时间需要进行一... 查看详情
mysql性能调优和优化技巧(代码片段)
介绍MySQL是一种流行的开源数据库应用程序，它以一种有意义且易于访问的方式存储和构造数据。对于大型应用程序，庞大的数据量可能会导致性能问题。本指南提供了一些关于如何提高MySQL数据库性能的调优技巧。先决... 查看详情