前端性能优化

前端性能优化

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

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

本文目录

image

image

高性能JavaScript

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

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

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

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

image

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

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

image

一、浏览器中的 JavaScript

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

1. 脚本阻塞：将