- 博客(923)
- 收藏
- 关注
RSS订阅转载 CSS下镜像翻转（水平/垂直翻转）
我们都只 CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。CSS 的 rotate() 函数定义了一种将元素围绕一个定点（由 transform-origin 属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转 180° 也被称为点反射。角度 angl...
2024-04-14 21:53:28
21
转载 baseline 文字的基线对齐
align-items 属性定义项目在交叉轴上如何对齐。.box { align-items: flex-start | flex-end | center | baseline | stretch;}1.flex-start：交叉轴的起点对齐。2.flex-end：交叉轴的终点对齐。3.center：交叉轴的中点对齐。4.baseline: 项目的第一行文字的基线对齐。5.stretch（...
2024-04-07 13:00:18
12
转载 多列布局每列宽度相等
两列布局可以使用以下方法：HTML：<div class="wrapper"> <div class="left-column">Left Content</div> <div class="right-column">Right Content</div></div>CSS：.wrapper { display...
2024-04-04 21:24:53
11
转载 快速上手 Cheerio
Cheerio是一个基于JQuery核心的高性能快速灵活的HTML抓取的实现方案。它使用了一个选择器类似于jQuery的硬而快的DOM实现，同时支持核心的DOM操作方式。Cheerio使用和jQuery相同的DOM操作 API。所以，如果你已经对jQuery非常熟悉了，学习学习Cheerio的语法就会变得十分容易。使用Cheerio可以方便地从HTML代码中提取出数据，并进行数据分析或清洗等操作。...
2024-03-31 21:01:59
26
转载 设置canvas分辨率
Window 接口的 devicePixelRatio 返回当前显示设备的物理像素分辨率与CSS 像素分辨率之比。此值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小。简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。当处理标准显示器与 HiDPI 或 Retina 显示器之间的差异时，这很有用，后者使用更多的屏幕像素绘制相同的对象，从而获得更清晰的图像...
2024-03-20 07:13:02
40
转载 object-fit CSS 属性
object-fit CSS 属性指定可替换元素（例如：<img>或<video>）的内容应该如何适应到其使用高度和宽度确定的框。<div class="box"> <img class="pic" src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria...
2024-03-19 09:29:41
22
转载 原生 JS 实现移动端 Picker 组件
Picker 是指提供多个选项集合供用户选择其中一项的控件。Picker 展示区域有限，部分选项会被隐藏，最好是当用户对所有选项都比较熟悉、有预期的时候，才使用 Picker。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name...
2024-03-18 08:02:31
71
转载 给你的H5页面加上惯性滚动吧！
在移动端，如果你使用过 overflow: scroll 生成一个滚动容器，会发现它的滚动是比较卡顿，呆滞的。为什么会出现这种情况呢？因为我们早已习惯了目前的主流操作系统和浏览器视窗的滚动体验，比如滚动到边缘会有回弹，手指停止滑动以后还会按惯性继续滚动一会，手指快速滑动时页面也会快速滚动。而这种原生滚动容器却没有，就会让人感到卡顿。首先，让我们来看一下它是怎样让滚动更流畅的吧。<html&g...
2024-03-17 10:22:51
14
转载 性能重要衡量指标-百分位数
在性能监控中什么是最好的度量—平均数还是百分位数?百分位数和平均值是用于描述数据集中趋势和分布的统计量，它们之间的主要区别在于：1.平均值（均值）：•平均值是数据集中所有数值的总和除以数据点的数量。•平均值对数据集中所有数据点进行了平均处理，反映了数据的集中趋势。•平均值容易受到极端值（异常值）的影响，因为它是所有数据点的总和除以数量。2.百分位数：•百分位数是将数据集按大小排序后，处于特定百分比...
2024-03-16 22:08:31
25
转载 纯 CSS 实现 picker 效果
CSS新增了一批能够控制滚动的属性，让滚动能够在仅仅通过CSS的控制下，得到许多原本需要JS脚本介入才能实现的美好交互。scroll-snap-typeCSS属性定义在滚动容器中的一个临时点（snappoint）如何被严格的执行。此属性不能用来指定任何精确的动画或者物理运动效果来执行临时点，而是交给用户代理来处理。正式语法none|[x|y|block|inlin...
2024-03-12 19:51:28
34
转载 Pointer events 指针事件
在JavaScript中，onpointermove是一个事件处理程序属性，用于处理指针移动事件。你可以将它与一个函数关联起来，以便在指针（通常是鼠标）移动时触发该函数。下面是一个简单的示例代码，演示如何在HTML中使用onpointermove：<!DOCTYPE html><html><head> <title>Pointer Mov...
2024-03-09 21:02:00
148
转载 如何计算CLS
如何计算CLS累积布局偏移 (CLS，Cumulative Layout Shift) 是测量视觉稳定性的一个以用户为中心的重要指标，因为该项指标有助于量化用户经历意外布局偏移的频率，较低的 CLS 给用户呈现的效果是交互流程自然、没有延迟和卡顿。指标说明CLS 测量整个页面生命周期内发生的所有意外布局偏移量中最大一连串的布局偏移分数。每当一个可见元素的位置从一个已渲染帧变更到下一个已渲染帧时，就...
2024-03-05 08:22:00
34
转载 JavaScript 中测量 LCP
Largest Contentful Paint (LCP) 是一种稳定的 Core Web Vitals 指标，用于衡量感知的加载速度。它用于标记网页加载时间轴中可能加载了网页主要内容的时间点。快速 LCP 有助于让用户确信相应网页有用。什么是 LCP？LCP 报告的是视口中可见最大图片或文本块的呈现时间（相对于用户首次导航到相应网页的时间）。良好的 LCP 得分是多少？为了提供良好的用户体验，...
2024-03-04 08:00:09
23
转载 优化 LCP
Largest Contentful Paint (LCP) 是三个核心网页指标指标之一。它表示网页主要内容的加载速度，具体而言，即从用户开始加载网页到最大的图片或文本块在视口中呈现之间的时间。为了提供良好的用户体验，网站在至少 75% 的网页访问中的 LCP 不得超过 2.5 秒。有很多因素会影响浏览器加载和呈现网页的速度，其中任何因素的延迟都会对 LCP 产生重大影响。很少通过快速修复网页的单...
2024-03-04 08:00:09
76
转载 通过PerformanceObserver来统计FP/FCP
PerformanceObserver是一个用于监控浏览器性能的接口，可以用来收集各种与性能相关的信息。通过PerformanceObserver，你可以订阅各种性能条目，比如资源加载、用户输入延迟等，并在这些性能条目发生变化时得到通知。下面是一个简单的示例，展示如何使用PerformanceObserver监控页面加载性能：// 创建一个 PerformanceObserver 实例c...
2024-03-03 08:00:10
32
转载 三个点的 loading 动画整理
这是我这几十年间从世界各地寻觅到的 Loading 特效，合计10个，而且是纯 CSS 制作的。你可以将这段代码复制粘贴到一个 HTML 文件中，然后在浏览器中打开，就可以看到这个简单的三个点 loading 动画效果。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /...
2024-03-03 08:00:10
143
1
转载 CSS 显示隐藏动画
就像这个动画一样的效果，div 先是隐藏的，点击按钮后显示并且有动画效果，隐藏的时候同样。<button class="btn" id="btn">点击</button> <div class="box" id="box"></div> <script> const btn = document.getElementB...
2024-03-02 10:43:29
160
转载 backdrop-filter 毛玻璃效果
iOS7 刚出来时候，出现了下图所示的毛玻璃效果。这种效果和我们平常的高斯模糊不同，不是当前元素模糊，是当前元素所在的背景后面的内容模糊。backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。backdrop-filter 和 filter 的语法类似，各个滤镜方法对应含义如下表：滤镜释义blur模糊brightness亮度contrast对比度d...
2024-02-24 22:30:18
32
转载 for await...of 循环
for...of循环用于遍历同步的 Iterator 接口。新引入的for await...of循环，则是用于遍历异步的 Iterator 接口。for await...of循环是 JavaScript 中用于迭代异步可迭代对象的一种语法。它通常与异步生成器函数一起使用，用于处理异步操作的结果。在处理异步操作时，for await...of循环可以按顺序处理每个异步操作的结果，而不需要手动管理...
2024-02-18 18:50:42
106
转载 事件委托和事件池
React 的合成事件是通过事件委托（event delegation）和事件池（event pooling）的机制来实现的。下面是合成事件的简单原理介绍：1、 事件委托：React 使用事件委托将事件处理函数附加到父元素上，而不是直接将事件处理函数附加到每个子元素上。这意味着只需要一个事件监听器来处理整个组件树中的所有事件。当事件发生时，事件会冒泡到父元素，然后由 React 在父元素上触发相应...
2024-01-28 12:13:17
58
转载 实现一个拼手气抢红包算法
实现一个拼手气抢红包的算法。function getRandomAmount(totalAmount, totalPeople) { // 随机生成一个指定范围内的金额 const min = 0.01; // 每个人至少能抢到 0.01 元 const max = totalAmount / totalPeople * 2; // 每个人最多能抢到总金额的两倍 const r...
2024-01-27 20:55:31
79
转载 setData 学问多
小程序为什么不能频繁 setData 先科普下 setData 做的事情：在数据传输时，逻辑层会执行一次 JSON.stringify 来去除掉 setData 数据中不可传输的部分，之后将数据发送给视图层。同时，逻辑层还会将 setData 所设置的数据字段与 data 合并，使开发者可以用 this.data 读取到变更后的数据。因此频繁调用，视图会一直更新，阻塞用户交互，引发性能问题。但频繁...
2024-01-19 17:17:58
68
转载 了解拨打虚拟号码
美团，饿了么，滴滴，货拉拉，运满满等O2O行业，使用虚拟号的根本原因两点，一是基于企业层面的通讯监管。二是保护客户隐私。这些企业的场景无论如何变幻，最终的服务模式，都是“员工”服务“客户”的形态，而且基本都需要通过电话联系来进行服务确认。在传统的通信过程中，为了实现电话沟通，需要把客户的真实号码告诉员工，员工才能拨打电话给客户。当员工体量太大，良莠不齐的时候，这一做法是有很高风险的。快递小哥打扰客...
2024-01-14 16:26:52
163
转载 toString返回的[native code]
在开发过程中，对于某些API在现有的JavaScript运行时环境不支持的时候，我们大都会采用加入polyfill来解决这个问题。但有些时候我们可能需要知道现在某个API到底是否为运行时环境所原生支持，还是polyfill代码支持的。今天在学习Vue 2.X版本的源代码时，就发现了Vue中也有用来检测一个函数是否为运行时原生支持。function isNative (Ctor) { retur...
2024-01-11 20:11:11
97
转载 网页如何打开APP应用
在网页中打开手机上已安装的原生移动应用（如 Android 或 iOS 应用），可以使用以下两种方法：1、使用应用链接（Deep Linking）：使用应用链接是一种通过 URL 方式在网页中打开手机上已安装的应用程序。你可以在网页中添加一个链接，当用户点击该链接时，会触发打开相应的应用程序。具体步骤如下：a. 首先，确定目标应用程序支持应用链接，并注册了自定义的 URL Scheme 或 Uni...
2024-01-10 18:39:03
491
转载 小程序合理使用 setData
setData 是小程序开发中使用最频繁、也是最容易引发性能问题的接口。setData 的流程setData 的过程，大致可以分成几个阶段：1.逻辑层虚拟 DOM 树的遍历和更新，触发组件生命周期和 observer 等；2.将 data 从逻辑层传输到视图层；3.视图层虚拟 DOM 树的更新、真实 DOM 元素的更新并触发页面渲染更新。数据通信对于第 2 步，由于小程序的逻辑层和视图层是两个独立...
2024-01-05 08:00:22
55
转载 Intersection Observer API
交叉观察器 API（Intersection Observer API）提供了一种异步检测目标元素与祖先元素或顶级文档的视口相交情况变化的方法。过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：1.在页面滚动时“懒加载”图像或其他内容。2.实现“无限滚动”网站，在滚动过程中加载和...
2024-01-04 19:01:08
54
转载 接口请求进度条
接口请求进度条可以通过以下几种方式实现：1、 XMLHttpRequest (XHR)：在使用原生的XMLHttpRequest对象发送请求时，可以通过监听progress事件来获取请求的进度信息。你可以使用XMLHttpRequest对象的onprogress事件处理程序来更新进度条的状态。通过获取已传输的数据量和总数据量，你可以计算出当前的进度百分比，并相应地更新进度条的显示。2、 Fetch...
2023-12-27 08:27:14
222
转载 快速上手 Popper.js
Popper.js是一个用于解决定位和交互问题的JavaScript库。它主要用于在网页中创建弹出窗口、下拉菜单、工具提示等元素，并确保它们正确地定位和与其他元素进行交互。Popper.js的主要功能包括：1、 弹出窗口定位：Popper.js可以帮助你将弹出窗口定位到目标元素的附近，例如在按钮旁边显示一个下拉菜单或工具提示。它使用计算和定位算法来确保弹出窗口在不同屏幕尺寸和滚动情况下都能正确地定...
2023-12-26 10:05:59
329
转载 轻松实现星级评分组件
实现星级评分的五种方式：1.使用图片2.使用背景图片3.使用 SVG 绘制形状4.使用 CSS 绘制形状5.使用 Unicode 符号先介绍一下 CSS 介绍如何实现一个五角星，我们可以给一个 div 元素先设置 100 宽高，然后通过 clip-path 把元素裁剪出五角星的形状。<div class="clip-star"></div>.clip-star { ...
2023-12-25 08:00:15
49
转载 在自己的网站中使用 Algolia
Algolia是一个提供搜索和实时数据查询的云服务平台。它提供了强大的搜索功能和开发工具，使开发者能够轻松地在自己的应用程序或网站中实现高性能的搜索体验。Algolia的主要特点包括：1、 快速：Algolia的搜索引擎被设计为高速的，能够在毫秒级别内返回搜索结果。它使用了先进的搜索算法和分布式架构，以提供快速的搜索响应时间。2、 实时性：Algolia的搜索引擎是实时更新的，可以在数据发生变化时...
2023-12-24 08:00:59
100
转载 实现 Popover 样式
Popover（气泡弹出框/弹出式气泡/气泡）是由一个矩形和三角箭头组成的弹出窗口，箭头指向的地方通常是导致Popover弹出的控件或区域。通过点击Popover内的按钮或非Popover的屏幕其他区域可关闭Popover。首先实现基本的HTML结构<body> <div class="box"> <div> he...
2023-12-23 11:56:26
80
转载 Template Literal Types
Template Literal Types 是 TypeScript 4.1 引入的一项功能，它允许你在类型系统中使用模板字符串来创建更灵活和动态的类型。下面是一些 Template Literal Types 的常见用法：1、 字符串模板类型插值（String Template Type Interpolation）：可以在类型中使用${}语法来插入变量或其他类型，并生成一个新的字符串类型...
2023-12-21 18:53:38
30
转载 实现自适应九宫格布局
如果你有一个列表，希望在页面上一行展示三个元素，可以使用 CSS 中的弹性布局（flexbox）来实现。HTML 结构：<div class="container"> <div class="list-item">Item 1</div> <div class="list-item">Item 2</div> <div ...
2023-12-19 09:36:07
51
转载 实现接口重试功能
使用fetch实现接口重试功能，可以结合 Promise 的重试机制来实现。下面是一个使用fetch实现接口重试的示例：function fetchWithRetry(url, options, maxRetry = 3, backoffDelay = 1000) { return new Promise((resolve, reject) => { let retryC...
2023-12-18 08:00:08
46
转载 顺序执行 Promise
如果你有一个包含多个 Promise 的数组 [promise1, promise2, promise3]，并且希望按照顺序执行这些 Promise，可以使用 Array.reduce() 方法来实现。下面是一个示例：const promises = [promise1, promise2, promise3];promises.reduce((previousPromise, curren...
2023-12-17 11:23:54
124
转载 css实现折叠展开动画
css实现折叠展开动画在 CSS 中实现折叠展开动画需要使用一些布局和过渡属性。<div class="accordion"> <div class="accordion-title">Hover me!</div> <div class="accordion-body"> <div> <p>Lor...
2023-12-07 13:03:07
323
转载 CSS 自定义高亮 API
CSS 自定义高亮 API 提供了一种方法，可以通过使用 JavaScript 创建范围并使用 CSS 定义样式来设置文档中任意文本范围的样式。概念与用法在网页上设置文本范围样式非常有用。例如，文本编辑类的 Web 应用程序会突出显示拼写或语法错误，代码编辑器会突出显示语法错误。CSS 自定义高亮 API 通过提供一种创建任意 Range 对象并设置其样式的方法（而不是局限于浏览器定义的范围），扩...
2023-12-06 08:00:55
93
转载 文本高亮
“高亮”功能，个人觉得没必要再解释什么了。作为一名程序猿，天天都会接触高亮：写代码时的语法高亮；使用搜索引擎时的搜索结果高亮。作为一名前端，如果你做过与搜索相关的功能，那么你很有可能就实现过高亮，本文也主要从前端的角度复盘一下“高亮”功能实现的关键知识点。在前端实现搜索并展示文字高亮的功能，可以通过以下步骤进行：1、 获取搜索关键词：首先，你需要获取用户输入的搜索关键词。这可以通过表单输入、输入框...
2023-12-05 08:01:20
57
转载 CSS 局限属性 contain
CSS 局限规范的目标在于通过允许浏览器从页面的其余部分中隔离出页面子树而改善性能。若浏览器知道页面的某一部分为独立的，则可优化渲染并改善性能。此外，此规范允许开发者标示元素究竟是否应当渲染其内容，以及在屏外时是否应当渲染其内容。由此允许用户代理在恰当的时候在元素上应用局限，并有望将布局和渲染推迟至需要时再进行。此规范定义了 CSS 属性 contain 和 content-visibility。...
2023-12-04 12:49:13
72
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人