WebGL 基础入门篇
本篇文章侧重 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...
前端可视化技术 Canvas vs SVG
Canvas 与 SVG 是前端可视化的两大核心技术，各有优劣。本文从技术原理出发，系统对比两者的差异，并分析为什么主流可视化库（如 ECharts、D3.js、Three.js）更倾向于选择 Canvas，帮助你在技术选型时做出明智决策。 一、技术原理与渲染方式Canvas：位图渲染 原理：基于像素的位图渲染，通过 JavaScript API 在 2D 上下文上绘制图形。 渲染流程：CPU 计算 → GPU 光栅化 → 像素填充 → 屏幕显示。 特点：一次性绘制，绘制完成后图形失去”对象”属性，无法单独操作。 12345678910111213// Canvas 绘制示例const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');// 绘制矩形ctx.fillStyle = '#ff6b6b';ctx.fillRect(10, 10, 100, 50);//...
前端如何进行权限设计
权限设计不是单点技巧，而是一套“模型 → 同步 → 前端落点 → 后端兜底”的体系。本文结合实际项目，总结四种常见前端落点：路由守卫、按钮/组件权限、动态路由、接口权限控制，并给出各自优劣与实现要点。 一、先立模型：资源、动作与主体 主体（Subject）：用户、角色、组织、租户等。 资源（Resource）：页面、菜单、按钮、接口、文件等。 动作（Action）：view/create/update/delete/export… 常见模型： RBAC：角色-权限映射，简单高效；粒度通常到菜单/按钮/接口。 ABAC：基于属性的策略更灵活（时间段、地理、部门级别等），实现与维护更复杂。 建议以 RBAC 起步，保留扩展位点（在权限项中附带资源/动作/条件）。前端仅做“展示与导航层过滤”，真正的安全必须后端校验。 二、路由权限控制（Route Guard）—...
基于 Rust 的代码 Lint 方案 - Oxlint
一、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...
从React层面能做的性能优化有哪些?
React 性能优化是一个系统工程，涉及组件渲染、状态管理、事件处理、代码分割等多个层面。本文从实际项目经验出发，系统梳理 React 层面的性能优化手段，并提供可直接复用的代码示例和最佳实践。 一、组件渲染优化1. React.memo - 避免不必要的重渲染React.memo 是一个高阶组件，用于缓存组件的渲染结果，只有当 props 发生变化时才重新渲染。 12345678910111213141516171819202122232425import React from 'react';// 基础用法const ExpensiveComponent = React.memo(({ data, onUpdate }) => { console.log('ExpensiveComponent rendered'); return ( <div> {data.map(item => ( <div...
JS超过Number最大值的数怎么处理?
在 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); //...
前端页面性能优化应该从哪些方向来思考?
页面性能优化不是简单的“压缩一下资源”，而是一套从度量→定位→治理→验收的体系化问题。本文结合实际落地经验，从度量指标、资源体积、网络请求、渲染路径、用户感知与工程化保障几个维度，梳理一条可执行的优化路径。 一、先谈“怎么量”——关键指标 Core Web Vitals： LCP（Largest Contentful Paint）：最大内容绘制时间，衡量首屏主要内容何时可见。 INP（Interaction to Next Paint）：交互到下一帧的时延，替代 FID 评估交互响应性。 CLS（Cumulative Layout Shift）：累积布局偏移，衡量页面稳定性。 其他常用指标：TTFB、FCP、TTI、TBT、FP/FMP、JS long task 数量等。 建议：本地用 Lighthouse 建基线，线上用 RUM（真实用户监控）采样埋点，按设备/网络分层观察。 二、资源体积优化（越少越好）1. JavaScript：减少、拆分、可缓存 Tree Shaking / Dead Code Elimination：确保使用...
何为 babel-runtime?
在现代 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...
如何避免使用Context时引起整个挂载树重新渲染？
在 React 开发中，Context 是一种便捷的状态共享方案，能够在组件树中传递数据而不必逐层传递 props。但同时，Context 更新时会触发所有消费该 Context 的组件重新渲染，这在大型应用中可能带来性能问题。本文将探讨如何避免 Context 更新时引起整个挂载节点树的重新渲染，介绍一些优化策略和代码示例。 理解 Context 更新导致的重新渲染React Context 更新时，所有使用 useContext 或 Consumer 的组件都会重新渲染。这是因为 React 需要确保每个消费者组件都能获取到最新的 Context 值。即使消费者组件自身没有变化，只要 Context 的 value 发生变化，它们就会触发重新渲染。 优化策略1. 使用 useMemo 缓存 Provider value确保传递给 Provider 的 value 在不必要更新时保持不变。避免在 Provider 内部直接创建对象或函数，每次渲染都会生成新的引用，从而引发子树重新渲染。 示例代码： 123456789101112131415161718import...
