虚拟列表 or 时间分片
最近在做一个官网，原本接口做的都是分页的，但是客户提出不要分页，之前看过虚拟列表这个东西，所以进行一下了解。 为啥要用虚拟列表呢！ 在日常工作中，所要渲染的也不单单只是一个li那么简单，会有很多嵌套在里面。但数据量过多，同时渲染式，会在 渲染样式 跟 布局计算上花费太多时间，体验感不好，那你说要不要优化嘛，不是你被优化就是你优化它。 进入正题，啥是虚拟列表？ 可以这么理解，根据你视图能显示多少就先渲染多少，对看不到的地方采取不渲染或者部...
音频可视化-简单实现
离职的第一天，刷到了一个音频可视化的帖子，简单的学习了一下来跟大家分享一下我的学习成果。第一次写帖子大家望大家多指点 理解 首先音频处理需要跟多环节例如修音、混响等，每一个环节就是一个节点，每一个环节都有一个音频的源节点，例如下图的首先获取一个音频源节点，第一个环节去处理他的音色，在下一步在新引入一个音频源节点例如鼓点，节拍之类的在第二个环节添加进去最后通过输出设备播放出来就此完成了整个流程，节点的数量是可以任意数量的。 音频上下文就是...
js闭包的6种应用场景！！！这下会用了
闭包的基本定义 如果一个函数访问了此函数的父级及父级以上的作用域变量，那么这个函数就是一个闭包 。闭包会创建一个包含外部函数作用域变量的环境，并将其保存在内存中，这意味着，即使外部函数已经执行完毕，闭包仍然可以访问和使用外部函数的变量。 闭包的优缺点及特性 闭包的优点 ： 1. 保护变量 ：闭包可以将变量封装在函数内部，避免全局污染，保护变量不被外部访问和修改。 2. 延长变量生命周期 ：闭包使得函数内部的变量在函数执行完后仍然存在，可...
webstorm debugger断点调试React前端项目教程
在日常开发 React 前端项目时，如果想调试前端 js 代码，我们一般都会在代码中插入 语句，通过在 Chrome 输出日志的方式进行查看。或者在 Chrome 的 source 中查找到目标代码片段，进行打点调试。这样调试的方式效率都比较低下，如果能在我们的本地 IDE 中进行断点调试前端代码，那么效率将会显著提高。 我们先看一下最终的调试效果： Webtsrom 中的断点及 debug 情况 Chrome 中实时运行情况 操作步骤...
从零开发前端 CLI 脚手架
前言 在现代前端开发中，CLI（Command Line Interface）脚手架已经成为提高开发效率、规范团队协作的重要工具之一。本文将介绍如何从零开始开发一个前端 CLI 脚手架，使其能够通过命令行交互生成不同技术栈的模板代码，并预装常用的工具如 ESLint、Husky、Prettier 等，从而为项目的开发提供一致性和高质量的基础。 项目结构 首先，我们需要确定脚手架的项目结构。一个典型的结构可以包括以下目录和文件： 核心功能...
20分钟掌握 Vite 插件开发
以往，面试官：“你自己开发过 Webpack 的插件吗？” 现在，面试官：“你自己开发过 Vite 的插件吗？” 如果你还在纠结 Webpack 的插件该开发姿势的话，点我这篇文章 。 写 Vue 的朋友肯定最爱 Vite，当然写 React 的朋友肯定也爱，反正我爱，毕竟谁不希望自己快一点呢 \ < 关于 Vite 你肯定需要知道的两点就是， 1. Vite 的原理是什么，为什么它这么快？ 2. Vite 的插件是如何开发出来的，原理...
浏览器输入url会发生什么 - 巨详细完整版
当我们向浏览器的地址栏输入URL的时候，网络会进行一系列的操作，最终获取到我们所需要的文件，如何交给浏览器进行渲染 我们所关注的问题也就是： 如何获取到我们所需要的文件 浏览器是如何渲染的 大致的执行顺序 URL解析 DNS 解析：缓存判断 + 查询IP地址 TCP 连接：TCP 三次握手 SSL/TLS四次握手（只有https才有这一步） 浏览器发送请求 服务器响应请求并返回数据 浏览器解析渲染页面 断开连接：TCP 四次挥手 URL...
JavaScript完整原型链图解_js 原型链的关系图
了解完整 对我们有什么帮助? 没什么帮助，装逼意义大于实用（doge） 好的吧，可能是我还是新手，没碰上这方面的需求 完整原型链图示 上图里，我们常用的部分是右下至右上的链，即从构造函数到构造函数原型对象再到 的部分。 而实际上，我们常见的 和 也参与了原型访问链。 在这个图中，不管将哪个块当作实例对象，总有一个构造函数和一个原型对象和它组成三角关系。 只有一个块例外，那就是 。若 ，则原型链访问将一直访问 没有尽头，故底层规定 ，使原...
图解原型&原型链 - 掘金
原型链图 图中Parent是构造函数，p1是通过Parent实例化出来的一个对象。 如果你看到这张图一脸懵，不要怕，往下看，下面会一步一步教你认识原型&原型链 前置知识 js的初学者一般很难理解原型和原型链的概念，但原型和原型链又是js中最重要的点之一。从jQuery到现在最火的框架之一Vue，原型的应用无处不在，那我们该怎么学好JavaScript的原型和原型链呢？ 想要弄清楚原型和原型链，这几个属性必须要搞清楚， 、 、 。 其次你...