今天拉下新项目代码，执行完yarn之后，发现webstorm提示报错 1Error: Plugin "react" was conflicted between "--config#overrides[0] » plugin:react/jsx-runtime" and "--config » eslint-config-react-app » /Users/dansroh/Documents/myProject/fe-drivers-admin/node_modules/eslint-config-react-app/base.js". 解决思路 根据报错信息显示，插件react在两个依赖中产生了冲突，于是，我首先找到yarn.lock文件，然后看到yarn.lock中存在如下配置 12345678910111213eslint-config-react-app@^7.0.1: ...省略 dependencies: eslint-plugin-react "^7.27.1" .. ...

Browser-sync 是一个开发工具，用于在多个浏览器和设备上同步测试和调试网站。它的工作原理是通过创建一个本地服务器，监视文件的变化，并自动重新加载浏览器或注入CSS等变更，以使开发者在修改代码后立即看到效果，而无需手动刷新页面。 作用：实时同步多个浏览器和设备上的网页内容，提高开发效率和调试效果。 使用方法 使用npm或者yarn安装browser-sync。npm i -g browser-sync 启动browser-sync start --server --port 5502 --files "your_directory/**/*"

最近在一次使用console.log()的过程中，发生了一件意料之外的事情，让我想起了多年前，一位面试官问我的一个问题console.log()是同步的还是异步的？当时我听到这个问题还有点懵 console.log是同步还是异步？先说答案，console.log()其实是异步的 看一下下面代码 123456789// 加载图片const image = new Image()image.src = '/src/images/11.png'console.log(image)image.onload = () => { canvasRef.current?.getContext('2d')?.drawImage(image, 0, 0, 300, 300);}image.src = '/src/images/avatar.png' 如果console.log()是同步执行，那么打印出来的结果，应该是src为/src/images/11.png的dom，但实际，image的src显示为/src/im ...

效果图 实现方法 用中间临时的canvas来处理图像，然后保存图像的ImageData 根据ImageData生成随机的粒子集合。 开启粒子动画，使随机粒子集合向目标处移动 代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127import './App.css'import {useEffect, useRef} from "react";import {Button} from 'antd'fu ...

计算系统的分层 信息层 最内层的信息层反映了，在计算机上表示信息的方式，它是一个纯概念层。计算机上的信息采用二进制管理。 硬件层 硬件层由计算机系统的物理硬件组层。 程序设计层 程序设计层负责处理软件、用于实现计算的指令以及管理数据 操作系统层 每台计算机都用操作系统来管理计算机的资源。例如Window XP、Linux、Mac OS这样的操作系统可以使我们与计算机进行交互，管理硬件设备，程序和数据间的交互方式。 应用程序层 用计算机解决真是世界的问题 通信层 将计算机连接到网络，以共享信息和资源 计算机系统中数字，文本，与多媒体的表示方法 整数由对应的二进制值表示，负数的表示方法有符号表示法和二进制补码表示法，实数由三部分构成，即符号、尾数和指定小数点位置的指数 字符集 Unicode、ASCII 音频信息表示为数字化的声波 颜色由红、蓝、绿的三个份额表示 图像有两种，矢量图和位图 视频被分割成一些列表示图像的静态图像

介绍 antd-d是一个基于antd v5.16.0的配置化的组件库 适用于 react web 开发 支持TypeScript 支持ESM和UMD规范 安装antd-d之后，会自动安装antd，可直接引入antd中的组件 目前封装了绝大多数Form表单项。之后会加入封装的Table 拥有足够的灵活性 安装1npm install antd-d --save 示例123456789101112131415161718192021222324import {Form} from "antd";import {FormPro, IConfigItem} from "antd-d";function App() { const [form] = Form.useForm(); const itemConfig:IConfigItem[] = [ { name: 'name', label: '姓名'}, { ...

浏览器缓存与Web安全一、描述浏览器缓存的工作原理二、HTTP头中的哪些字段与缓存策略有关？它们各自如何工作？三、解释Cache-Control、Expires、Last-Modified、ETag等HTTP头字段如何影响浏览器缓存行为？四、什么是强缓存和协商缓存？它们之间有何区别？五、如何设置资源的缓存策略来优化网页加载性能？六、浏览器缓存如何影响HTTP请求？不同的缓存策略会如何改变请求响应？七、如何使用浏览器的开发者工具来分析和调试缓存行为？八、描述浏览器如何处理强缓存和协商缓存的决策过程？九、其他缓存相关的问题。十、什么是跨站脚本攻击（XSS）？如何防止XSS攻击？十一、解释跨站请求伪造（CSRF）攻击及其防御机制十二、什么是SQL注入攻击？尽管主要是后端的问题，前端开发者如何帮助防御十三、HTTPS如何保证Web通信的安全性？十四、解释同源策略（SOP）及其对Web安全的意义十五、描述前端加密的应用场景和限制十六、如何在前端实现安全的认证和授权机制？Node-服务器-数据库一、什么是Node.js? 它是如何工作的二、Node.js中的全局对象有哪些？举例说明它们的用途三、解 ...

React18相关面试题一、React的设计思路，它的理念是什么？和Vue有什么异同二、什么是React的事件机制？和普通的事件有什么区别？请解释其工作原理三、React.Component和React.PureComponent之间的区别是什么？四、什么是React的高阶组件（HOC），它与普通组件有什么不同？通常在什么场景下使用五、在React中，哪些方法和操作会触发组件的重新渲染？当一个组件重新渲染时，render函数内部会发生什么？六、如何避免在React中进行不必要的渲染，以提高应用性能？七、setState在React中的调用原理是什么？调用setState后，React框架内部发生了什么事情？八、setState调用的过程是同步的还是异步的？九、React的批量更新过程具体是如何体现的？十、React的生命周期包括哪些阶段？每个阶段都有哪些方法十一、在React的哪个生命周期阶段可以进行性能优化？这种优化的原理是什么十二、什么是React的严格模式，这种模式有什么作用十三、React中组件通信的方式有哪些？各适用于什么场景十四、React-Router的实现原理是什么？它 ...

性能优化面试题一、在前端开发中，有哪些性能优化方面的操作？ 减少http请求: 合并CSS、JavaScript文件，使用CSS Sprites合并图像，减少页面加载时的请求数量。 使用CDN: 将静态资源，如图片、CSS、JavaScript文件放在内容分发网络（CDN）上，提升资源加载速度。 压缩文件: 压缩CSS、JavaScript文件，减少文件大小，提高加载速度。可以使用工具如UglifyJS、CSSNano等。 懒加载: 对图片、视频等大文件采用懒加载技术。 HTML原生的loading属性<img src="image.jpg" alt="Example Image" loading="lazy"> 使用Intersection Observer API 使用第三方库， 如lazysizes 缓存机制：使用浏览器缓存和服务器端缓存，让用户重复访问时不需要重新加载所有资源。 异步加载：将非关键的JavaScript文件设置为异步加载，不阻塞页面的渲染。 使用 async 和 defer 属性 & ...