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 或者服务器端数据库这样的持久化解决方案。

相关推荐
懒大王爱吃狼28 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
奶糖趣多多2 小时前
Redis知识点
数据库·redis·缓存
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
CoderIsArt3 小时前
Redis的三种模式:主从模式,哨兵与集群模式
数据库·redis·缓存
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis