- 博客(17)
- 收藏
- 关注
RSS订阅原创 前端 JavaScript 实现反转链表
链表是一种常见的数据结构，由一系列节点组成，每个节点包含数据和指向下一个节点的指针。在前端开发中，链表的操作往往会在数据处理和算法实现中出现。下面一次探索如何在 JavaScript 中实现反转链表的功能，并深入分析其实现过程。
2024-10-30 09:15:00
163
原创 手写图片懒加载：提升前端性能的实用技巧
懒加载是一种设计模式，它可以延迟加载不在视口中的资源，减少初始加载时间和消耗的带宽。对于图片较多的页面，使用懒加载不仅能提高页面加载速度，还能减少服务器的压力和用户的流量消耗。懒加载的基本原理是，在用户浏览页面时，只有当图片即将出现在视口中时，才将其加载到页面上。懒加载是一种简单而有效的优化方式，可以显著提升页面性能和用户体验。通过手写懒加载，我们不仅提高了图片加载效率，还增强了对前端技术的理解和掌握。实施懒加载后，会发现页面加载速度显著提升，用户的浏览体验也更加流畅。
2024-10-28 16:00:10
297
原创 JavaScript 异步编程的优雅实现---手写 LazyMan
手写 LazyMan，不仅体验到了 JavaScript 异步编程的魅力，也学习了任务管理的基本思路。LazyMan 的设计使得异步操作变得更加直观，链式调用的语法也让代码更具可读性。这种模式可以扩展到更复杂的异步操作中，帮助开发减少回调地狱的困扰，也是面试的高频考题。
2024-09-29 17:05:57
424
1
原创 手写虚拟列表：提升前端性能的利器
虚拟列表是一种优化技术，通过只渲染可视区域内的元素，来减少 DOM 节点的数量，从而提升渲染性能。当用户滚动页面时，虚拟列表会动态加载和卸载元素。通过手写虚拟列表，我们可以有效地提升网页的性能，尤其是在处理大量数据时。这个简单的实现提供了一个基本框架，可以根据项目需求进一步扩展功能，比如支持动态加载、虚拟滚动等。
2024-09-29 16:55:42
438
原创 Rollup 如何搭建高效的公共组件库
Rollup 作为一个高效的 JavaScript 模块打包器，为构建组件库提供了极大的便利。本文将给大家详细介绍如何使用 Rollup 搭建一个公共组件库，包括从配置到优化的全过程。Rollup 是一个 JavaScript 模块打包工具，特别适用于构建库和组件。与 Webpack 等工具相比，Rollup 的核心优势在于其对 ES6 模块的支持，以及更小的输出文件体积和更快的构建速度。这使得 Rollup 成为构建组件库的理想选择。
2024-08-20 11:10:06
414
原创 深入理解Vue中的Diff算法及其应用
在Vue.js的前端开发中，Diff算法是一个关键的概念，它负责高效地比较虚拟DOM树的变化，并将这些变化应用到实际的DOM上，以实现响应式更新。今天带前端的小伙伴一起了解其应用和底层原理。
2024-08-06 13:57:45
518
原创 关于vue3在vue-router开发中的坑
当涉及到在Vue.js 3中使用Vue Router时，尽管它是一个强大的工具，但也存在一些容易陷入的坑。所以想和大家一起探讨一些在Vue 3和Vue Router开发中常见的问题和解决方法，帮助小伙伴们避免这些坑，提高开发效率和代码质量。
2024-07-25 15:43:31
430
1
原创 前端项目开发构建速度很慢？别急躁！
在日常的开发中，经常会遇到项目代码体积越来越大，在开发过程经常卡慢，这对于我们前端调试样式其实是很考验心态的，下面给大家分享一下如何给vue-cli项目提高开发过程的构建速度。
2024-05-29 17:46:25
622
原创 webpack/vue-cli中如何实现css的treeshaking
大家都知道在项目中有JS的treeshaking，那么CSS可不可以也实现treeshaking呢，当然可以，其实就是删除项目里面未使用的CSS内容，和JS的树摇类似，想象一下，对项目的生产构建优化是有多大的帮助哈。今天在项目优化的时候，发现网上大多数都是webpack项目去使用purgecss-webpack-plugin，下面我将总结一下webpack及vue-cli项目两种不同的配置方式！
2024-05-29 17:13:16
950
原创 项目中的HTML+CSS知识速览(必掌握)
尽可能简洁地总结在项目化开发中常用的html、css常见的知识点，掌握这些在项目中可以解决许多场景的开发，也避免了知识点零散碎片时导致的遗漏，无论是对入门还是面试复习都很有帮助
2024-04-19 18:48:12
1572
原创 详解ES6-ES11必掌握的新特性
/isConcatSpreadable对应concat，为false即连接后不展开:1，2，3，[4,5,6]import('./hello.js').then(module => { //动态引入，通过import（）函数，其返回的是一个promise。// chunwan('易烊千玺','王源','王俊凯')，arguments伪数组有三个元素。2.先在html页面中引入入口文件，
2024-04-17 17:01:03
1545
原创 乾坤微前端接入过程与注意点
微前端是一种前端架构模式，它将大型单体应用程序分解为小的、松散耦合的部分，每个部分都可以独立开发、测试和部署。子应用里需要配置一下server选项的origin选项，否则加载assets文件夹中的资源会默认寻找主应用下的assets文件夹。2. 子应用run的服务地址要和主应用中的 `entry` 选项要严格保持一致（注意端口号）作为子应用的挂载节点 也就是 `container` 容器要准备好，否则没有挂载的位置。1. 测试时需要保证子应用项目已经run了起来，因为主应用需要从子应用的服务拉取资源。
2024-04-17 16:52:45
880
原创 Vue源码解析：mustache模板引擎、数据响应式原理
Dep类(depend)：负责管理依赖，可以收集依赖、删除依赖、向依赖发送通知 (每个Observer的实例(__ob__)，成员中都有一个Dep的实例，即检测过的每一层属性都有dep依赖关系)observe方法:传入的可能是对象或者其它值，如果是对象，且没有__ob__属性(说明没有添加过监听)，则new Observer继续监测其下的属性。最后，让数组的原型指向arrayMthods，之后调用7个数组方法便会触发自定义的原型上的方法（在原数组和数组原型之间，多一层自定义的原型）
2024-04-12 09:41:40
648
原创 Vue3新的特性与知识点详解
const Child = defineAsyncComponent(()=>import('./components/Child')) //（动态）异步引入，会在页面加载完后再出现，比页面的同步加载晚。track() //通知Vue追踪value的变化，后面set里改变value和模版更新时，才会重新调get()，否则数据改变 视图仍不变（特殊）//toRefs将整个对象直接改造，只能改造对象的第一层，返回一个新对象，将其解构后页面能直接使用第一层，对象里的属性调用与修改都相当于操作person。
2024-04-12 09:38:22
430
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人