如何缩短 js 解析时间，如何优化首屏（延迟加载）

缩短js解析时间

代码优化

避免全局查找（沿着作用域链找需要时间），避免闭包，用数据结构等

减小js的大小：压缩和混淆

压缩

剔除没用到的代码，把长表达式转换成同含义的短表达式等

语法转换和优化：压缩工具会对 JavaScript 代码进行语法转换和优化，以提高代码的执行效率。例如，它可能将一些长表达式简化为更短的形式或使用更高效的语法结构。这有助于减小文件大小并改善代码的性能。

字符串处理：压缩工具可以对字符串进行处理，如将连续的字符串连接为单个字符串，替换常用字符串为短标识符等。这种处理方式可以减少字符串的字节数和文件大小。

混淆

通过重命名变量、函数和类名，删除注释和空白字符等方式来改变源代码的结构和可读性，使得代码更加难以理解和逆向工程。这样做不仅能减小文件大小，还可以增加对代码的保护。

模块化加载 / 按需加载

将JavaScript代码分割成多个模块，并按需异步加载。这样可以避免一次性加载大量的JavaScript代码，从而减少初始解析时间。常用的模块化加载方案包括使用Webpack的代码分割功能（Code Splitting）或使用ES6模块的动态导入。

懒加载

延迟加载JavaScript代码，只在需要时再进行加载和解析。通过使用懒加载技术，可以减少初始页面加载时的解析时间，提高页面的响应速度。在Web应用中，可以根据用户的交互行为或滚动位置来触发懒加载。

缓存

合理利用浏览器缓存机制，将经常使用的JavaScript资源缓存到本地。这样可以避免重复下载和解析相同的JavaScript文件，从而加快页面加载速度。

使用最新的JavaScript引擎

---

优化首屏延迟加载

首屏也是 js 解析的一部分，所以上面的一些方法也能用，如：

懒加载

模块化加载 / 按需加载

新增：异步加载脚本：将非关键的 JavaScript 脚本标记为 async 或者 defer，让浏览器在处理 HTML 解析过程时，异步加载这些脚本，避免阻塞首屏内容的呈现