- 博客(298)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 H5移动端 Vue3 + vue-virtual-scroller 实现长列表性能优化
移动端在渲染长列表时 大量dom节点的渲染和重绘重排会导致页面卡顿、滚动不流畅、设备耗电加快、影响移动设备电池寿命等性能问题;这里分享使用【虚拟滚动-渲染可视区域】方案进行长列表优化，以Vue3为例，使用 `vue-virtual-scroller`实现性能优化
2024-04-01 23:18:17
3613
原创 在 javasctipt 中，如何实现 $t(‘a.b.c‘) 转换为访问变量
【代码】在 javasctipt 中，如何实现 $t(‘a.b.c‘) 转换为访问变量。
2024-01-28 16:03:31
417
原创 动态页面调研及设计方案
预览：https://mrhj.gitee.io/form-generator/#/预览：https://jjxliu306.github.io/ng-form-element/dist/index.html文档：https://www.kancloud.cn/jjxliu306/ng-form/3191385https://vform666.com/预览：http://120.92.142.115/文档：https://www.yuque.com/visualdev/vform/预览：https://ww
2023-11-20 22:44:47
822
原创 前端面试考核点【更持续新中】
Script放在body中间会阻塞吗？defer与async的区别？10. 1. 常用 Composition API。DOM和CSSOM的构建会相互影响吗。解决【v-show 有时失效】问题。vue 父子组件的生命周期顺序。自定义组件的 v-model。服务端 express、koa。vue2响应式原理之依赖收集。Node.js 中间件机制。10. 3. 数据通讯方式。vue中的diff算法。nodejs 方面的研究。nodejs管理工具。
2023-11-20 16:32:58
382
转载 VsCode配置Eslint+Prettier结合使用详细配置步骤，规范化开发
vsCode配置Eslint + Prettier结合使用详细配置步骤，规范化开发
2023-08-20 15:20:54
15639
1
原创 Javascript 创建只读变量
只读属性是JavaScript中一个非常常用的特性，它可以用于保护对象的属性、设置默认值、以及优化代码性能等方面。通过合理地运用只读属性，我们可以使程序更加安全、稳定和高效
2023-06-26 19:58:12
634
转载 Electron官方实验工具Electron Fiddle
说明Electron Fiddle已将这三个面板的代码保存到你系统的缓存目录中了，你可以通过File菜单的Save As功能修改默认保存文件的目录。这三个文件就可以创建一个最简单的Electron应用程序，你可以在这三个面板中任意修改编辑这三个文件，编辑完成后，运行。处显示的文件为窗口界面文件，在此文件中通过require的方式引入了另一个文件renderer.js，此文件显示在。启动程序时，Electron Fiddle会帮你默认选择一个Electron的版本，如果你希望切换版本，可以点击。
2023-06-25 19:54:22
853
转载 每个前端工程师都应该了解的图片知识
本文详细的介绍了常见的图片格式：GIF、JPEG、PNG、WebP、APNG、SVG，介绍了他们是什么，有什么用，优点和缺点，以及使用场景。由于图片相关的知识确实太多了，我只是把一些我觉得必要的写出来，下面在网上找到了一个选择图片过程的表格和图，下次不知道选择什么图片格式，直接看图就行。
2023-06-10 18:25:43
344
转载 【Nodejs】事件循环机制
1. timer 阶段：处理 setTimeout、setInterval 的回调，由 poll 阶段控制2. I/O callbacks 阶段：处理系统级别的回调。eg: TCP 连接失败的回调…3. idle, prepare 阶段：仅 Node 内部使用，可以忽略4. poll 阶段：处理 I/O 操作的回调；5. 事件循环空闲时，会在此阶段暂停，以等待新的回调加入6. check 阶段：执行 setImmediate 的回调7. close callbacks 阶段：执行关闭请求的回调。
2023-06-09 10:15:29
1280
原创 React Fiber 使用 MessageChannel + requestAnimationFrame 模拟实现 requestIdleCallback
由于 requestIdleCallback 兼容性较差且不支持 Safari，React Fiber 需要实现一个 requestIdleCallback polyfill 做浏览器兼容；
2023-06-07 22:31:46
1294
1
原创 webpack 自定义loader
让我们实现一些简易的loader，从大量的简易loader的实现过程中学习编写如何 webpack loader
2023-05-23 00:47:22
892
1
转载 web监控数据上报方案
1.上报轻量级的数据时可以采取image src属性进行上报；2. 特定场景需要采集大量级的数据可以改用普通post请求方式；3. 在需要监测用户关闭浏览器时上报数据，首选采用beaconApi方式，若用户的当前浏览器不支持该方法，可降级为image方案。目前很多大厂已采用这种混合式埋点方案。
2023-05-13 16:54:27
625
转载 如何进行 web 性能监控？
我们可转化为三个方面来看：响应速度、页面稳定性、外部服务调用。响应速度：页面初始访问速度 + 交互响应速度；页面稳定性：页面出错率；外部服务调用：网络请求访问速度；
2023-05-13 16:23:40
2568
转载 前端异常监控解决方案研究
前端监控包括行为监控、异常监控、性能监控等，本文主要讨论异常监控。一般而言，一个监控系统，大致可以分为四个阶段：日志采集、日志存储、统计与分析、报告和警告。
2023-05-12 23:32:12
2169
转载 React Fiber 架构详解
1.Fiber出现的目的是什么；2. 在Fiber出现之前React存在什么问题；3. 虚拟 DOM 是如何被转换为真实 DOM 的？4. Fiber 如何解决性能问题；5. 什么是 Fiber？1. Fiber 是一个执行单元；2. Fiber 是一种数据结构；6. Fiber 的工作方式；7. 实现 Fiber；8. 构建 Fiber 链表；
2023-05-09 02:23:39
2502
转载 vue中的diff算法
diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。
2023-05-08 00:49:57
1821
转载 Web前端最新优化指标：FP、FCP、FMP、LCP、TTI、CLS、FID、FPS等
Web前端最新优化指标：FP、FCP、FMP、LCP、TTI、CLS、FID、FPS等；加载性能指标、可交互时间、稳定性指标、流畅性指标
2023-05-05 22:45:27
5275
转载 DOM和CSSOM的构建会相互影响吗
CSSOM会阻塞渲染，只有当CSSOM构建完毕后才会进入下一个阶段构建渲染树。通常情况下DOM和CSSOM是并行构建的，但是当浏览器遇到一个script标签时，DOM构建将暂停，直至脚本完成执行。但由于JavaScript可以修改CSSOM，所以需要等CSSOM构建完毕后再执行JS。
2023-05-04 10:00:29
660
转载 测量JavaScript函数的性能各种方式对比
测量执行一个函数所需的时间总是一个很好的办法，证明某些实现比另一个实现的性能更好。这也是一个很好的方法，可以确保性能没有在某些改变后受到影响，也可以追踪瓶颈。
2023-05-04 00:58:30
391
原创 JS 中的 performance，测量web应用性能
Web Performance API 允许网页访问某些函数来测量网页和 Web 应用程序的性能
2023-05-03 23:43:15
1673
转载 requestAnimationFrame，读懂这篇文章就够了
requestAnimationFrame 请求动画帧；它是一个浏览器的宏任务；requestAnimationFrame的用法与setTimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行
2023-05-03 13:27:21
2070
原创 React的diff算法
React的diff算法是一种快速而高效的算法，用于计算需要更新的组件节点。通过这个算法，React能够高效地计算出需要更新的节点，并最小化操作，提高更新的性能。同时，由于React能够快速找到需要更新的节点，因此也能够保证应用的性能和响应速度。
2023-04-26 16:04:57
294
转载 深入浅出 React：虚拟 DOM Diff 算法解析
DOM Diff 算法的两个假设：1. 两个相同组件产生类似的 DOM 结构，不同的组件产生不同的 DOM 结构；2. 对于同一层次的一组子节点，它们可以通过唯一的 id 进行区分。
2023-04-21 01:00:51
815
原创 package-cli-service，为构建发布npm包提供完整的工作流
【package-cli-service】为构建发布 npm 包的全流程提供了完整的工作流，。它是构建于rollup、 webpack之上的。它包含了：一个针对绝大部分应用优化过的内部的 rollup 配置；它提供了 serve-example、build-example、lint、fix、analyzer、build 、pub 、serve-storybook、build-storybook 等命令
2023-04-10 22:00:50
404
原创 create-package-tools，构建 npm 包，支持react、vue、js
create-package-tools 是创建 package 项目的cli，支持react、vue、js。它的 CLI 服务 package-cli-service 为构建发布 npm 包的全流程提供了完整的工作流
2023-04-10 21:47:19
142
转载 webpack-chain
webpack 的核心配置的创建和修改基于一个有潜在难于处理的 JavaScript 对象。虽然这对于配置单个项目来说还是 OK 的，但当你尝试跨项目共享这些对象并使其进行后续的修改就会变的混乱不堪，因为您需要深入了解底层对象的结构以进行这些更改。webpack-chain 尝试通过提供可链式或顺流式的 API 创建和修改webpack 配置。API的 Key 部分可以由用户指定的名称引用，这有助于 跨项目修改配置方式 的标准化。
2023-03-15 20:41:00
3510
转载 package.json 中的 browser、module、main 字段使用探索
main : 定义了 npm 包的入口文件，browser 环境和 node 环境均可使用；module : 定义 npm 包的 ESM 规范的入口文件，browser 环境和 node 环境均可使用；browser : 定义 npm 包在 browser 环境下的入口文件；
2023-03-13 21:18:42
3081
原创 在构造函数里定义 function 和使用 prototype.func 有什么区别？
this.func 与 Fn.prototype.func
2023-03-01 21:52:03
143
原创 软件版本控制规范
版本格式：主版本号.次版本号.修订号，版本号递增规则如下：· 主版本号：当你做了不兼容的 API 修改；· 次版本号：当你做了向下兼容的功能性新增；· 修订号：当你做了向下兼容的问题修正；先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸。
2023-02-08 11:05:52
3676
原创 webpack 编写插件
webpack 插件由以下组成：一个 JavaScript 命名函数或 JavaScript 类。在插件函数的 prototype 上定义一个 apply 方法。指定一个绑定到 webpack 自身的事件钩子。处理 webpack 内部实例的特定数据。功能完成后调用 webpack 提供的回调。
2023-02-01 21:21:36
727
react使用高德地图react-amap：Markers、Circle、ContextMenu、自定义ContextMenu
2021-09-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人