林克日记

本篇文章侧重 WebGL 基础，非常适合没有相关开发经验的同学。 为了更好地了解一些 WebGL 的基础概念和特性，精心准备了几段代码进行演示，希望大家能有所收获。 文章中会涉及到一些数学公式的推导，不感兴趣可以忽略。 简介WebGL 是什么WebGL，全称 Web Graphics Library，是一种用于在网页浏览器中渲染 2D 和 3D 图形的 API。它基于 OpenGL ES 2.0，通过 JavaScript 在不使用插件的情况下，直接利用 GPU 进行硬件加速渲染。 WebGL 是现代浏览器（如 Chrome、Firefox、Safari）支持的标准，能够在 PC、手机等多平台上运行。 WebGL 的应用场景游戏开发：许多浏览器游戏通过 WebGL 实现复杂的 3D 场景和交互效果。 图形/游戏引擎 数据可视化：使用 WebGL 可以在网页上实现高性能的 3D 数据可视化工具。 交互式 3D 网页：可以实现像 3D 地图、虚拟展览等内容。百度地图 VR/AR：结合 WebGL 和 WebXR...

一、Oxlint 简介官网：https://oxc-project.github.io/ Oxc (The Oxidation Compiler) 是一个用 Rust 编写的 JavaScript 和 TypeScript 高性能工具集合。Oxc 正在构建一个解析器、linter、格式化程序、转译器、压缩器、解析器。 Oxlint 是一种静态代码分析工具，旨在通过检测错误和执行代码样式规则来提高代码质量。与用 JavaScript 编写的 ESLint 不同，Oxlint 是用 Rust 开发的，Rust 以其性能和安全性而闻名，这赋予了 Oxlint 显著的速度优势。 二、特性1. 性能处理代码的速度比 ESLint 快 50-100 倍，并且会随着 CPU 核心的数量而扩展。下图为 Oxlint 与 ESLint 耗费时间对比： 尤雨溪在试用之后都在感叹 Oxlint 的速度之快。 2. 开箱即用零配置Oxlint...

在 JavaScript 中，所有数字都采用 IEEE 754 双精度浮点格式表示。由于这种表示法的限制，JavaScript 中的 Number 类型有其最大值（Number.MAX_VALUE，约 1.7976931348623157e+308），以及安全整数的最大值（Number.MAX_SAFE_INTEGER，2^53 - 1）。当数值超出这些范围时，可能会出现以下问题： 超出 Number.MAX_VALUE：超出此值的数值会变为 Infinity。 超过安全整数范围：大于 Number.MAX_SAFE_INTEGER 的整数可能会失去精度。 为了正确处理这些情况，我们可以采用以下几种方案： 使用 BigIntES2020 引入了 BigInt，可以用来表示任意大小的整数。BigInt 使用 n 后缀表示，例如： 123// 创建一个超过 Number.MAX_SAFE_INTEGER 的整数const bigIntValue = 9007199254740993n;console.log(bigIntValue); //...

在现代 JavaScript 开发中，Babel 已经成为开发者必不可少的工具。它可以将 ES6/ES7 等新语法转换为向后兼容的 ES5 代码，确保项目在各种浏览器和运行环境中都能正常运行。而在 Babel 的众多插件与工具中，babel-runtime 扮演着重要的角色。本文将深入探讨 babel-runtime 的作用、使用场景以及它给项目带来的优势。 什么是 Babel Runtime？Babel Runtime 是 Babel 的一个辅助包，其主要目的是： 复用辅助代码：在将现代 JavaScript 语法转换为旧版语法时，Babel 会引入大量的辅助函数（helper functions），例如继承、扩展对象、异步操作等。如果每个文件都内联这些辅助代码，不仅会导致重复代码，还会显著增加打包体积。 避免全局污染：很多 polyfill 实现可能会直接修改全局对象（如 Array.prototype、Promise 等）。使用 Babel Runtime 后，相关 polyfill...

在前端开发中，随着项目的迭代和需求的变化，源码中往往会积累大量未被使用的代码（Dead Code）。这部分代码可能包括未调用的函数、未使用的变量、未被引用的模块以及多余的 CSS 样式。虽然在构建时通过 Tree Shaking 可以剔除这些代码以减少打包体积，但如果希望从源码层面就把这些无用代码清除掉，从而保持代码库的整洁和可维护性，则需要借助一些静态分析工具和 IDE 插件来实现。 下面，我们分别介绍针对 JavaScript/TypeScript 和 CSS 代码直接清理的方法和工具。 清理 JavaScript/TypeScript 代码1. 使用静态分析工具ts-unused-exports / ts-prune 这类工具可以扫描 TypeScript 项目，识别出那些定义但未被引用的导出项或变量。 ts-unused-exports该工具会分析你的 TS 源码，并报告所有未被使用的导出。你可以根据报告结果，手动或借助脚本自动删除这些代码。使用示例： 1npx...

在 React 开发中，Context 是一种便捷的状态共享方案，能够在组件树中传递数据而不必逐层传递 props。但同时，Context 更新时会触发所有消费该 Context 的组件重新渲染，这在大型应用中可能带来性能问题。本文将探讨如何避免 Context 更新时引起整个挂载节点树的重新渲染，介绍一些优化策略和代码示例。 理解 Context 更新导致的重新渲染React Context 更新时，所有使用 useContext 或 Consumer 的组件都会重新渲染。这是因为 React 需要确保每个消费者组件都能获取到最新的 Context 值。即使消费者组件自身没有变化，只要 Context 的 value 发生变化，它们就会触发重新渲染。 优化策略1. 使用 useMemo 缓存 Provider value确保传递给 Provider 的 value 在不必要更新时保持不变。避免在 Provider 内部直接创建对象或函数，每次渲染都会生成新的引用，从而引发子树重新渲染。 示例代码： 123456789101112131415161718import...

代码重构（Code Refactoring）指的是在不改变外部行为的前提下，对代码内部结构进行改进。重构的目的是使代码更加清晰、易于理解、便于维护和扩展。下面我们从整体流程、常见方法和注意事项三个方面介绍代码重构的一般做法。 代码重构的整体流程1. 分析和识别代码问题重构的第一步是了解现有代码的问题所在。常见的”代码异味”（Code Smells）包括： 重复代码：相同或相似的代码片段出现在多个地方。 过长方法：方法体太长，逻辑复杂，难以维护。 过度耦合：模块之间依赖过于紧密，不易独立修改。 命名不规范：变量或方法名称模糊，不易理解其含义。 通过代码审查和静态代码分析工具，可以帮助你识别这些问题。 2. 编写和完善测试用例在开始重构前，确保有充分的测试覆盖。单元测试和集成测试可以帮助你在重构过程中检测出不小心引入的错误，保证外部行为不变。 3. 制定重构计划制定一个详细的重构计划，将重构任务拆分为多个小步骤。每次重构都只聚焦于一个小问题，确保重构过程渐进、可控。例如： 提取重复代码到公共函数中 拆分过长的方法 引入设计模式以降低耦合 4....

随着前端应用的日益复杂和用户期望的不断提高，前端监控已经成为保障用户体验和业务稳定性的关键环节。本文将全面介绍前端监控方案，从错误捕获、性能监控、用户行为分析到数据上报与隐私保护，多角度解析如何构建一个高效、可扩展且安全的前端监控体系。 前端监控的目标与意义在构建前端监控方案时，首先需要明确目标： 错误监控：实时捕获 JavaScript 错误、Promise 未捕获异常和资源加载失败等问题。 性能监控：跟踪页面加载时间、渲染指标（FCP、LCP、TTI、CLS 等）以及网络请求性能，帮助定位性能瓶颈。 用户体验监控：记录用户行为、交互路径和页面卡顿现象，分析真实用户在使用过程中的体验。 安全监控：检测前端异常行为、防止 XSS 攻击等安全隐患，保护用户数据和系统安全。 通过以上多维度的监控，可以及时发现和修复问题，提高用户满意度并减少运营风险。 监控指标数据错误日志收集1. 常见错误类型 运行时错误：利用 window.onerror 监听全局 JavaScript 错误。 Promise 错误：通过 window.onunhandledrejection...

一、虚拟机安装虚拟机选择仅用于使用 Windows 系统测试浏览器页面的兼容性，所有性能、功耗、资源占用等不需过多考虑。附 MacOS 虚拟机 App 对比：MacOS 下虚拟机选哪个？ 市面上常用虚拟机中，只有 Virtual Box 是长期免费的，果断选之。 相关链接官网：https://www.virtualbox.org/ App 下载：https://download.virtualbox.org/virtualbox/6.1.32/VirtualBox-6.1.32-149290-OSX.dmg 二、Windows 系统镜像下载镜像下载网站： https://msdn.itellyou.cn/ 建议选择 Win10 系统的镜像 镜像文件一般比较大，公司网络限速，下载可能会会较慢 三、虚拟机配置1.打开 Virtual Box，点击上方 新建 按钮，弹窗中再点击 专家模式； 2.填写名称（随便填），选择版本（Win10 64-bit），设置内存（建议 4096MB），点击 创建； 3.直接点击 创建...

在很多 Web 应用场景中，我们都需要实现截图功能，例如生成报告、保存页面状态、用户反馈或分享内容等。通常，市面上有 HTML2Canvas、dom-to-image 等工具，但如果我们希望不依赖这些第三方库，纯粹依靠浏览器原生 API 来实现截图的话该如何去实现呢？本文将介绍两种使用原生 API 实现前端网页截图的的方法，并给出关键代码的演示，最后再介绍两种开源的截图工具的使用。 使用 Canvas 绘制 Dom 元素核心原理基本思路是通过解析 DOM 树，并使用 Canvas 2D API 将每个 DOM 元素（包括其样式、文本和图片）逐个绘制到 canvas 上，最终生成一张完整的截图。 遍历 DOM 树：从目标元素开始递归遍历所有子元素。 获取计算样式：利用 window.getComputedStyle 获取每个元素的最终样式（背景、字体、边框等）。 定位绘制：根据元素的 getBoundingClientRect() 数据，计算相对于目标区域的位置。 使用 Canvas 绘制：调用 Canvas 2D API，将每个元素绘制到 canvas 上，再通过...