11、使用异步代码防止线程阻塞你应该知道 JavaScript 默认情况下是同步的和单线程的 。但是在某些情况下，你的代码需要很大的计算量 。代码本质上是同步的，意味着一段代码运行时将阻止其他代码语句运行，直到前者完成执行为止 。这会降低整体性能 。
但是我们可以通过异步代码来避免这种情况 。异步代码以前以回调的形式编写，但是 ES6 引入了一种处理异步代码的新样式 。这种新样式被称为 Promise 。你可以在 MDN 的官方文档中了解有关回调和 Promise 的更多信息 。
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing
可是等等……
JavaScript 默认情况下是同步的，并且也是单线程的 。
如何在单个线程上运行异步代码呢？这是很多人感到困惑的地方 。做到这一点，主要依赖运行在浏览器后台的 JavaScript 引擎 。JavaScript 引擎是执行 JavaScript 代码的计算机程序或解释器 。JavaScript 引擎可以用多种语言编写 。例如，支持 Chrome 浏览器的 V8 引擎使用 C++ 编写的，而支持 Firefox 浏览器的 SpiderMonkey 引擎使用 C 和 C++ 编写的 。
这些 JavaScript 引擎可以在后台处理任务 。根据 Brian 的说法，调用栈可以识别 Web API 的函数，并将其交给浏览器处理 。浏览器完成这些任务后，它们将返回并作为回调被推上堆栈 。
你可能想知道 Node.js 是怎么做这些工作的，毕竟它没有浏览器的帮助 。实际上，支持 Chrome 的那个 V8 引擎也是 Node.js 背后的支撑 。这里有 Salil 的一篇很棒的博客文章，解释了 Node 生态系统中的这一过程 。
https://medium.com/better-programming/is-node-js-really-single-threaded-7ea59bcc8d64
12、使用代码拆分如果你有使用 Google Light House 的经验，肯定会熟悉一种称为“first contentful paint”的指标 。它是 Lighthouse 报告的 Performance 部分中跟踪的六个指标之一 。
First Contentful Paint（FCP）衡量用户转到你的页面后浏览器渲染第一段 DOM 内容所花费的时间 。页面上的图像、非白色<canvas>元素和 SVG 被视为 DOM 内容；iframe 内部不包含任何内容 。
获得更高的 FCP 分数的最佳方法之一是使用代码拆分 。代码拆分是一种在传输开始时仅将必要的模块发送给用户的技术 。通过减小最初发送的载荷大小，这将极大地影响 FCP 分数 。
流行的模块打包器（例如 webpack）可为你提供代码拆分功能 。你还可以利用原生 ES 模块来单独加载各个模块 。你可以在此处详细了解有关原生 ES 模块的信息 。
https://blog.bitsrc.io/understanding-es-modules-in-javascript-a28fec420f73
13、使用 async 和 defer在现代网站中，脚本比 HTML 更为密集，其大小更大且消耗更多的处理时间 。默认情况下，浏览器必须等待脚本下载和执行完毕后，再处理页面的其余部分 。
于是笨重的脚本可能会阻止网页的加载 。为了避免这种情况，JavaScript 为我们提供了两种分别称为 async 和 defer 的技术 。你只需将这些属性添加到<script>标记中即可 。
Async 会让浏览器在不影响渲染的情况下加载脚本 。换句话说，页面不会等待 async 脚本，而是先处理和显示内容 。
Defer 是让浏览器在渲染完成后加载脚本 。如果同时指定它们两者，则 async 在现代浏览器上更优先，而支持 defer 但不支持 async 的老式浏览器将回退为 defer 。
这两个属性可以帮助你大幅减少页面加载时间 。我强烈建议你阅读 Flavio 的这篇博客文章 。
https://flaviocopes.com/javascript-async-defer/
14、在后台运行 CPU 密集型任务可以使用 Web Worker 在后台线程中运行脚本 。如果你有一些高强度的任务，可以将它们分配给 Web Worker，这些 WebWorker 可以在不干扰用户界面的情况下运行它们 。创建后，Web Worker 可以将消息发布到该代码指定的事件处理程序来与 JavaScript 代码通信，反之亦然 。
作者 | Mahdhi Rezvi
译者 | 王强
策划 | 李俊辰
转发链接：https://mp.weixin.qq.com/s/veJ6mhxd5XwVG4OF7i0VYQ
【14个 JavaScript 代码优化技巧】
推荐阅读
- 自建Git服务器 - 创建属于你自己的代码仓库,开启你的Git私服之旅
- 防止删库悲剧发生，这里有个Bash脚本测试框架，危险代码一测便知
- 附代码 你想用深度学习谱写自己的音乐吗？这篇指南来帮助你！
- 如何在 JavaScript 中获取当前日期
- Python3中可能不会用到的10个功能！但是能让你的代码更简洁直观
- 关于JavaScript中this关键字指向的问题
- 别纠结，提高代码整洁度也没那么难
- 附代码 基于NLP的COVID-19虚假新闻检测
- 含完整源代码和开发文档 人工智能图像识别绘本阅读方案
- 周末学会了 10个超级实用 Javascript 技巧