所以在这部分中，应该了解两件事情：
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 转换等技术。
捆绑尺寸非常重要
现在已经不再是在 </body> 结束标签之前包含有多个 <script> 的时代了。现在，可以在 npm 上找到各式各样的工具包，并且可以将这些工具包和 Webpack 捆绑在一个单个的 1MB 大小的 JavaScript 文件中，在完成数据计划时，提醒用户的浏览器进行爬取。
这样可以使用更少量的 JavaScript，这也意味着你的项目可能不再需要整个Lodash库。如果必须使用 JavaScript 库，也可以考虑使用 React 以外的东西，比如 Preact 或者 HyperHTML，它们只是 React 的1/20大小。
Webpack 3 有着神奇的功能，被称作代码分割和。它不会将所有 JavaScript 模块捆绑到一个 app.js 整包中，而是使用 import( ) 语法自动分割代码并且进行异步加载。
你不需要使用框架、组件和客户端路由，就能获得这些好处。你只需要简单地在主 JavaScript 文件中写入以下内容：
if (document.querySelector('.mega-widget')) { import('./mega-widget'); }