另一方面，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');
}
如果你的应用程序需要在页面上用到这个小部件，它将动态加载所需的支持代码。
另外，Webpack 需要运行时间来工作，并将其注入到它生成的所有 .js 文件中。如果使用该 commonChunks 插件，则可以使用以下内容将运行时抽取到 Chunk 中：
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime',
}),
确保 Webpack 在主 JavaScript 包之前已完成加载，那么所有其它 chunk 中的运行时间会剥离到各自的文件中，这种情况也被成为 runtime.js。例如：
<script src="runtime.js"> <script src="main-bundle.js">
然后是编译代码和 polyfills 的部分。如果你正在编写现代 JavaScript 代码（ES6 +），则可以使用 Babel 将其转换为 ES5 兼容的代码。与原生 ES6+ 代码相比，编译不仅增加了文件的大小，还增加了复杂性，并且经常会出现性能下降的情况。
除此之外，你还很可能使用 babel-polyfill 软件包和 whatwg-fetch，来修复旧版本浏览器中的缺失功能。因此如果你正在编写 async/await，你还需要使用包 regenerator-runtime 的生成器来进行编译。