315 阅读 2020-07-28 11:18:02 上传
以下文章来源于 西语语言学工作坊
本文最初发布于 Medium 网站，经原作者授权由 InfoQ 中文站翻译并分享。
JavaScript 已经成为有史以来最受欢迎的编程语言之一。从 W3Tech 的数据来看，全世界将近 96％的网站都在使用它。关于 Web 有一个关键的事实是，你无法控制访问网站的用户所用设备。当用户访问你的网站时，使用的可能是高端设备也可能是低端设备，网络连接条件也有好有差。这意味着你必须尽可能优化自己的网站，以满足任何用户的需求。
附带提一下，请共享和重用你的 JS 组件，以在高质量代码（写起来需要花费时间）和合理的交付时间之间保持适当的平衡。你可以使用 Bit 等流行工具将任何项目中的组件（普通 JS、TS、React、Vue 等）共享到 Bit 的组件中心，用不了多大功夫。
超大循环肯定会耗费很多的时间，所以你应该尽早打破这些超大循环。你可以用 break 关键字和 continue 关键字来做这件事，从而编写更高效的代码。
在下面的示例中，如果你没有从循环中 break，则你的代码将循环运行 1000000000 （10亿）次，显然会过载的。
let arr = new Array(1000000000).fill('----');
arr[970] = 'found';
for (let i = 0; i < arr.length; i++) {
if (arr[i] === 'found') {
console.log("Found");
break;
}
}let arr = new Array(1000000000).fill('----');
arr[970] = 'found';
for (let i = 0; i < arr.length; i++) {
if(i%2!=0){
continue;
};
process(arr[i]);
}你可以在此处详细了解循环和性能的关系：
https://www.oreilly.com/library/view/high-performance-javascript/9781449382308/ch04.html
与其他 JavaScript 语句相比，访问 DOM 的速度很慢。如果你对 DOM 进行更改，触发了布局的重新绘制，那么就得等好一阵子了。
为了减少访问 DOM 元素的次数，请先访问一次，然后将其用作局部变量。完成需求后，请一定将其设置为 null 来移除该变量的值。这将防止内存泄漏，因为这会触发垃圾回收过程。
delete 关键字用于从对象中删除属性。这个关键字的性能表现不怎么好，预计它将在未来的更新中修复。
const object = {name:"Jane Doe", age:43};
object.age = undefined;你还可以使用 Map 对象，Bret 认为它的 delete 方法会更快。
如果你有使用 Google Light House 的经验，肯定会熟悉一种称为“first contentful paint”的指标。它是 Lighthouse 报告的 Performance 部分中跟踪的六个指标之一。
First Contentful Paint（FCP）衡量用户转到你的页面后浏览器渲染第一段 DOM 内容所花费的时间。页面上的图像、非白色
获得更高的 FCP 分数的最佳方法之一是使用代码拆分。代码拆分是一种在传输开始时仅将必要的模块发送给用户的技术。通过减小最初发送的载荷大小，这将极大地影响 FCP 分数。
流行的模块打包器（例如 webpack）可为你提供代码拆分功能。你还可以利用原生 ES 模块来单独加载各个模块。你可以在此处详细了解有关原生 ES 模块的信息。
https://blog.bitsrc.io/understanding-es-modules-in-javascript-a28fec420f73
在现代网站中，脚本比 HTML 更为密集，其大小更大且消耗更多的处理时间。默认情况下，浏览器必须等待脚本下载和执行完毕后，再处理页面的其余部分。
于是笨重的脚本可能会阻止网页的加载。为了避免这种情况，JavaScript 为我们提供了两种分别称为 async 和 defer 的技术。你只需将这些属性添加到
相关工具
