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

相关推荐
安冬的码畜日常4 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴6 分钟前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中8 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木12 分钟前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师35 分钟前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚40 分钟前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧44 分钟前
HTML字符实体和转义字符串
前端·html
小希爸爸1 小时前
2、中医基础入门和养生
前端·后端
局外人LZ1 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
G_GreenHand1 小时前
Dhtmlx Gantt教程
前端