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

news/2024/11/28 17:52:48/

缩短js解析时间

代码优化

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

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

压缩

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

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

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

混淆

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

模块化加载 / 按需加载

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

懒加载

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

缓存

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

使用最新的JavaScript引擎


优化首屏延迟加载

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

懒加载

模块化加载 / 按需加载

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


http://www.ppmy.cn/news/957442.html

相关文章

使用3DS Max 创建未来派螺栓枪模型

推荐: NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 步骤 1 创建一个框并将其转换为可编辑多边形(右键单击>转换为:>转换为可编辑多边形),然后使用连接添加一系列边循环,如下图所示。 步骤 2 …

【Web安全】小白怎么快速挖到第一个漏洞,src漏洞挖掘经验分享,绝对干货!

src漏洞挖掘经验分享 – 掌控安全以恒 一、公益src 公益src是一个白帽子提交随机发现的漏洞的品台,我们可以把我们随机发现或者是主动寻找到的漏洞在漏洞盒子进行提交。 在挖掘src的时候不能越红线,一般情况下遇到SQL注入 只获取数据库名字以证明漏洞的…

chatgpt是什么?|百科全书|小智ai

ChatGPT丨小智ai丨chatgpt丨人工智能丨OpenAI丨聊天机器人丨AI语音助手丨GPT-3.5丨OpenAI ChatGPT|GPT-4|GPT-3|人机对话|ChatGPT应用|小智ai|小智ai|小智ai|小智ai 摘要: ChatGPT 是一个基于 GPT-3.5 架构的大型语言模型,由 OpenAI 开发。作为一项创新性…

《ChatGPT百科全书》你对ChatGPT的问题都可以在这里找到答案

我花了一周时间整理了份《ChatGPT百科全书》,里面涵盖了账号、ChatGPT小白科普、Prompt学习由浅入深、ChatGPT花式玩法、AI工具库、利用ChatGPT变现的90种方法以及最新研报等; 传送门:Docshttps://xum666e6ro.feishu.cn/docx/Sk11dgxhtoQFKd…

国外短信发送接口

最近自己在弄一个英国的优惠券的网站!需要用到国外的短信发送接口! 搜索和查找发现有几个比较不错的短信发送接口网站! 代码粘出来给大家分享一下! SMSService 抽象接口类 /*** squarelife* * author eric** 2011-11-28 下午…

submail 发送国际短信,国内短信,国际国内邮箱工具类

submail 发送国际短信,国内短信,国际国内邮箱工具类 添加集成sdk <!-- submail邮件集成 --><dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId

日本超高人气聊天软件LINE最全注册攻略来了

简介&#xff1a;Line是一款即时的通讯软件&#xff0c;全球注册用户超过4亿&#xff0c;在日本常用的聊天软件就是Line&#xff0c;Line的特点是能够让用户在有网络的情况下&#xff0c;随时随地免费和亲朋好友通话&#xff0c;同时也可以通过Line使用购物&#xff0c;行动支付…

短信平台不知道怎么选?来看看这几个平台:

不少程序员在做项目的时候会碰上短信收发验证码的问题&#xff0c;通常来说解决方案有二&#xff0c;要么自己写一个验证码模块儿&#xff0c;要么去找短信平台。但自己写一个验证码模块是出了名的麻烦&#xff0c;而且会耗费掉不少时间&#xff0c;有着时间到不如优化下自己的…