【前端性能优化】高性能JavaScript读书笔记

封面一隅 & 抢镜的比翼鸟书签

序

曾经看过一篇文章，有一句话这样说：

只有在大学的图书馆里，你才能真正赚回你交的学费。

临近毕业，还想再去图书馆多转转。偶然在架子上发现了这本书，一看作者是写大名鼎鼎的红宝书的人，就很感兴趣。再者，最近用 JavaScript 刷 LeetCode 发现，提交显示 JavaScript 要比 Go 语言或 Python 有更大的时间和内存消耗，也使我把了解 JavaScript 内存机制和性能优化提上了日程。

本书虽然有部分章节涉及到的问题有一定年代感，比如最后一章[工具]，由于前端技术的快速迭代和浏览器的不断支持下，已经不适用了。但是这本书的前面章节详细地从js运行、访问、代码结构优化、异步编程等多方面讲解了 JavaScript 优化的策略，解答了我刷题时的疑惑，也让我认识到之前秋招面试的时候遇到的一些坑，还是有许多需要引起重视的知识体系需要不断扩容。

总之，这本书不仅是对前端性能优化基础知识的一种补充掌握，还有很多底层原理的实现值得学习，推荐有项目经验并希望提升Web应用性能的前端开发人员阅读。

前端性能优化

下面是我认知的前端性能优化的策略，本书主要着手 JavaScript 优化展开阐述。

• JavaScript优化
• 非核心代码异步加载
• 浏览器缓存
• 使用CDN
• DNS预解析
• 优化资源
• 清理不必要的依赖

本文目录

上

下

高性能JavaScript

早期，IE浏览器的JS引擎基于“静态垃圾回收机制（Static Garbage Collection）”，该引擎监视内存中固定数量的对象来确定何时进行垃圾回收。随着Web应用的日益发展，JS引擎吃不消了。

虽然其他浏览器有着更加完善的GC和更好的性能，但大多数都是使用JS解释器来执行。

这也正解释了开篇刷 LeetCode 题时的困惑，解释型代码为什么没有编译型代码快？

因为，解释型代码必须经历把代码转换成计算机指令的过程。无论解释器多么智能，都会带来一些性能的消耗。

解释型代码转换

而编译器已经有了各种各样的优化，可以基于词法分析去判断代码想实现什么，产生完成任务的运行最快的 机器码。解释器很少有这样的优化，往往代码怎么写就怎么被执行。

2008年，JS引擎收获最大的一次性能升级，该引擎的研发代号为V8。V8是一款为 JavaScript 打造的实时（JIT）编译引擎，它把 JavaScript 代码转化为机器码来执行。紧接着其他浏览器也优化了JS引擎，这些只是编译器层面的优化，代码的性能依然需要开发人员关注。

编译器层面的优化

一、浏览器中的 JavaScript

浏览器中js代码的执行可能会阻塞浏览器的其他进程，下边列出了几点棘手的问题以及优化方式。

1. 脚本阻塞：将