登录社区云,与社区用户共同成长
邀请您加入社区
前端性能优化:重排与重绘的避免策略 本文系统介绍了浏览器渲染流程中重排(Reflow)和重绘(Repaint)的概念及其性能影响。主要内容包括: 浏览器渲染流程:Style→Layout→Paint→Composite四个关键阶段 重排与重绘的定义及区别:重排影响几何属性,重绘影响外观属性 常见触发重排的操作:修改尺寸、位置、DOM结构、display属性等 强制同步布局问题:读取offsetWi
复盘本地 AI Chat 项目的架构重构:基于 LangChain.js、Ollama 和 Streamdown,搭建可继续扩展 Tool / Skill / MCP 的基础链路。
首先,apt-get update 一下,这个命令的作用是同步 /etc/apt/sources.list 和 /etc/apt/sources.list.d 中列出的源的索引,这样才能获取到最新的软件包。tail -f root.log | perl -pe 's/(关键词1)|(关键词2)|(关键词3)/\e[1;tail -f 日志文件 | perl -pe 's/(关键词)/\e[1;颜色
2026年的春天,如期而至的“金三银四”,对于前端开发者而言,却带着一丝料峭的寒意。当你打开这份资料时,或许正经历着职业生涯中前所未有的迷茫与焦虑。打开招聘软件,你会发现市场依旧活跃,但属于自己的那个机会似乎变得遥不可及,朋友圈里,充斥着“行业寒冬”、“35岁危机”、“AI抢饭碗”的论调。我们听到了太多真实且扎心的故事:在长沙创业的老齐,眼看着小程序报价从几年前的20万一路跌到2万,甚至还要附赠服
针对Ant Design开发者结合Tailwind CSS或CSS/Less/Sass时的常见痛点,Ant Design Token Lens插件提供了高效解决方案。该插件通过颜色可视化、智能补全和深度信息透视三大核心功能,让抽象的CSS Token变得直观可操作。特别解决了Tailwind CSS中动态变量失效的问题,推荐使用静态CSS变量替代动态插值。安装即用,支持多语言文件,能实时显示Tok
三种操作,如果继续扩展成 edit / clearCompleted / reorder,用 useState 会越来越乱。动作:setField、setError、reset、submitStart/Success/Fail。动作:fetchStart / fetchSuccess / fetchError / reset。当你的状态变复杂、更新方式很多、或者你想把“怎么改状态”集中管理时,用它
只要组件因为别的 state 改了(主题、输入框、弹窗),params 就是新对象 → effect 又跑 → 又请求。第2次渲染(theme 变了,但 chainId/address 没变):useMemo 返回旧的 0xAAA。:你每次渲染都“重新打印一张身份证”,身份证号码当然变 → 系统认为换人了 → effect 触发。“咦,引用从 0xAAA 变成 0xBBB 了 → 依赖变了 → e
2025 年是 Web 开发的分水岭。之前 Web 开发领域一直发展迅速,几乎每天都有新的工具和框架涌现。但到了 2025 年,这种发展速度直接呈指数级增长。之所以有这种变化,很大程度上是因为 AI 工具的高效性,它们直接将生产力提升了 3 倍!想想几年前,我们还在争论 GitHub Copilot 这样的 AI 工具是否可靠,如今,AI 已经能构建完整的全栈应用程序了!。这也让不少人担忧,AI
本文详细介绍了基于Next.js和React技术开发的AI聊天应用实现过程。主要内容包括: 项目架构分析,从CSR模式改造为支持SSR渲染,包括路由、API调用和状态管理的适配方案 核心聊天功能实现,包含消息处理、流式响应、自动滚动和上下文管理等关键技术点 丰富的交互功能开发,如图片上传/预览、语音合成、快捷键操作和实时聊天面板等 性能优化策略,如服务端数据预取、状态序列化和流式传输处理 部署配置
本文介绍了一个基于React和TailwindCSS开发的前端图片裁剪组件ImageCropper,无需依赖第三方库即可实现高质量的图片裁剪功能。该组件支持8个控制点精准调整裁剪区域,提供拖拽移动、缩放、旋转和重置等操作,并适配移动端触摸交互。文章详细说明了组件的安装导入方式、属性接口(包括图片源、弹窗控制、回调函数等)以及基本使用方法,并提供了图片列表裁剪和文件上传裁剪两个完整示例代码。该组件可
法国政府开源的企业级协作文档平台,GitHub 14.3k star。基于 Django+React 开发,支持实时协作、离线编辑、AI 辅助写作,可私有部署,是 Notion 的开源替代方案。
本文系统介绍了前端国际化(i18n)实施方案,涵盖全流程技术要点:1)通过Babel AST自动提取硬编码文本;2)采用ICU语法规范设计多语言键值;3)提供React/Vue/Next.js等框架的初始化方案;4)优化构建打包与ServiceWorker缓存策略;5)建立CI校验、自动化测试与Sentry监控体系;6)提出微前端协作方案和RTL处理方案。完整工作流包含自动化提取→平台翻译→导回校
IDEA还提供了智能转换功能:当你某天想把这个小脚本升级成正式类结构时,把光标放上去,Alt+Enter一按,“Convert to regular class”一键转成标准class,连构造函数和字段都给你规整好。当你新建一个Java项目,选择“IntelliJ”作为构建系统并勾选“添加示例代码”,它自动生成的就是一个极简的compact source file,里面连public class都
现在我的工作流程变成了这样:我说要给认证流程加错误处理,Claude会先分析现有的错误处理模式,找到我的AppError类设计,检查错误冒泡机制,最后才问我要不要开始写,这样既不会乱改文件,也不会瞎搞重构。三个月前,朋友圈到处都在吹AI编程神器,说得那叫一个邪乎,说什么以后程序员都要失业了。那天我就让它给一个函数加个错误处理,好家伙,直接把我整个文件里的函数都改了个遍。同一个数据库连接居然有三个全
然后它把“推荐引擎”这个大意图,拆成“用户画像单元”“算法选型单元”“API对接单元”,每个单元再拆成可并行开发的子任务,生成领域模型、技术选型建议、甚至AWS服务清单(比如用Lambda无服务架构+DynamoDB做实时推荐),最后甩给你一份带勾选框的执行计划:“老板,按这个干,行不行?最近他憋了个大招,不叫“增强版Scrum”,也不叫“智能敏捷2.0”,而是直接掀桌子——搞了个叫“AI驱动开发
问题在于“能力-可靠性鸿沟”——AI能完成任务,但无法稳定、准确地每次都做好,它的输出常常夹杂着细微错误或理解偏差,需要人类反复检查、修正,反而拖慢了整体进度:一位开发者形容这个过程就像“盯着一个过分自信的初级程序员写代码”,你得时刻提防他出错,最终花的时间比自己动手还多。毕竟,泡沫破灭的代价,从来都不只是资本市场的数字跳动,而是千千万万牛马的饭碗、房贷和生活希望。咨询公司高德纳甚至断言,AI已进
本文分析了前端开发的核心技能体系与地域岗位特点。基础技术栈包括HTML/CSS/JavaScript三件套,以及Vue/React主流框架;工程化环节涉及Webpack打包和Git版本控制;进阶能力包括Node.js后端开发和性能优化。不同城市需求差异明显:一线城市注重技术深度和创新,其他城市更侧重业务适配和跨端开发。建议开发者遵循"基础→工程化→进阶"成长路径,结合地域特点发
是的,你没听错,JetBrains说:“我们不靠AI赚钱,我们靠让你写更快的代码来赚钱。简单来说,它是一个专治“空指针异常”的良药。是的,你没看错,Java已经进化到25了,而你的公司还在用Java 8跑着2016年的微服务架构。以前Bazel项目在IntelliJ里像个异类,现在它成了“一等公民”,支持Java、Kotlin、Go、Python等,目标映射准确,性能拉满。新版界面更加现代化,信息
然后我就去遛狗了,回来一看,代码已经写好,测试也跑通了,PR都快准备好了——这感觉,就像你点了个外卖,结果送餐员不仅把饭送来,还顺手帮你把厨房收拾了,地板拖了,狗也洗了。如果我告诉你,过去一个半月里,我一个人干完了原本需要三年才能清完的技术债,你可能会觉得我在吹牛,或者嗑了什么不得了的东西——但真相是,我既没嗑药,也没变成时间管理大师,我只是拥有了一个叫“Claude Code”的AI编程搭档,它
最近,不少人反馈语雀上iDms 文档出现卡顿情况,还有一些人没有使用过语雀,那么打开文档就需要登录在查看,这时候在文档不断扩大的情况下搭建一个文档站,就很有必要了。不过网络上搭建文档中心的工具是在是太多了,利用AI,筛选出来一些工具,总结了工具的优缺点来看看选什么作为文档站搭建工具。诚然,很多路不是一下子就选定的,当然我不知道写下这些话之后,是否在后面还得返回来再次进行工具选型,但希望只需要一次就
3、切换连接方式切换到USBPTP 或者文件格式 我在chrome浏览器都是切换到PTP;2、把USB连接调试关闭开启一次,再进入到页面刷新是否会出现;1、先看开发者模式是否打开,如果打开就先关闭开启一次,
前端开发主要有三剑客:html、css、js。html主要是将元素盒子和数据挂载到页面上;css是渲染页面的,美化页面;js则是用来做数据动态渲染等等操作的。其中js是重中之重。可能html和css上手很快,但是js务必要稳扎稳打。js这门语言不仅可以做页面渲染,它的超集Typescript可以面向对象编程实现大型项目,NodeJs可以处理后端业务。
工作以来,感觉自己接触到的东西还是挺多的,但是当我面试的时候,就会发现各种问题,很多知识点都是模棱两可,答得不全面。究其原因,还是没有吃透这些内容。所以我决定,用几个月的时间,将我们大前端的大部分精选面试题进行整理,将大部分知识点进行归纳总结,为自己也为其他小伙伴们提供一份面试学习参考。
1. React( v16.8 版本) 生命周期2. React( v16.8 版本) 生命周期 更新流程2.1 三个更新流程2.2 setState()的生命周期流程(对应上图2号线)2.3 forceUpdate()的生命周期流程(对应上图3号线)2.4 父组件render()渲染的生命周期流程(对应上图1号线)2.5 React( v16.8 版本)生命周期 总结3. React 新版本的生
描述了从零开始创建react+Django项目的过程,附有详细步骤及成品项目地址。
其中最常见的包括 Maven 依赖性插件和 Gradle 依赖性分析插件,它们在检测未使用的依赖性、已使用的传递依赖性(您可能希望直接声明)以及在错误配置(API vs 实现 vs 仅编译等)上声明的依赖性方面表现出色。的确,Java 的垃圾回收器是一个功能强大的工具,可自动处理内存分配和删除,减轻了我们手动分配和删除内存的负担。在我们的案例中,这是最明显的症状:堆出错(OutOfMemoryEr
前端项目在生成docker镜像时遇到esbuild时报错。
本章内容包含: 1、类型断言,2、非空断言,3、typeof,4、keyof,5、泛型,6、泛型函数,7、泛型的问题,8、泛型接口,9、泛型工具
前端知识体系(图谱)前端工程化体系node主流技术栈大纲ReactVueAngularJavaScriptTypeScript跨平台技术大纲跨端技术发展的三个阶段HybridReactNativeFlutterweex小程序快应用ionicCordova性能优化和监控前端知识体系(大纲)前端工程化体系基础设施规范化前端标准(基础)W3CSPADOMBOMXHTMLXMLJSONJSONPHTTP
react 18环境说明脚手架安装 create-react-appnpm install -g create-react-appcreate-react-app demo-react环境配置将 package.json 里面的 "dependencies" 下面 react 的版本由稳定版 rea17 切换为 18beta版本切换命令npm uninstall react react-dom -
前面有个webSocket自动断开连接的问题,已解决,请见博客:webSocket java.io.EOFException: null 增加心跳机制解决然后又报了一个错:java.lang.IllegalStateException: The remote endpoint was in state [TEXT_FULL_WRITING] which is an invalid state fo
umi如何配置环境变量前言安装cross-env修改package.json创建对应的umirc.ts前言通常情况下,一个项目区分开发环境,测试环境,生产环境,那么umi如何添加环境变量来区分当前环境呢?安装cross-env因为要修改package.json的script命令,为了兼容OS X和Windows系统,所以需要借助cross-envnpm i cross-env -S修改packag
React纯前端生成word文档(支持多图片导出)前言准备工作代码实现前言作为一个入职不就的前端小白来说,前段时间的项目中老大提了一个在我看来十分无理的需求,对!无理。他要求我用纯前端实现一个word文档导出功能,并且附模板。我当即就否决了他(这压根就触及到我知识盲区了…),随后他在长达两个半小时对我的思(hu)想(shuo)教(ba)育(dao)中。我当然是还是选择妥协了(毕竟自己老大我只能惯着
vue-Prop组件传值vue组件传值经常用到,但是这里面有一些坑需要注意。比如:父组件向子组件传递的参数是一个对象,对操作prop修改则会影响父组件的值。这里记录一下。子组件接收基本数据类型父组件<template><div>我是父组件,姓{{firstName}}<son :firstName="firstName"></son> //绑定要传递
文章目录一、antd4如何回显数据1. 定义变量2. 保存接口数据到form变量中3. form显示数据一、antd4如何回显数据1. 定义变量const [form] = Form.useForm()2. 保存接口数据到form变量中const requestProfileList = useCallback(async () => {try {const { result } = awa
这是因为,在默认情况下,break 语句会将控制返回到最近的控制块的末尾。冒号后面的字符串是可选的。每种用法都有特定的含义,并在语言的语法和功能中发挥着不同的作用。在 Java 10 及更高版本中,冒号在增强 for 循环中用于将元素重组为变量。:) 中用作条件、条件为真时要执行的表达式和条件为假时要执行的表达式之间的分隔符。在本例中,我们使用对String类中的toUpperCase()实例方法
系列文章目录提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加例如:第一章 Python 机器学习入门之pandas的使用提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录系列文章目录前言一、什么是Umi二、什么时候使用Umi三、Umi的工作原理四、Umi快速上手环境准备脚手架安装依赖启动项目部署发布Umi基础Umi2.x的目录约定路由约定式路由配置式路由二、使
最近在做一个功能,把新手引导的提示定位在申请的上方,申请的位置是会根据前面功能的不展示而向前移动的,所以位置是不固定的,因此新手引导的位置要根据申请元素的位置来定位。我使用了getBoundingClientRect函数来获取申请dom元素距离视图的距离。getTypeHighLightDom(item) {const dom = document.querySelector(item.selec
全网唯一Ant Design Pro快速入门教程适合0基础3天入门教程,快速掌握React、AntDesignAnt Design0基础入门
umi max使用时的一些问题与总结合集
2021【前端VUE框架】第18节,我轻轻的尝一口这香浓的诱惑,谈谈我搞vue实现年入35万过程,vue-devtools学习目标:提示:2021【前端VUE框架】最新/最全/最细实战课程,VUE56节进阶学习重磅来袭:3个月掌握 vue 入门知识到实战学代码。学习内容:提示:本节第18节内容:vue-devtools调试工具学习本节视频需要掌握的知识点:1.HTML2...
目录应用场景尝试解决一:尝试解决二:总结:应用场景问题:前端写入指定的img标签和src属性,请求不了后端图片。原因:401,UnauthorizedError,因为前端中的src属于普通的get请求,不带自定义header,而后端有对每个请求都进行身份验证,最终返回{status: 1,msg: "TOKEN ERROR"}前端请求头中找不到Authorization: Bearer token
假如你是一个萌新,今天突然决定入坑全栈开发,那么选择什么样的前端和后端框架必然成为面临的第一个难题。你可能听说过React、Vue、Spring、Django、Flask、Gin...等等很多框架,但具体怎么选却毫无头绪。这篇文章将为你逐层深入剖析,为什么Next.js会成为你的终极版本答案,t它可以最大程度地减少你的学习路线并尽可能更多地解决你的开发问题。
这是一个很容易遇见的问题,每输入一个字符Input的焦点就没了,本文将就此问题做分析和介绍一种解决方法。出现的原因可能是你在组件的render函数中用了通过函数生成的Input组件,具体请看分析。如果你遇见该种问题时并没有使用函数式组件,请告知,并一起思考解决方案。本文涉及的现象及常见的原因一般情况下在react框架下使用Input组件时,不管是跟着教程或者是网络搜索的用法,常见如下:export
create-react-app创建项目失败的解决方法前提:必须管理员身份来运行cmd才可创建项目问题1:目录不完整,缺少src文件问题2:需卸载yarn问题3.npm或node版本过低前提:必须管理员身份来运行cmd才可创建项目问题1:目录不完整,缺少src文件解决:原因:create-react-app版本低,请安装最新版本卸载:npm uninstall -g create-react-ap
componentDidUpdate这个生命周期方法可能在开发中用的比较少,但是也相当好用!一、最近在用antd-moblie做图片上传,看官方提供的API:手机端的ImagePicker组件并没有像PC端的那样,在上传事件中提供直接去调后台的action,要是做成选择好几张后,然后那几张同时上传,那就简单,但是业务要求的是一选择就上传,但是组件又不支持,怎么办呢?继续往下看:首先...
前端使用navigator.mediaDevices.getUserMedia和window.MediaRecorder实现调用摄像头录制视屏一、navigator.mediaDevices.getUserMediaMediaDevices.getUserMedia()会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨
react hooks的依赖项目可以按照数据类型分为基本数据类型和引用数据类型,当为基本数据类型时useEffect可以根据依赖项的变化而去发生改变,当为引用数据类型时,useeffect总是会被触发,因为useEffect这里进行的时浅比较eg:当依赖项为基本数据类型时const [count, setCount] = useState[0];useEffect(() => {consol
1. 使用for…inlet person = {name: '张三',age: '21',}for(let key in person){if(Object.prototype.hasOwnProperty.call(person, key)){console.log('key-value',key,person[key])}}//key-valu...
如果是给定得默认值,如图:或者先定义const enumList = {0: { text: '未过期' },1: { text: '已过期' },};------------------------然后使用----------------------------{title: '是否过期',dataIndex: 'overdue',key: 'overdue',alig