js文件的执行和变量初始化缓存

js文件和变量初始化

  • 全局变量举例
  • js文件加载

全局变量举例

import * as turf from "@turf/turf";
import earcut from "earcut";
import * as THREE from "three";
import { TextGeometry } from "three/addons/geometries/TextGeometry.js";import { FontLoader } from "three/addons/loaders/FontLoader.js";
import { CSS2DObject } from "three/addons/renderers/CSS2DRenderer.js";
import buffer from "../../utils/buffer.js";
import { FastBackward } from "@blueprintjs/icons/lib/esm/generated-icons/16px/paths/index.js";
import {earthRadius,feature,featureCollection
} from "@turf/helpers";
import jsts from "@turf/jsts";
const { BufferOp, GeoJSONReader, GeoJSONWriter } = jsts;const NamePlanningTrajectory = "planning-trajectory";
const NameObjects = "environment_objects";
const parkingLotColors = {highlight: 0xffff00, // 黄色normal: 0x888888, // 更深的灰色用于参考线greenSpace: 0x00ff00, // 绿色区域,目标车位whiteLines: 0xffffff, // 白色,车位色// worldModelTarget: 0xffa500, // 橙色worldModelTarget: 0xffffff, 
};const textGeometryCache = new Map();class ObjectBoundary extends THREE.LineSegments {...
.....
....
if (label) {RubikPromise.then((font) => {if (!textGeometryCache.has(label)) {requestIdleCallback(() => {const geometry = new TextGeometry(label, {font: font,size: 0.5,height: 0,curveSegments: 1,});geometry.center();textGeometryCache.set(label, geometry);const fontMesh = new THREE.Mesh(geometry, fontMaterial);fontMesh.rotation.z = Math.PI;fontMesh.rotation.x = -Math.PI / 2;polygonMesh.add(fontMesh);});return;}const fontMesh = new THREE.Mesh(textGeometryCache.get(label),fontMaterial);fontMesh.rotation.z = Math.PI;fontMesh.rotation.x = -Math.PI / 2;polygonMesh.add(fontMesh);});}

在该 JS 文件中,textGeometryCache 是使用 new Map() 初始化的一个变量,是一个 Map 对象。这个缓存变量用于存储文本几何体(TextGeometry),以避免多次创建相同文本的几何体对象,并优化性能。

textGeometryCache 会在文件被加载执行时初始化,也就是说它在模块的作用域内一直存在。一旦定义,它将在整个应用程序的生命周期中持续存在,除非主动清除或者应用程序被销毁。
具体来说:
当 RubikPromise.then 或 createParkingSpace 函数首次为一个特定的标签 label 创建文本几何体时,此几何体会被存入 textGeometryCache 中。
若后续需要相同的标签文本几何体,会首先检查 textGeometryCache 是否已有对应的对象,如果有,则直接从缓存中获取,而不是重新创建,从而节省了资源和时间。
textGeometryCache 会一直保存这些文本几何体的引用,直到显式调用 textGeometryCache.clear() 或者 textGeometryCache.delete(key) 清除缓存中的元素,或者整个页面被重新加载导致 JS 环境重置
由于 textGeometryCache 是一个全局变量,并且在模块作用域内,所以只要该 JS 文件没有被重新加载,textGeometryCache 及其内容就会一直存在。如果希望释放缓存中的几何体资源,需要手动进行清理操作。

js文件加载

JavaScript 文件被加载执行通常发生在以下情况:

  • 网页初次加载: 当浏览器首次加载一个包含 JavaScript 的网页时,页面中所有的 〈script〉 标签引用的外部 JS 文件将会被下载并执行。对于内联脚本(即直接写在 HTML 中的 〈script〉 内容),它们也会在此时执行。

  • 动态DOM 添加 〈script〉 标签来加载额外的 JS 文件。这些文件在添加到 DOM 后会被立即加载并执行。

  • 模块导入: 如果你在使用 ECMAScript 模块 (ESM),当一个模块或脚本使用 import 语句导入另一个模块时,被导入的模块会被加载并执行一次。

  • 用户交互: 用户与网页交互(例如点击按钮)可能会触发 JavaScript 代码的执行,但这不会导致整个文件重新加载,只是运行已加载文件中的特定功能或事件处理程序。

  • 页面重载/导航: 当用户刷新页面、提交表单或进行新的页面导航时,当前页面上的所有 JavaScript 文件都会被重新加载和执行。

  • 异步请求: 使用 AJAX 技术或 Fetch API 获取新的 JavaScript 代码,并执行返回的脚本。

每次文件被加载执行时,其中定义的全局变量和函数就会重新初始化。这意味着如果一个 JS 文件中有一个全局 Map 变量,像提到的 textGeometryCache,每当该 JS 文件被重新加载执行时,这个 Map 就会被重新创建,之前存储的数据将会丢失。
如果希望跨越多个页面保持某些状态,你需要使用像 Local Storage、Session Storage 或者服务器端数据库这样的持久化解决方案。

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

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

相关文章

《梦醒蝶飞:释放Excel函数与公式的力量》6.4 TODAY函数

第四节:6.4 TODAY函数 1)TODAY函数概述 TODAY函数是Excel中一个非常有用的内置函数,它返回当前的日期。与NOW函数不同,TODAY函数仅返回日期部分,时间部分默认为午夜(0:00)。 2)函…

[数据质量]手动实现 阿里云DataWorks 的数据质量监控告警功能

目录 手动实现 DataWorks 的数据质量监控告警功能1. 简介:2. 数据表准备2.1 tmp_monitor_tbl_info (数据监控信息表)2.2 tmp_monitor_rule_info (数据质量监控规则表)2.3 tmp_monitor_tbl_info_log_di (数据监控信息记录表) 3. 程序开发3.1 数据检查程序3.2 告警信息推送程序3.…

Jenkins教程-10-发送飞书测试报告通知

上一小节我们学习了发送企业微信测试报告通知的方法,本小节我们讲解一下发送飞书测试报告通知的方法。 1、自动化用例执行完后,使用pytest_terminal_summary钩子函数收集测试结果,存入本地status.txt文件中,供Jenkins调用 conft…

MyBatis(9)MyBatis 的一级缓存和二级缓存的区别

MyBatis 提供了两级缓存机制:一级缓存(Session级别)和二级缓存(全局级别),以提高应用的性能通过减少数据库的查询次数。 一级缓存(Session级别) 一级缓存是基于 SQL 会话&#xff…

优化 C# 和 .NET Core Web API 中的 LINQ 查询

LINQ(语言集成查询)是 C# 中的一项强大功能,允许开发人员以可读且简洁的方式查询和操作数据。但是,LINQ 的使用效率低下可能会导致性能瓶颈,尤其是在处理 .NET Core Web API 中的大型数据集时。优化 LINQ 查询对于维护…

嵌入式 Linux 设备刷系统具体组成

嵌入式 Linux 设备刷系统具体组成 1 介绍1.1 概述1.2 嵌入式 Linux 的组成1.3 U-Boot1.4 Linux 内核1.5 设备树1.6 根文件系统 参考 1 介绍 1.1 概述 一个完整的 linux 系统,通常包含了 U-Boot、kernel、设备树以及根文件系统。 1.2 嵌入式 Linux 的组成 1.3 U-…

Java热门技术点总结:Lambda表达式与Stream API

第一部分:Lambda表达式 1. 简介 Lambda表达式是Java 8引入的一个非常重要的特性,它提供了一种简洁、灵活的函数式编程方式。Lambda表达式允许我们将函数作为参数传递,极大的简化了代码的编写。 2. 基本语法 Lambda表达式的基本语法如下&a…

教程:Spring Boot中集成Elasticsearch的步骤

教程:Spring Boot中集成Elasticsearch的步骤 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 在当今大数据时代,搜索功能对于许多应用程…

注解详解系列 - @RestClientTest:Rest客户端测试

注解简介 在今天的注解详解系列中,我们将探讨RestClientTest注解。RestClientTest是Spring Boot提供的一个注解,用于简化Rest客户端的测试。通过RestClientTest注解,可以轻松地对使用RestTemplate或WebClient的代码进行单元测试,…

Java基于jjwt操作jwt

之前讲解了jwt的相关知识&#xff0c;有不了解的&#xff0c;可以查看相关的文章JWT简介-CSDN博客&#xff0c;本节不再介绍&#xff0c;主要讲解有关java中如何通过jjwt库产生jwt以及解析jwt的相关操作。 添加maven依赖 <dependency><groupId>io.jsonwebtoken&l…

sam_out 目标检测的应用

缺点参考地址训练验证模型解析 缺点 词表太大量化才可 参考地址 https://aistudio.baidu.com/projectdetail/8103098 训练验证 import os from glob import glob import cv2 import paddle import faiss from out_yolo_model import GPT as GPT13 import pandas as pd imp…

目标检测之YoloV1

一、预测阶段&#xff08;前向推断&#xff09; 在预测阶段Yolo就相当于一个黑箱子&#xff0c;输入的是448*448*3的图像&#xff0c;输出是7*7*30的张量&#xff0c;包含了所有预测框的坐标、置信度和类别 为什么是7*7*30呢&#xff1f; --将输入图像划分成s*s个grid cell&a…

【多线程】如何解决线程安全问题?

&#x1f970;&#x1f970;&#x1f970;来都来了&#xff0c;不妨点个关注叭&#xff01; &#x1f449;博客主页&#xff1a;欢迎各位大佬!&#x1f448; 文章目录 1. synchronized 关键字1.1 锁是什么1.2 如何加锁1.3 synchronized 修饰方法1) 修饰普通成员方法2) 修饰静态…

LeetCode //Bash - 192. Word Frequency

192. Word Frequency Write a bash script to calculate the frequency of each word in a text file words.txt. For simplicity sake, you may assume: words.txt contains only lowercase characters and space ’ ’ characters.Each word must consist of lowercase ch…

【系统架构设计师】七、信息安全技术基础知识(访问控制技术|抗攻击技术|计算机系统安全保护能力等级)

目录 一、访问控制技术 二、信息安全的抗攻击技术 2.1 分布式拒绝服务DDoS与防御 2.3 ARP欺骗攻击与防御 2.4 DNS欺骗与防御 2.5 IP欺骗与防御 2.6 端口扫描&#xff08;Port Scanning&#xff09; 2.7 强化TCP/IP堆栈以抵御拒绝服务攻击 2.8 系统漏洞扫描 三、信息安…

基于weixin小程序乡村旅游系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;商家管理&#xff0c;旅游景点管理&#xff0c;景点类型管理&#xff0c;景点路线管理&#xff0c;系统管理 商家帐号账号功能包括&#xff1a;系统首页&#xff0c;旅游景点管理&…

ArchLinux挑战安装(ZFS、Wayland、KDE、xero)

目录 0. 前言&#xff1a; 1. 先期准备 1.1 引导ArchLinx光盘。 1.2 禁用 reflector 服务 1.3 防止网卡禁用 1.4 wifi设置 1.5 测试网络是否连接 1.6 更新系统时间 1.7 更换源 1.8 下载ZFS模块 1.9 加载ZFS模块 2. 磁盘处理 2.1 查看磁盘分区 2.2 清除与整个磁盘…

HTML5与HTML:不仅仅是标签的革新

当我们提到HTML5&#xff0c;很多人会想到这是HTML的一个升级版本&#xff0c;增加了许多新的标签和特性。然而&#xff0c;HTML5带来的变化远不止于此。它是一个全面的网页开发框架&#xff0c;重新定义了网络应用程序的构建方式&#xff0c;为开发者提供了前所未有的灵活性和…

【数组】- 最小覆盖子串

1. 对应力扣题目连接 最小覆盖子串 2. 实现案例代码 public class MinimumCoveringSubstring {public static void main(String[] args) {System.out.println(minWindow("ADOBECODEBANC", "ABC")); // 输出&#xff1a;"BANC"System.out.prin…

解决RuntimeError: Unsupported image type, must be 8bit gray or RGB image.

今天在使用Opencv进行人脸识别项目时发现了一个问题&#xff0c;一直报这个错误RuntimeError: Unsupported image type, must be 8bit gray or RGB image.查了一下资料也是解决了&#xff0c;这样给大家分享一下 解决方案 Numpy 有一个主要版本更新&#xff0c;与 dlib 不兼容。…