合集-前端小知识点
摘要：用户代理（User - Agent）检测 原理：用户代理是浏览器等客户端发送给服务器的一个字符串，它包含了客户端的软件信息，包括设备类型、浏览器类型等。通过在服务器端或者前端JavaScript代码中检测用户代理字符串，可以判断请求是来自PC还是手机。 示例（前端JavaScript）： 在Java
阅读全文
摘要：性能优化方面 页面加载速度 优化代码结构：精简HTML、CSS和JavaScript代码。例如，去除冗余的标签和样式，压缩代码以减少文件大小。可以使用工具如HTMLMinifier（用于HTML压缩）、CSSNano（用于CSS压缩）和UglifyJS（用于JavaScript压缩）。这样在用户访问
阅读全文
摘要：前端优化策略 缓存数据 浏览器缓存：合理利用浏览器缓存机制，通过设置正确的缓存头来减少不必要的接口请求。例如，对于那些不经常变化的数据（如网站的logo、样式文件等），可以设置较长时间的缓存。可以在服务器端返回数据时，在响应头中设置Cache - Control和Expires字段。如Cache -
阅读全文
摘要：以下是一套可以用于全站请求耗时统计工具的设计方案，涵盖了从前端到后端的相关环节： 一、整体架构 该统计工具主要分为前端数据采集模块、数据传输模块以及后端数据处理与分析模块，整体架构如下： 前端数据采集模块 负责在用户端（浏览器）收集各个请求的相关信息，包括请求发起时间、请求完成时间、请求的URL、请
阅读全文
摘要：传统表单提交方式 原理：利用HTML的<form>标签，设置enctype="multipart/form - data"属性，允许用户选择本地文件并通过浏览器将文件以POST请求的方式发送到服务器。 示例代码（HTML）：<form action="upload.php" method="post
阅读全文
摘要：使用响应式布局（Responsive Layout） 原理：通过CSS媒体查询（Media Queries）根据设备的屏幕尺寸、分辨率等属性来动态调整页面的布局和样式。媒体查询允许您针对不同的媒体类型（如屏幕、打印等）和条件（如屏幕宽度、高度、设备方向等）应用不同的CSS规则。 示例代码： 例如，当
阅读全文
摘要：以下是一些常见的站点一键换肤功能的实现方式： 使用CSS变量 原理：通过CSS变量（Custom Properties）来管理站点的主题颜色、背景、字体等样式属性，用户切换主题时，只需要改变这些CSS变量的值，页面的样式会自动更新。 实现方式：在全局样式中定义CSS变量，如--primary-col
阅读全文
摘要：基于HTML5和JavaScript的简单进度条实现 原理：利用window.onload事件和document.readyState属性来跟踪页面加载进度。document.readyState有不同的状态值，如loading（正在加载）、interactive（文档已被解析，“交互时间”开始）和
阅读全文
摘要：原生JavaScript实现懒加载 原理：利用浏览器的可视区域（getBoundingClientRect函数可以获取元素相对于视窗的位置）来判断图片是否进入可视区域。当图片进入可视区域时，将图片的src属性设置为真实的图片地址，从而实现懒加载。 实现步骤： 首先，将图片的src属性设置为一个占位符
阅读全文
摘要：名称（Name） 定义：这是cookie的标识符，用于在后续的操作中识别特定的cookie。名称必须是唯一的，在同一个域名下不能有两个名称相同的cookie。例如，一个用于存储用户登录状态的cookie可以命名为“login_status”。 规则：名称是一个字符串，其长度和内容受到一定限制。通常，
阅读全文
摘要：DNS（Domain Name System）协议的定义和作用 定义：DNS是一种分布式数据库系统，用于将人类可读的域名（如example.com）转换为计算机可理解的IP地址（如192.0.2.1）。它是互联网基础设施的关键部分，使得用户可以通过方便记忆的域名访问网站和其他网络资源，而不是复杂难记
阅读全文
摘要：函数式编程的定义和核心概念 定义：函数式编程是一种编程范式，它将计算视为函数的求值，强调避免状态的改变和数据的可变。在函数式编程中，函数是“一等公民”，这意味着函数可以像其他数据类型一样被传递、返回和存储。 核心概念： 纯函数：纯函数是函数式编程的基石。一个纯函数是指对于相同的输入，总是返回相同的输
阅读全文
摘要：内存泄漏风险 原理：如果在window对象上不断添加属性或方法，而没有及时清理，当这些属性或方法引用了大量的数据（如大型数组、复杂对象等），并且这些数据在后续的操作中不再需要时，就可能会导致内存泄漏。例如，在一个单页应用（SPA）中，每次页面状态变化都在window上挂载一个新的包含大量状态信息的对
阅读全文
摘要：小程序有两个线程主要是为了实现更好的性能、用户体验和安全性，这两个线程分别是逻辑层线程和渲染层线程。 逻辑层线程 功能作用 负责处理小程序的业务逻辑，包括数据的处理、网络请求、事件响应等。例如，当用户点击小程序中的一个按钮来获取商品信息时，逻辑层会发送网络请求到服务器，接收并处理服务器返回的数据，然
阅读全文
摘要：使用localStorage和时间戳结合的方式（JavaScript） 原理：localStorage是一种在浏览器中存储数据的方式，数据不会过期，除非手动清除。为了实现数据的自动过期，可以将数据存储的同时，也存储一个时间戳。在读取数据时，通过比较当前时间和存储的时间戳来判断数据是否过期。 存储数据
阅读全文
摘要：以下是使用Webpack构建一个自己的React应用的基本步骤： 1. 项目初始化 首先创建一个项目文件夹，并在其中初始化package.json文件（用于管理项目的依赖和脚本等），打开命令行，进入项目文件夹，执行以下命令： mkdir my-react-app cd my-react-app np
阅读全文
摘要：以下是一个使用 Node.js 实现的命令行工具，用于统计输入目录下指定代码文件的行数。 实现思路 接收命令行参数，获取输入目录和文件扩展名（例如，.js、.html、.css 等）。 递归遍历输入目录，查找所有符合指定扩展名的文件。 对于每个找到的文件，读取文件内容并统计行数。 输出统计结果。 代
阅读全文
摘要：一、sideEffects 的定义和目的 在 package.json 中的 sideEffects 属性用于告诉构建工具（如 Webpack 4+），在打包过程中哪些文件具有副作用（side effects），哪些文件没有副作用。副作用是指当导入一个模块时，除了导出模块外，该模块是否会对其他模块或
阅读全文
摘要：以下是对<script>标签上各个属性的详细解释： 1. src 属性 定义： src 属性用于指定要加载的外部脚本文件的 URL 地址。这个 URL 可以是相对路径（相对于当前 HTML 文件所在的目录），也可以是绝对路径。 示例：<script src="scripts/main.js"></s
阅读全文
摘要：以下是对这个问题更准确的解释： 关于刷新页面时的请求 当你在 SPA 中使用 hash 路由时，正常情况下，仅修改 URL 的 hash 部分（例如从 http://example.com/#/page1 更改为 http://example.com/#/page2）不会向服务器发送请求。然而，当你
阅读全文
摘要：以下是用户访问页面出现白屏问题的可能原因及排查方法： 1. 网络问题 原因： 用户的网络连接不稳定、速度慢或者网络中断，可能导致页面资源无法正常下载，从而出现白屏现象。 排查方法： 让用户检查自己的网络连接状态，尝试刷新页面或访问其他网站，以确定是否是网络问题。 可以使用网络诊断工具（如 ping、
阅读全文
摘要：以下是在 JavaScript 中实现大对象深度对比的几种方法： 方法一：递归比较 function deepEqual(obj1, obj2) { // 首先比较两个对象是否为同一引用 if (obj1 obj2) { return true; } // 检查是否都是对象且不为 null if (
阅读全文
摘要：以下是在 JavaScript 中处理 100 万数据时确保性能和流畅度的几种方法： 1. 使用 Web Workers 思路： 将数据处理任务转移到 Web Workers，它可以在后台线程中执行代码，避免阻塞主线程，从而保证页面的流畅性。 代码示例：<!DOCTYPE html> <html l
阅读全文
摘要：以下是将 <script> 标签放在 HTML 文档的 <body> 内底部的几个重要原因： 1. 页面加载顺序和性能优化 原理： 当浏览器解析 HTML 文档时，它会按顺序执行遇到的元素。如果 <script> 标签位于 <head> 中或 <body> 的顶部，浏览器会在下载和执行脚本时暂停 H
阅读全文
摘要：以下是关于虚拟滚动加加载的原理和实现思路： 一、虚拟滚动原理 1. 基本概念 可视区域： 用户在屏幕上看到的部分，是实际渲染内容的窗口。只有处于可视区域内的元素才会被渲染到 DOM 中，而其他部分不会被渲染，从而减少 DOM 元素的数量，提高性能。 2. 实现思路 数据存储与显示： 存储大量的数据列
阅读全文
摘要：/** ts-微软开发包含js(最终变异为js)的扩展语言（js的超集）适合大型项目开发 数据类型、逻辑漏洞、低级书写错误、属性访问漏洞 静态类型检查（运行前检查） / /* tsc --init tsc --watch npm i typescript -g tsc xxx.ts / /* 类型大
阅读全文
摘要：VS Code 对 TS 类型支持友好，前端开发者主流的编辑器 HbuilderX 对 TS 类型支持暂不完善，期待官方完善 git clone -b vite-ts https://gitee.com/dcloud/uni-preset-vue.git 安装 Vue Language Featur
阅读全文
摘要：页面路由参数可以使用 // 接收页面参数 const query = defineProps<{ id: string }>() 直接获取当然也可以使用onLoad的option获取 还有一个 padding: 0 20rpx var(--window-bottom); 为了方便开发者适配多平台，框
阅读全文
摘要：大家对ts文件的校验有类型和eslint的困扰 神器：在script的第一行/* eslint-disable */ 关于ts的忽略类型校验// @ts-ignore 在tsconfig.json中配置 在tsconfig.json文件中，可以通过设置一些编译选项来放宽类型检查的严格程度。 stri
阅读全文
摘要：['',''].join(" ").trim() 来自实际开发中的一个小知识点避免空元素 温馨提示 小程序 跳转到 tabBar 页面 时，会关闭其他所有非 tabBar 页面。 小程序的 tabBar 页没有后退按钮，可通过 getCurrentPages() 验证，结果仅有一个页面，意味着历史记
阅读全文
摘要：新年快乐！！！蛇年大吉 uni-app 不支持 animate 类型。 原生微信小程序 支持 animate 类型 。 当前需求可基于 原生微信小程序 的 Page 实例类型 扩展 uni-app 的 Page 实例，参考代码 👇 // 基于小程序的 Page 实例类型扩展 uni-app 的 P
阅读全文
摘要：function getIndex(x, first, last, diff) { if (x < first) { return 0; } if (x > last) { return Math.floor((last - first) / diff); } return Math.floor((
阅读全文
摘要：这个错误是由于 Windows 系统的执行策略限制导致的，它禁止运行 PowerShell 脚本，vue.ps1 就是一个 PowerShell 脚本，所以无法正常执行。以下为你详细介绍解决该问题的方法： 方法一：临时更改执行策略（适用于当前会话） 如果你只是想临时允许运行脚本，在当前的 Power
阅读全文
摘要：整体逻辑流程 页面加载（onLoad 钩子） 参数接收：从路由参数中获取 operateId、staffName 和 operateStatus，并将其赋值给组件的数据属性。 数据初始化：调用 Promise.all 并行执行 getWarse、getAllianceParticipationLis
阅读全文
摘要：在 Vue 3 中，当使用 reactive 创建一个响应式数组，且数组里的每个元素都是嵌套很多层的复杂类型对象时，确实会对每个属性进行监听和数据劫持，但 Vue 3 也做了一些优化，因此性能损耗并非不可控，下面从原理、性能影响和优化措施几个方面详细分析： 原理：深度响应式劫持 Vue 3 的 re
阅读全文
摘要：Vue 3 的 nextTick 源码位于 packages/runtime-core/src/scheduler.ts 文件中，下面是简化后的源码 import { isFunction } from '@vue/shared' import { currentFlushPromise } fro
阅读全文
摘要：Proxy 是什么 Proxy 是 ES6 引入的一个新特性，它可以对对象的基本操作（如属性读取、属性设置、枚举、函数调用等）进行拦截和自定义处理。Proxy 接收两个参数：目标对象（target）和处理程序对象（handler）。处理程序对象中可以定义各种拦截操作的方法，这些方法被称为陷阱（tra
阅读全文
摘要：官网 https://cn.vuejs.org/api/sfc-script-setup#definemodel up主 https://juejin.cn/post/7331021519965356071
阅读全文
摘要：{ "compilerOptions": { "composite": true, "skipLibCheck": true, "module": "ESNext", "moduleResolution": "Node", "resolveJsonModule": true, "noImplicit
阅读全文
摘要：display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns 作用：定义网格容器里有多少列，以及每列的宽度。 repeat(auto-fit, ...) repeat
阅读全文
摘要： 
阅读全文
摘要：知道JS有模块化开发的说法，也偶尔听过requireJs,AMD,CMD等等名字，甚至使用node的时候，还用过require之类的方法，但是对这些一直没有一个明确的认识和概念。想必这就是许多新手刚接触这方面知识时的一个普遍状态。其实仅仅做一些基础的活儿的时候，并不需要对它们有太多的了解，知道怎么用
阅读全文
摘要：当 flex 容器的主轴方向是垂直（flex-direction: column）时： 默认情况下，flex 项的高度会先基于内容自身高度（height: auto）计算，再分配剩余空间。 问题出现：如果某个 flex 项的内容高度不确定（如文本、图片或动态内容），浏览器会优先用内容高度占用空间，可
阅读全文
摘要：
阅读全文
摘要：在 Vue 3 中，Fragment（碎片）的引入确实解决了 “组件必须有唯一根节点” 的限制，允许组件直接返回多个同级子节点，这与 React 的 Fragment 理念一致，但实现细节和设计背景有其特殊性 这是因为 Vue 2 的虚拟 DOM（VNode）设计要求组件必须有一个单一的根节点作为渲
阅读全文
摘要：//扩充event类型 declare global { interface Event { params: any } }
阅读全文
摘要：更推荐使用createPortal因为他更灵活，可以挂载到任意位置，而position: fixed,会有很多问题，在默认的情况下他是根据浏览器视口进行定位的，但是如果父级设置了transform、perspective、filter 或 backdrop-filter 属性非 none 时，他就会
阅读全文
摘要：事件即“发布/订阅”模式，⾃定义事件即“消息发布”，事件的监听即“订阅订阅” JS 原⽣⽀持⾃定义事件 document.createEvent(type); // 创建事件 event.initEvent(eventType, canBubble, prevent); // 初始化事件 targe
阅读全文
摘要：npm config set ignore-engines true
阅读全文
摘要：处理因为构造函数内部属性依赖其他数据在实例化的时候修改未同步问题
阅读全文
摘要：第一种 盒子interpolate-size: allow-keywords; https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size 第二种 改变的效果由auto改为 height:calc-size(auto,size)
阅读全文
摘要：写得很扎实！结合你项目里的实际用法，我补充几点校对与进阶建议，帮你把这份笔记打磨得更完善： 语法等价说明 require['context'] 与 require.context 是等价的，项目里选择方括号写法通常是为了规避某些 lint 规则或静态分析限制。 directory 的路径基准 你文档
阅读全文
摘要：import lodash from 'lodash' import { clientType, decorType } from '@/utils/decor-types' export function getModules() { let modulesObj = {} let require
阅读全文
摘要：对于class继承以及构造函数、原型链有些疑惑，学的不是很好，如果你也想重新学习这块内容请耐心看完 你对 ES6 Class 的理解方向是对的！它确实是构造函数的「语法糖」，但背后封装了更清晰的继承逻辑。我们通过具体例子一步步拆解，从基础到继承，再到 prototype 和 __proto__ 的核
阅读全文
摘要：在Vue的渲染流程中，AST（抽象语法树）和虚拟DOM（Virtual DOM，简称VNode）是两个不同阶段的核心概念，它们既相互区别又紧密关联，共同支撑了Vue的模板编译与视图渲染机制。 1. 概念与作用 AST（抽象语法树） AST是编译阶段的产物，用于描述模板的静态结构。 当Vue处理模板（
阅读全文
摘要：要厘清这些问题，我们需要结合 JavaScript 类继承规则 和 React 类组件的初始化机制 来分析，以下是关键知识点的拆解： 一、关于 propTypes 和 defaultProps 的校验逻辑 你的理解偏差：“props 要做校验通过后才会做后续的操作” 正确逻辑： propTypes
阅读全文
摘要：类组件是动态组件 具备属性及规则校验 具备状态，修改状态可以控制视图更新 1.setState 2.forceUpdate 3.具备周期函数 render同级触发生命周期函数更新 严格模式下，一些不安全的周期函数是禁止使用的
阅读全文
摘要：在JavaScript中操作DOM元素的方式确实有多种，核心可以分为三大类：修改样式、修改HTML属性、修改DOM对象自身的特性。它们的使用场景和效果各有不同，我们用具体例子来梳理清楚： 一、修改元素样式（外观） 主要用于改变元素的视觉表现（颜色、大小、位置等），核心是操作CSS相关的属性。 1.
阅读全文
摘要：shape-outside: circle(50%); https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside
阅读全文
摘要：我用“装修房子”的例子来给你解释Fiber和整个流程，保证大白话接地气： 先理解：为什么需要Fiber？ 以前React更新页面像“一口气装修完整个房子”——从进门开始，不管遇到什么情况（比如业主突然要改方案），必须从头到尾装完才能停。如果房子太大（页面元素多），中间就会卡住，业主（用户）想开门看看
阅读全文
摘要：问题 git bash可以执行相关命令对代码仓库但是小乌龟不行 TortoiseGit（小乌龟）和Git Bash命令行的环境配置可能存在差异，导致VPN连接成功后命令行可用但小乌龟不可用。核心原因通常是小乌龟未使用与Git Bash相同的网络环境、SSH密钥或权限配置，可以按以下步骤排查解决： 1
阅读全文
摘要：Uiverse官网https://uiverse.io/elements
阅读全文
摘要：场景/属性 说明 效果/行为 子绝父相 + 子元素width:100% 子元素position: absolute，父元素position: relative，子元素设置width: 100% 宽度以父元素（最近的非static定位祖先，即包含块）为基准，与是否脱离标准流无关，等于父元素内容区域宽度
阅读全文
摘要：1. 切换到新的、正常的淘宝镜像（无证书过期） npm config set registry https://registry.npmmirror.com/ 2. 关闭 npm 严格 ssl 验证（解决证书报错） npm config set strict-ssl false 再执行 npm in
阅读全文
摘要：这两个都是取值 / 兜底运算符，但判断规则完全不同，这是最关键的区别： 运算符 判断规则 适用场景 (逻辑或) 判定所有假值：false/0/''/null/undefined/NaN 只要是 “空 / 假” 就兜底 ?? (空合并) 只判定空值：null / undefined 只在真正空的时候兜
阅读全文
浙公网安备 33010602011771号