如何缩短 js 解析时间,如何优化首屏(延迟加载)

缩短js解析时间

代码优化

避免全局查找(沿着作用域链找需要时间),避免闭包,用数据结构等

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

压缩

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

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

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

混淆

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

模块化加载 / 按需加载

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

懒加载

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

缓存

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

使用最新的JavaScript引擎


优化首屏延迟加载

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

懒加载

模块化加载 / 按需加载

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

你可能感兴趣的:(javascript,开发语言,ecmascript)