- 博客(110)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 带你使用nvm管理node版本以及环境变量配置
有时候使用nvm管理node会发现无法使用node或npm，主要原因是环境变量没有配置成功，或者没有指向正确的位置环境变量中要配置NVM_HOME这个地址是nvm的安装目录NVM_SYMLINK这个是指向当前node版本的快捷方式以上两个配置系统变量和用户变量都要配置，系统变量是对所有用户起作用，用户变量只对当前用户起作用。PATH还有一个要设置的是PATH，PATH指的是可执行文件的搜索路径。 PATH环境变量中存放的值，就是一连串的路径。不同的路径之间，用英文的分号（;）分隔开。
2021-07-30 09:53:56
14994
7
原创 第七章：JavaScript性能优化实战
可以在代码中合适的位置插入获取内存信息的代码，比如在某个函数执行前后，对比内存使用量的变化。即使 outer 函数执行结束， data 在外部不再被使用，可因为 inner 函数的存在， data 不能被垃圾回收，造成内存泄漏。内存泄漏是指不再使用的内存没有被及时回收，导致内存占用不断增加。函数防抖：在事件触发后，等待一定时间，如果在这段时间内事件再次触发，则重新计时，直到等待时间结束后才执行函数。通过这些方法，可以有效避免闭包导致的内存泄漏，提升JavaScript代码的内存使用效率，进而优化整体性能。
2025-02-19 10:13:04
463
原创 第六章：CSS性能优化技巧之重排与重绘
例如，当你改变一个元素的 width 属性值，不仅该元素自身的宽度改变，其周围元素的布局也可能受到影响，浏览器需重新计算整个相关区域的布局，这就触发了重排。比如改变元素的 color 、 background - color 、 visibility 、 outline 等属性，这些变化不会改变元素在页面中的位置和大小，仅涉及元素的视觉呈现，所以只需要重新绘制该元素，而不需要重新计算布局，这就是重绘。当发生重排时，元素的几何属性改变，其外观也可能随之改变，所以在重排之后往往会进行重绘；
2025-02-19 10:02:45
507
原创 第五章：图片优化策略
例如，对于一张用于网页展示的图片，将分辨率从300dpi降低到72dpi，同时适当降低JPEG质量因子，可在不影响视觉效果的情况下减小文件体积。比如电商网站商品展示图，只保留商品主体部分，裁剪掉多余的背景，既突出了商品，又降低了图片文件大小。当图片即将进入浏览器视口时，才会触发加载，避免页面初始加载时大量图片同时请求，减少资源竞争，加快关键内容的呈现速度。这样，大屏幕设备会加载大尺寸图片以保证清晰度，小屏幕设备则加载小尺寸图片，避免加载不必要的大文件，节省带宽，提升加载速度。5.3 图片裁剪与尺寸适配。
2025-02-19 09:42:05
316
原创 第四章：网络请求优化基础
明确页面的关键资源并优先加载，能确保用户尽早看到关键内容。错误示范：如果直接使用未经压缩的高清图片，比如一张用于普通网页展示的风景图片，原始文件大小为2MB，在网页加载时，这个大文件会占用大量的网络带宽，导致页面加载缓慢，特别是在移动网络环境下，加载时间可能会非常长，甚至可能导致用户因为等待时间过长而离开页面。在一个包含大量图片的页面中，这种方式会导致页面初始加载时请求过多，资源竞争激烈，关键内容的加载被延迟，用户需要等待较长时间才能看到页面的主要内容，尤其是在网络较差的情况下，页面加载会变得异常缓慢。
2025-02-19 09:39:35
503
原创 第三章：前端技术栈与性能关联
比如使用Webpack等打包工具，用户在访问页面时，只加载当前所需的模块，如只需要商品展示功能时，就只加载 product.js 模块，后续根据用户操作再加载其他模块，有效降低了首次加载时间，提升了应用的响应速度。错误示例：如果把非关键CSS放在关键CSS之前，或者不使用媒体查询等优化方式，让所有CSS都按顺序依次加载，可能导致页面长时间白屏，或先显示无样式内容再闪烁切换为有样式状态，影响用户体验。比如一个搜索框输入事件，当用户快速输入时，若不进行处理，会频繁触发搜索请求，消耗资源。
2025-02-19 09:07:05
969
原创 第一章：前端性能的定义与指标
在FCP前，用户看到空白页面或加载指示器，FCP越短，用户越快感知页面加载并获取信息，减少等待焦虑。比如，一个简单的博客页面，若优化得当，FCP可能在1秒内完成，用户能迅速看到文章标题和部分内容，提升阅读体验；TTI反映页面可用性，时间短，用户能快速操作，提高效率；它能评估页面核心内容加载速度，用户通常先关注大视觉区域元素，LCP过长，关键内容加载慢，影响用户印象和体验。以电商商品详情页为例，若商品主图作为最大内容元素，因图片过大或加载策略不当，LCP时间延迟，用户无法快速看到商品全貌，可能降低购买意愿。
2025-02-19 08:54:04
957
原创 threejs之贴图原理
对于index的设置如果你按照逆时针的顺序定义顶点索引，渲染引擎会认为这是一个正面的三角形，会正确计算法线和光照效果。如果你按照顺时针的顺序定义顶点索引，渲染引擎会认为这是一个背面的三角形，可能会导致不正确的光照效果。uv的取值范围是从0到1的，uv的设置和position的设置顺序有关。在上述例子中position的设置是逆时针设置的，所以uv的设置也要逆时针设置才能正确取样。，如果我们设置index的值为一半顺时针，一半逆时针那么就会出现正面有一半反面有一半，我们始终只能看到一半。z轴朝向我们是正面。
2024-03-19 20:03:28
577
原创 WebGL之灯光使用解析
在使用灯光之前，首先我们需要了解，与定义更广泛的 OpenGL 不同，WebGL 并没有继承 OpenGL 中灯光的支持。所以你只能由自己完全得控制灯光。幸运得是，这也并不是很难，本文接下来就会介绍完成灯光的基础。
2024-03-07 17:00:35
1030
原创 WebGL之创建 3D 对象
首先，更新函数中代码来创建立方体的顶点位置缓存区。现在的代码看起来和渲染正方形时的代码很相似，只是比之前的代码更长因为现在有了 24 个顶点（每个面使用 4 个顶点）。在“init-buffers.js”文件由于我们给顶点添加了 Z 分量，因此我们需要将属性的更新为 3。然后我们还要为每个顶点定义颜色。下面的代码首先为每个面定义颜色，然后用一个循环语句为每个顶点定义颜色信息。在“init-buffers.js”文件函数中，用下面代码替换colors++j) {
2024-03-07 14:48:02
1117
原创 WebGL之使用着色器将颜色应用于 WebGL
在之前的展示中我们已经创建好了一个正方形，接下来我们要做的就是给它添加一抹色彩。添加颜色可以通过修改着色器来实现。
2024-03-07 11:44:30
1554
原创 WebGL 之创建 2D 内容
它的职责是确定像素的颜色，通过指定应用到像素的纹理元素（也就是图形纹理中的像素），获取纹理元素的颜色，然后将适当的光照应用于颜色。在观察者视图空间中，观察者（通常是摄像机）位于坐标系的原点，观察方向是坐标系的负Z轴方向，摄像机的朝向和位置决定了观察者视图空间的坐标系。：在顶点着色器中，顶点数据经过模型变换、视图变换和投影变换后，得到的坐标被称为裁剪空间坐标。这个范围内的坐标表示的是相对于视锥体（View Frustum）的位置，超出这个范围的坐标将被裁剪掉，不会显示在最终的图像中。
2024-03-07 10:24:21
931
原创 threejs之使用shader实现雷达扫描
总结，这段代码通过动态旋转的方式，结合时间变化，创建了一个中心透明度变化的圆形效果，其中圆形的颜色和旋转速度可以通过调整。在图形和游戏开发中，这种类型的矩阵变换非常有用，尤其是在处理物体的旋转和定位时。通过这个矩阵，可以对二维空间中的点或向量进行旋转，使其绕原点旋转。函数来旋转一个二维向量。这行代码使用了自定义的。，并且旋转的角度随时间。
2024-02-16 15:30:34
1269
原创 threejs之使用顶点着色器和片着色器生成飞线原理分析
如果点的大小小于等于0，则直接将颜色设置为固定值，否则根据点的颜色和距离中心的距离计算点的颜色强度。：当后面的不可见的时候vSize会小于0，此时让它加上最初的值，变成最开始的长度，让不可见的重新可见。这段代码是一个顶点着色器程序，它对顶点进行处理，主要包括对顶点位置的变换和点的大小调整。根据顶点的深度进行调整，确保点在屏幕上的大小与其在视觉上的大小相符合。此时把为小于0的部分加上总size的长度，使得小于0的时候变为时间为0的长度。：这是一个变量，从顶点着色器传递过来的，用于表示点的大小。
2024-02-16 11:54:17
1213
原创 threejs之常用贴图
在三维图形和游戏开发中，高光贴图、凹凸贴图、法线贴图和环境光遮蔽贴图是常用的技术，用于增加虚拟物体表面的细节和真实感，而无需增加更多的几何体。这些技术可以帮助开发者和艺术家创造出既详细又性能高效的场景。
2024-02-02 17:22:24
1142
原创 threejs之updateWorldMatrix的实现原理
首先我们需要定义几个额外的概念，包括表示位置、旋转、和缩放的类，以及一个用于表示4x4矩阵并执行矩阵运算的类。这个函数的目的是更新一个物体在世界空间中的位置，考虑到它的局部变换（位置、旋转、缩放）以及它的父对象的世界矩阵（如果有的话）。方法如何根据对象的局部变换（位置、旋转、缩放）以及父对象的世界矩阵来更新对象的世界矩阵。这个方法首先更新自身的局部矩阵，然后如果有父对象，它会和父对象相乘。首先，让我们定义一些基础的数学工具类，包括。这个实现提供了一个基础框架，从中可以看出。（用于表示旋转）, 和。
2024-02-02 10:49:46
1393
原创 nestjs之适配器模式的应用
NestJS 是一个用于构建高效、可靠和可扩展的服务器端应用程序的框架。在 NestJS 中，适配器模式（Adapter Pattern）主要体现在其对不同类型的 HTTP 服务端框架的适配上。NestJS 本身是建立在 Express 或者 Fastify 这样的底层 HTTP 框架之上的，但它提供了一个抽象层，使得开发者可以不必关心底层框架的具体实现。适配器模式是一种结构型设计模式，它允许对象以兼容的方式协同工作，即便它们的接口不兼容。
2024-01-24 11:57:57
734
原创 nestjs之策略模式的应用
首先，我们定义一个角色枚举（Enum）。假设我们需要实现两种日志策略：一种是简单地将日志输出到控制台，另一种是将日志记录到文件中。首先，我们定义一个日志接口（LoggerService），它描述了日志服务应该实现的方法。假设我们的应用需要特定的处理方式来处理数据库异常和 HTTP 异常。首先，我们创建两个异常过滤器，一个用于处理数据库异常，另一个用于处理 HTTP 异常。// 处理数据库异常的逻辑。
2024-01-24 10:02:10
1345
原创 nestjs之常用装饰器以及原理解析
你可以创建自定义守卫来处理特定的认证和授权逻辑。自定义守卫需要实现// 你的认证和授权逻辑// 如果认证通过，则返回 true。
2024-01-23 11:31:36
1535
原创 nestjs之pipe是如何从dto校验的？
NestJS允许你自定义的行为，例如自定义错误响应或启用更复杂的验证规则。你可以通过传递选项到的构造函数来实现这些自定义行为。通过这种方式，NestJS中的Pipes提供了一种强大且灵活的方法来确保控制器接收到有效且正确类型的数据。
2024-01-19 09:30:09
548
原创 nestjs之TypeOrm异步配置实现原理
return {// 更多数据库配置...在这个例子中，是一个典型的服务，提供数据库配置。是一个字符串令牌，用于在 DI 系统中代表某个值或服务。通过这种方式，你可以在 NestJS 的useFactory函数中注入由字符串令牌标识的对象或值。inject数组中的每个令牌对应useFactory函数参数中的一个值，这些值按照inject中的顺序被注入。这个机制允许在 NestJS 应用中进行灵活且强大的依赖注入和服务配置。
2024-01-18 14:42:00
537
原创 nestjs之provider的provide取值的几种方式
以下是根据上述每种provide取值方式的例子，展示在 NestJS 中如何定义和使用自定义 providers。
2024-01-18 13:49:06
488
原创 nestjs之JWT认证实现流程
nestjs的jwt认证利用了 Passport.js 的认证机制。要根据这个源码实现您自己的 AuthGuard，需要理解几个关键部分：如何集成 Passport.js、如何处理认证结果，以及如何使用 NestJS 的依赖注入系统。的获取方式等，以及提供验证函数供用户给出返回值。方法没有返回值或者抛出异常那么就会判断为失败。那么有了注入，那么就有提供注入的地方，这里只有。和传入一些初始化参数，比如密钥，函数，该函数会调用我们定义好的。返回一个函数，该函数返回一个。解析header中的。
2024-01-17 12:07:00
709
原创 nestjs教程之@Controller()实现原理
Controller实现原理的简单实现，在真实的应用中，路由处理会更加复杂，包括错误处理、中间件支持、参数解析等。
2024-01-14 11:04:59
516
原创 nestjs教程之@Injectable()的实现原理
这个示例展示了一个基本的依赖注入容器，它能够处理构造函数的自动依赖注入。实际上，真实的框架NestJS会有更复杂的实现，包括处理循环依赖、生命周期管理、作用域和模块系统等。这个容器的实现假设所有的依赖都是通过其构造函数注入的，并且所有的服务都是单例的。以下是对@Injectable()的简单实现。
2024-01-14 10:09:40
1082
原创 2023前端开发面经大合集
CommonJS适用于服务器端和应用程序，支持同步加载，但是在模块互依赖方面可能会有些复杂。ES Module是现代 JavaScript 开发的标准，支持异步加载，更适合前端开发和模块间的静态分析。Vue 3 带来了显著的性能提升、更灵活的代码组织方式（通过组合式 API）、更好的 TypeScript 支持和全新的内部实现。这些改进使 Vue 3 成为构建现代 Web 应用的更强大、更高效的工具。
2023-12-29 18:05:28
1051
原创 关于js类的继承的几种方式以及优缺点
是重要的一步，因为它确保了继承过程中保持了构造函数（constructor）的正确指向。这个步骤对于理解和维护对象的原型链是非常关键的。例子：如果父类有一个数组属性，所有子类实例都会共享这个数组，一个实例对数组的修改会反映在所有实例上。父类方法可以被多个子类实例共享，节省内存。在这个例子中，我们首先创建了一个新的对象，它的原型是。创建一个新对象时，这个新对象的原型是。这意味着新对象（即子类的原型对象）的。这在逻辑上是不正确的，因为我们希望。，以反映实际的继承关系。例子：每个子类实例都会创建自己的。
2023-12-29 17:59:52
1053
原创 关于前端5种常见设计模式
需要创建的对象较少：当需要创建的对象种类较少且相对稳定时，可以使用简单工厂模式。客户端不关心对象的具体实现：客户端只需要使用对象的共同接口，对于具体实现不关心时，可以使用简单工厂模式。总之，简单工厂模式是一种简单实用的创建型设计模式，适用于创建对象较少且相对稳定的情况。但需要注意，它可能违反开闭原则，并且随着产品种类的增多，工厂类的职责会变得过重。在设计时，应根据具体需求和情况来选择合适的设计模式。
2023-11-01 10:44:42
224
原创 stylelint执行插件的全过程
stylelint会获取所有的需要lint的文件路径根据路径的文件类型生成配置使用node读取文件内容并调用配置的syntax解析文件调用插件执行已解析的文件内容拼接已处理的文件为完整字符串重新写入文件覆盖原内容。
2023-03-03 11:19:09
695
原创 一步步带你看看webpack的HMR实现原理
可以看出返回的文件是一个webpackHotUpdate函数，该函数是全局的。所以要在window上挂载该函数。根据hash值获取要更新的json文件该文件中包含了下一个文件更新的hash值和更新范围。通过监听done钩子事件，获取stats，stats中包括当前的hash值。通过拦截客户端的请求从内存中获取相对应的资源。用动态script的方式将要更新的文件拉取。首先监听服务端的发送hash事件。
2023-02-21 21:05:07
283
原创 vite和esbuild/roolup的优缺点
虽然 esbuild 快得惊人，并且已经是一个在构建库方面比较出色的工具，但一些针对构建应用的重要功能仍然还在持续开发中 —— 特别是。由于生产环境的打包，使用的是 Rollup，Vite 需要保证，同一套 Vite 配置文件和源码，在开发环境和生产环境下的表现是一致的。想要达到这个效果，只能是 Vite 在开发环境模拟 Rollup 的行为 ，在生产环境打包时，将这部分替换成 Rollup 打包。尽管如此，当未来这些功能稳定后，我们也不排除使用 esbuild 作为生产构建器的可能。
2023-02-19 19:39:30
1516
原创 关于如何调试vue3源码
把选中的代码去vue源码中的rollup.config.js文件中。workspaceFolder是项目根目录。attach是连接上已有的端口9222。此时已经成功映射上了。
2023-02-12 15:29:25
355
js实现virtual-dom.zip
2020-08-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人