fans_x的博客

虚拟列表对于大部分一线开发同学来说是一点都不陌生的东西了，有的同学是直接使用第三方组件。但是面试时如果你简历上面写了虚拟列表，却给面试官说是通过三方组件实现的，此时空气可能都凝固了。有的特殊场景我们不能分页，只能渲染一个长列表。这个长列表中可能有几万条数据，如果全部渲染到页面上用户的设备差点可能就会直接卡死了，这时我们就需要虚拟列表来解决问题。一个常见的虚拟列表是下面这样的，如下图：其中实线框的item表示在视口区域内真实渲染DOM，虚线框的item表示并没有渲染的DOM。

很多同学将虚拟列表当做亮点写在简历上面，但是却不知道如何手写，那么这个就不是加分项而是减分项了。实际项目中更多的是不定高虚拟列表，这篇文章来教你不定高如何实现。不定高的意思很简单，就是不知道每一项item的具体高度，如下图：现在我们有个问题，在不定高的情况下我们就不能根据当前滚动条的scrollTop去计算可视区域里面实际渲染的第一个item的index位置，也就是start的值。没有start，那么就无法实现在滚动的时候只渲染可视区域的那几个item了。

浏览器中用于发起网络请求的 API 主要包括以下几种：XMLHttpRequest：这是一个老牌的 API，用于在浏览器和服务器之间发送 HTTP 请求。它支持异步请求，并可以通过设置回调函数来处理响应。尽管它已经被更现代的 API 取代，但在一些旧的浏览器或特定的场景中仍然有用。对于前端开发的我们来说，这个API再熟悉不过了，XHR 是最早接触到的网络请求 API，可以说是“老朋友”了。在很多老项目中，我们和后端沟通基本都用它。

下图是我实现的效果，分为三步：开始下拉时，屏幕顶部会出现加载动画；加载过程中，屏幕顶部高度保持不变；加载完成后，加载动画隐藏。如图所示，蓝色框代表视口，绿色框代表容器，橙色框代表加载动画。最开始时，加载动画处于视口外；开始下拉之后，容器向下移动，加载动画从上方进入视口；结束下拉后，容器又开始向上移动，加载动画也从上方退出视口。知道原理，我们现在开始写实现代码，首先是布局的代码：我们把 box 元素当作容器，把 loader-box，loader-box + loading 元素当作动画，至于 h1 元

萝卜青菜，各有所爱；正如我们对于手机的选择一样，每个人都有自己偏好的品牌和型号，而这些设备的屏幕大小也千差万别。面对如此多样化的终端环境，如果一个H5页面仅仅针对某一特定尺寸的手机进行设计，那么当其他用户尝试访问时，可能会遇到布局错乱、元素显示不全等问题，极大地影响了用户体验。在这样的背景下，如何设计出能够完美适配所有屏幕的H5页面，成为了开发者们亟需解决的重要课题。

我们在写倒计时的时候必须要考虑到两点：准确性、性能。接下来我们来一步一步实现一个准确的定时器。

事情起因是这样的，大家在刷抖音，小红书等短视频平台、发现他们的布局是这样的瀑布流布局。知道是瀑布流后，怎么做呢？我们第一反应是flex，grid？是的这是大部分人的固态思维我认为这极为麻烦，因为你甚至还需要用到大量的@meida，javascript来解决细节问题，代码极其冗杂。全文的大前提：不考虑图片顺序。但是砌体布局使用columns后仅仅一行代码就能完成上述的功能！！🤩，这你还不学起来？我查阅了许多博客，发现大多数对于使用column仅仅也就是介绍了多列布局，但是！！！！

虽然从技术上讲，直接在标签中加载图片和使用 new Image() 设置 src 都会触发相同的图片加载过程，但是 使用 new Image() 进行预加载 提供了更灵活的控制，使得你可以在页面渲染时避免图片加载阻塞，提升页面的加载速度和用户体验。

可以看到，带了scoped的style标签中的css，编译后会被加上一个属性选择器，名字以data-v开头，后面跟的是一个字符串，这个其实可以自己定义，只要保证全局唯一就行了，比如可以取当前文件的路径，然后用摘要函数md5或者sha256去生成一个哈希，取这个哈希值就行了。我之前不知道这个知识点的时候，被这个坑了一把，不知道为啥自己组件的样式被改了，当时找了半天才看到是父组件改的，所以我之后定义组件根节点的class名字的时候，尽量定义成一个独一无二的，免得无意中被父组件的同名类名的样式污染了。

性能优化，一个掣肘用户体验的关键模块。它没有固定的标准定义或唯一的解决方案。但是我们从整个项目的开发-部署-用户体验的整个过程中，总能摸到很多有普适性的规范或者优化理念。我们的目的是什么？优化啥？应当是：更快的加载和响应速度、更稳定的功能表现、更简洁的代码与架构设计、更好用更人性化。说人话是：性能优化应当是让用户能感觉到爽的，并且产生用户粘性的所有方式的总称好吧，也没有那么人话…那知道了我们性能优化的目的，我们要如何搞，才可以达到这个目的呢？针对网络层面的优化，针对渲染层面的优化。

Source Map 是一种用来“还原源码位置”的技术，它记录了打包或压缩后的代码与原始代码之间的映射关系，让你在浏览器调试时能看到你真正写的代码。它的核心是 mappings 字段，这一段内容通过 VLQ + Base64 编码，把每个压缩后代码的位置对应到源码中的行列、变量名等。浏览器通过读取 JS 文件中的注释 //# sourceMappingURL=xxx.map，去加载 .map 文件，并借此实现源码级调试、断点、错误定位等功能。

从外卖订单到医疗影像，从证券交易到电商浏览，分页数据的时空一致性是现代数字世界的基石。理解异步本质建立防御机制预判用户行为我们得以在充满不确定性的网络世界中，为用户构建确定性的交互体验。这不仅是技术挑战，更是对用户体验的终极尊重——当每个点击都能获得精准响应，便是数字文明最优雅的证明。

函数柯里化（Currying）是函数式编程中的一个重要概念，它将一个接受多个参数的函数转换成一系列接受单一参数的函数。在面试中面试官经常使用这个题目来考察面试者的函数式编程理解、代码抽象能力、闭包和作用域理解这几方面的能力。想要写好函数柯里化，那么我们需要知道什么是柯里化。柯里化是一种关于函数的高阶技术。它不仅用于 JS，还被用于其他编程语言。它是一种函数的转换–>将一个函数从可调用的 转换为可调用的。。下面来看一个例子：熟悉闭包的同学或许一眼就看出来，这里利用了闭包的特性来实现了一个基础的柯里化函数。

不管是在博客类、新闻类项目中都必定少不了时间的展示，例如：炉石新闻页、掘金用户主页的动态展示在对时间上要求比较高得情况下，我们自己写肯定就不太行了，毕竟自己手搓得话一方面是收益和成本不一致（手写计算有些时间考虑不了很全：闰年、二月、大小月…）、另外市面上都有很成熟的第三方库了，提供的方法还能覆盖更多的场景。干嘛不适用呢？接下来我就以dayjs这个库来完成一样的效果…这篇文章实现了一个较完善的时间展示功能，避免了手动处理日期复杂性带来的潜在问题。dayjs。

这两天遇到一个需求：在点击【设置优先级】的按钮后弹出关于玩法类型的table，点击【排序】按钮可以后可以进行排序。由于组内使用的组件库是element-ui，那我首先就想到了使用 el-table组件，但奈何其版本原因不能相应的拖拽排序的API。了解到有。接下来我就以Vue+el-table+sortable 为例看看我是怎么实现这个需求的。

如果有还有补充，欢迎大家补充。学完以上几种判断数据类型的方式，你就再也不怕被面试官因为这种题给挂掉啦！

业务需求背景：由于业务中涉及到有视频播放的内容，所以就使用了video标签去做，但是video标签在ios 设备和安卓设备中的默认行为不一致，故记录下解决方法（折中办法）。

前段时间老板心血来潮，要我们前端组对整个的项目都做一下接口防止重复请求的处理（似乎是有用户通过一些快速点击薅到了一些优惠券啥的）。。。听到这个需求，第一反应就是，防止薅羊毛最保险的方案不还是在服务端加限制吗？前端加限制能够拦截的毕竟有限。可老板就是执意要前端搞一下子，行吧，搞就搞吧，you happy jiu ok。

话不多说，咱们先来看看本篇文章中我们实现的效果。是不是发现这个效果非常的熟悉？没错，这经常能够在一些电商网站可以看到，那这究竟是怎么实现的呢？接下来由我来带领大家尝试做一个类似这样的效果出来。扫光样式可以通过线性渐变来创建，这种方法简单且效果良好。扫光动画的实现通常需要改变元素的位置或背景位置，这可以通过 CSS 的transform或属性来实现。对于文本元素，可以通过改变来实现扫光动画。但是，需要注意的是，如果背景尺寸等于容器尺寸，那么设置的百分比将无效。

Promise对于我们来说并不陌生，无论是在面试还是开发过程中，它都会频繁出现。虽然我们经常使用它，但如果能深入理解其底层原理，无疑能够提升我们的开发效率。因此，深入学习Promise是非常必要的。那么，接下来就让我们一起揭开Promise的神秘面纱，一起手写一个Pormise吧！完整代码前端-JavaScrip-Promise-手写Promise在开始之前，我们以常见的PromisePromise 解决了什么问题Promise 常用的 API 有哪些实现 Promise 某个方法。

打开控制台其实我们可以看到这里是在img这里主要使用了mask这个属性：在我们去掉这个mask属性以后，会发现轮播图会有一个白色的背景，这更加让我确定了这个mask属性就是实现这个样式的关键点。所以，接下来让我们来探究一下这个mask到底是何方神圣，居然能完成这样的样式。我们先来看看MDN对maskmask允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。这个解释肯定让小伙伴们糊里糊涂的，简单来说就是遮罩图片中不透明的部分会和原图片合在一起。拿上面天谕群星计划。

在开始正文之前我们先看看炉石传说的一个页面中的两个地方：加载更多按钮和tab切换。打开控制台，我们可以发现这两个地方都有一个相同的地方：都使用了这个属性。那这个属性有什么用那，接下来由我来向大伙详细介绍一下这个属性。看完前言的小伙伴是不想着这两个例子我使用backgrond就可以解决了，为啥还要这个属性？我刚开始接触的时候也是这样想的，但我在对一个项目进行换肤的时候就出现了一个问题：很多地方都是文字不用修改，但是边框要进行修改，导致我每个地方都需要重新进行切图，换皮😅😅😅另外，我们在使用的同时还可以使用。

时的颜色，后两个参数分别是 X、Y 轴的偏移量。这里的原理就是让原本的。这篇文章主要记录一下我在日常开发中使用到且可提高效率的CSS样式。偏移处用户视图区域(偏移值可以更改)，然后让新的图片偏移到原。来换色，而在日常开发过程中通常会遇到设计那边要求图片在。时换色，那么怎么利用 CSS 来完成这个效果呢。这样的图片却不可以通过。

批处理是指 React 为了更好的性能而将多个状态更新分组到一个重新渲染进程中。例如，如果你有两个state在同一个点击事件中需要更新，React 会将这两个state作为一次渲染。所以，这就是运行下面的代码后，明明在点击事件中更新了两个state为什么运行代码的时候只看见了一次渲染😮// 到这里还没重新渲染f);// 到这里还没重新渲染// React 只会在结束时才会执行渲染return (Demo：React17 中事件处理程序的批处理。

前两天为了应付学校课程大作业，老师要让我们在一个月的时间内写一个订单后台管理系统。不就是写一个全栈项目嘛，看我用 Vue+Nest 咔咔咔全搞定。由于之前有搞过还专门配置了一个全栈模板，这次也正好用上了。在我写完后端接口的时候(只是潦草的写了 50 个简单的接口)，我突然发现我还需要在前端再写一遍请求接口，也就是说我还需要重复 50 次 curd，再看看隔壁用 JavaWeb 都写完交给老师了我还在这里写接口，这效率太低效了呀。吐槽归吐槽，但是还是硬生生的写完了。😅😅😅。

一般情况下，我们使用这个 API 默认会获取到 PC 的默认设备(笔记本上的摄像头和麦克风)，但在用户有连接蓝牙、USB 摄像头的场景的时候(用户想要自己选择外接设备)就上升了一定的难度了。思路：1、获取当前设备所有摄像头和麦克风信息2、从获取到的媒体设备进行遍历筛选出需要的媒体设备3、将需要使用的媒体设备以某种参数的形式传递给浏览器 API4、浏览器 API 执行设备信息一般分成了三类：音频输入、视频输入、音频输出。

根据什么？你还不知道浏览器渲染流程？这篇文章可以知道，页面从浏览器解析到的起始标签开始渲染，如果我们将都放在了中，那么浏览器将会在页面渲染前将所有的JS下载、解析和解释完毕后才开始渲染页面，这么做就有一个问题是用户不能接受的：页面白屏。所以我们通常会将放在后面，这样可以使得在页面渲染完毕后执行JS，减少用户等待白屏的时间。是用于加载JS脚本的标签，通常用于引入JS文件。在项目庞大到一定程度时，我们通常会使用多个。

monorepo 搭建详细教程

其实原理很简单，由于页面渲染的顺序是从上往下的，所以加载顺序是 body(.page-lading)->div(#app)->div(#loading-screen .loading-screen)->script。由于主要内容(#app)的渲染顺序在最后(渲染的时候还需要一点时间)，并且加载页的样式也在这里已经引入了。不管是在页面跳转，还是页面加载时都少不了 loading page，如果说没有加载页，用户体验感会极度的不好。注意：加载页的样式和结果尽量精简，这样加载页的加载速度才会快。

nvm的下载以及详细配置和简单使用