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

缩短js解析时间

代码优化

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

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

压缩

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

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

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

混淆

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

模块化加载 / 按需加载

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

懒加载

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

缓存

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

使用最新的JavaScript引擎


优化首屏延迟加载

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

懒加载

模块化加载 / 按需加载

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/3835.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c++ 无锁队列的简单实现

无锁队列的基本介绍 一个关于无锁队列的多线程读写代码示例。在这里,我提供一个简单的示例来说明这个问题。 在使用无锁队列时,需要注意以下几点: 使用原子操作来实现对队列的读写操作,以避免多线程同时访问同一数据导致的竞争条…

在SPringBoot生成验证码

1.引入依赖,这个依赖中包含了生成验证码的工具类 <!--引入hutool --><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.3.9</version></dependency> 2.编写配置类 import cn.hu…

Linux字符设备操作函数

Linux字符设备操作函数是指对字符设备进行打开、关闭、读取、写入、控制等基本操作的函数&#xff0c;它们通过字符设备结构体中的 file_operations 结构体来定义。常用的字符设备操作函数包括&#xff1a; 1、open: 当一个进程试图打开设备文件时&#xff0c;调用这个函数。开…

华润燃气牵手腾讯云 数字技术助力燃气行业高质量发展

7月13日&#xff0c;华润燃气与腾讯云正式签署战略合作协议。双方将充分发挥各自优势&#xff0c;探索AI大模型在燃气行业的深度应用&#xff0c;并深耕分布式计算、连接和客户运营等领域&#xff0c;不断提升燃气民生服务的效率、质量&#xff0c;共同推动行业数字化转型和高质…

ASEMI快恢复二极管MUR20100CTR在电子工程中的应用

编辑-Z 随着电子技术的日益发展&#xff0c;各种电子元件的使用场景与需求也在逐步扩大。今天&#xff0c;我们将聚焦于一款广泛应用于各类电路的二极管——MUR20100CTR&#xff0c;来详细解读其性能特征及应用。 一、MUR20100CTR二极管的主要特性 MUR20100CTR是一款极高性能的…

DataTable数据对比

DataTable数据对比 文章目录 DataTable数据对比前言一、计算DataTable差集结构不同的情况结构相同的情况 二、计算DataTable交集结构不同的情况结构相同的情况 三、计算DataTable的并集合两个DaTable结构相同的情况计算并集 前言 开发中我们经常会出现查询数据库后返回DataTab…

【iOS安全】iphone出现support.apple.com/iphone/restore

解决iphone出现support.apple.com/iphone/restore 解决方法1&#xff1a;使用爱思助手 可能是因为手机进入了恢复模式 手机连接Mac端的爱思助手之后&#xff0c;使用爱思助手的“退出恢复模式” 经测试有效 解决方法2&#xff1a;iphone强制重启 强制重新启动iPhone8或iPhone…

[Java]Set、Map、List常见实现类的特点、使用方法总结

文章目录 1、图谱2、List1、ArrayList1. 特点2. 常见方法 2、LinkedList1、特点2、常见方法 3、Vector1、特点 3、Map1、HashMap1、特点常用方法 2、TreeMap1、特点 3、LinkedHashMap1、特点 4、Set1、HashSet1 、特点2、常用方法 2、LinkedHashSet特点 3、TreeSet1、特点2、使…

Python - Django 框架 - 设置SECRET_KEY

在Django中&#xff0c;SECRET_KEY是一个重要的配置项&#xff0c;用于加密和保护用户数据、会话和其他敏感信息。下面是设置SECRET_KEY的几种常见方法&#xff1a; 1、在settings.py文件中硬编码设置&#xff1a; 打开项目中的settings.py文件&#xff0c;并在其中定义一个字…

SEED实验复现

SEED 项目由雪城大学教授杜文亮于 2002 年启动雪城大学。它由美国总共1万美元资助 美国国家科学基金会。现在&#xff0c;SEED 实验室正在被超过 全球数千个研究所。SEED 代表 &#xff08;SEcurity EDucaton&#xff09;。 https://github.com/seed-labs/seed-labs 该项目使用…

C++牛客WebServer项目学习笔记一

1.Linux系统命令&#xff1a; sudo apt install softname # sudo 管理员权限&#xff1b;apt 安装软件命令&#xff1b;ps -ef | grep ssh # ps 查看进程命令&#xff1b;| 管道符&#xff1b;grep 过滤出&#xff08;过滤出ssh关键词&#xff09;&#xff1b; 3.Ctrl滚动鼠标…

Qt添加第三方字体

最近开发项目时&#xff0c;据说不能用系统自带的微软雅黑字体&#xff0c;于是找一个开源的字体&#xff0c;思源黑体&#xff0c;这个是google和Adobe公司合力开发的可以免费使用。本篇记录一下Qt使用第三方字体的方式。字体从下载之家下载http://www.downza.cn/soft/266042.…

Python爬虫——urllib_微博cookie登陆

cookie登陆适用场景&#xff1a; 适用场景&#xff1a;数据采集的时候&#xff0c;需要绕过登陆&#xff0c;然后进入到某个页面 # 适用场景&#xff1a;数据采集的时候&#xff0c;需要绕过登陆&#xff0c;然后进入到某个页面 import urllib.requesturl https://weibo.cn/7…

selenium

现场打脸&#xff1a;如何使用Selenium批量上传文件&#xff1f; Automa官网 低代码开发&#xff0c;推荐一款Web 端自动化神器&#xff1a;Automa 网页自动化操作工具Automa学习使用记录01 网页自动化操作工具Automa学习使用记录02 - 变量用法 selenium 完整的线程和进程创建…

【解决】Android Studio打包出现not found for signing config ‘externalOverride‘

问题出现场景 之前我的这个项目在另一台电脑上开发&#xff0c;现在迁移到这台计算机上&#xff0c;出现了key报错的问题&#xff0c;网络上有些说需要在XML中进行配置signature相关的内容&#xff0c;这个感觉比较复杂&#xff0c;本文主要介绍一个简单的解决方法&#xff0c;…

SOT封装特点和优势,sot23封装尺寸

SOT封装是一种常用的集成电路封装类型&#xff0c;常见的SOT封装类型包括3引脚&#xff08;如SOT-23&#xff09;、4引脚&#xff08;如SOT-89和SOT-223&#xff09;和6引脚&#xff08;如SOT-363&#xff09;&#xff0c;可以适应不同的电路设计和功能要求。具有以下特点和优势…

机械设计制造及其自动化专业向PLC方向发展的可行性

是的&#xff0c;机械设计制造及其自动化专业往PLC&#xff08;可编程逻辑控制器&#xff09;方向发展是可行的。PLC是一种用于控制和自动化各种机械设备和工业过程的计算机控制系统。它被广泛应用于工业自动化领域&#xff0c;包括制造业、能源行业、交通运输等。 我这里刚好…

UNIX/LINUX fork函数的问题 并不适合共享

起因介绍 一位朋友问我一个关于socket通信的相关问题&#xff0c;其需要解决的问题如下&#xff1a; 需要存在一个服务器进程&#xff0c;服务器进程会进行监听&#xff0c;负责建立与客户端的socket连接&#xff0c;同时可以存在多个客户端进程&#xff0c;客户端进程之间可以…

提示工程师:如何写好Prompt

提示工程由来 提示工程是一门相对较新的学科&#xff0c;用于开发和优化提示以有效地将语言模型 (LM) 用于各种应用程序和研究主题。 研究人员使用提示工程来提高 LLM 在广泛的常见和复杂任务&#xff08;例如问题回答和算术推理&#xff09;上的能力。 开发人员使用提示工程…

JavaWeb(4)——HTML、CSS、JS 快速入门

一、JavaScript 数组 数组筛选&#xff08;查找&#xff0c;将原来数组中的某些数据去除&#xff09; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content&quo…