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

相关推荐
吞掉星星的鲸鱼34 分钟前
使用高德api实现天气查询
前端·javascript·css
lilye6637 分钟前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
....49238 分钟前
Vue3 + Element Plus + AntV X6 实现拖拽树组件
javascript·vue.js·elementui·antvx6
zhougl9963 小时前
html处理Base文件流
linux·前端·html
花花鱼3 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_3 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
极客天成ScaleFlash4 小时前
极客天成NVFile:无缓存直击存储性能天花板,重新定义AI时代并行存储新范式
人工智能·缓存
careybobo4 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)5 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之6 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue