大转转FE-CSDN博客

原创你的H5页面在折叠屏上适配了吗？

通过优化现有的flexible.js+postcss-px-to-rem方案，成功兼容了折叠屏，提升了用户体验。通过flexible.js + postcss-px-to-rem插件将设计稿中的px单位转换为rem单位，基于视口宽度进行动态计算；：postcss-px-to-rem在代码编译阶段处理，最终生成的CSS文件中已经是rem单位，无运行时计算开销。目的是展开状态后，字体大小和折叠状态下保持一致（非放大），首先需要了解折叠状态时，手机的屏幕宽度数据。可减少HTTP请求，降低代码复杂度和特殊处理。

2025-08-26 09:01:18 292

原创转转前端周刊第166期: 如何基于Multi-Agent架构打造AI前端工程师

最近在做智能缺陷查重的项目过程中，遇到一个有意思的问题，尽管采用了精心设计的Prompt和强大的LLM，模型在返回重复缺陷时，仍产生数据不一致的“拼凑”结果。这里将问题分析与调试过程记录下来，与大家共享。客服知识库是一个集中管理和存储与客服相关的信息和资源的系统，在自研知识库上线之前，得物采用的承接工具为第三方知识库系统。伴随着业务的发展，知识的维护体量、下游系统的使用面临的问题愈发明显，而当前的第三方采购系统，已经较难满足内部系统间高效协作的诉求，基于以上业务诉求，我们自研了一套客服知识库。

2025-08-25 09:01:38 395

原创前端安全防御策略

XSS（Cross-Site Scripting，跨站脚本攻击）是一种常见的Web安全漏洞，攻击者通过在网页中注入恶意脚本，当其他用户浏览该页面时，脚本会在用户浏览器中执行，从而达到攻击目的。攻击者的手段在不断进化，我们作为前端开发人员，要持续紧绷”安全“这根弦，不仅要创造流畅的用户体验，更要成为用户数据安全的守护者。CSRF（Cross-Site Request Forgery，跨站请求伪造）是一种Web安全漏洞，攻击者利用用户已登录的身份，在用户不知情的情况下，以用户的名义执行非预期的操作。

2025-08-19 09:01:30 857

原创转转前端周刊第165期: CodeBuddy AI Coding 企业场景落地实践与思考

AI CODING 工具在过去的几年高速发展里，根据 GitHub 2025年第一季度开发者调查报告，全球已有超过 1200 万开发者在使用 AI CODING 工具，相比 2024年增长140%，给一线开发者带来巨大的效率提升，而 CodeBuddy 是腾讯自研提供的 AI CODING 工具，过去1年多以来帮助腾讯 5万+ 一线开发者提升编码效率，编码时长缩短 40%，AI 代码生成占比超 43%，同时也不断赋能腾讯外部一线开发者，帮助他们提升编码效率。Rsdoctor 1.2 版本已经发布啦。

2025-08-18 09:01:45 424

转载「快递包裹」视角详解OSI七层模型

1.OSI模型每层对应的功能及协议详解：【https://download.csdn.net/blog/column/12586693/141336860#3.%20OSI%E6%A8%A1%E5%9E%8B%E6[]%AF%8F%E5%B1%82%E5%AF%B9%E5%BA%94%E7%9A%84%E5%8A%9F%E8%83%BD%E5%8F%8A%E5%8D%8F%E8%AE%AE%E8%AF%A6%E8%A7%A3】在确认下单后，我们往往会关心，我们的订单在某一时刻是什么状态，包裹到了哪里。

2025-08-12 09:00:56 35

原创转转前端周刊第164期:AI在实际生成环境中的提效实践

本文分享了我们团队一次极具代表性的实践：面对一个代码量超3000行、包含数十个平台适配分支的“规格面板”核心组件，我们引入AI开发工具 Cursor 结合 Claude 模型，成功在10天内完成了向ICE架构的全面重构，实现了跨端复用。随着AI时代的到来，各类AI工具层出不穷，业界都在探索一套完整的AI加成的提效方案，我们团队基于自身特色，利用起团队沉淀好的历史知识库，落地了一套深度结合AI的工作流，用AI武装研发团队，实现研发效率的提升。我们会对内容进行筛选和审核，保留你的推荐人署名，分享给更多的人。

2025-08-11 09:01:16 325

转载从“v我50”到“疯狂星期四”：HTTPS如何用47天寿命的证书挡住中间人

而且又涉及到密钥更新和废除的问题。在加密时，将明文数据转化为大整数，然后用接收方的公钥（包含两个大质数的乘积等信息）按照一定的数学规则进行运算，得到密文。以 AES算法为例，它将明文数据按照一定的块大小（通常是 128 位）进行分组，然后通过多轮复杂的运算（包括字节替换、行移位、列混淆和轮密钥加等操作），最终将明文转换为密文，也可使用同样的方法将密文转换为明文。经过上述的介绍，HTTPS证书的验证过程已经基本介绍完了，而在实际通信过程中对称加密的密钥E1并不是由Client生成然后传输给Server的。

2025-08-05 09:02:01 43

原创转转前端周刊第163期:如何用AI Coding和Claude Code提升开发效率

关于AI Coding这个话题，其实一直被持续的讨论，同时相关的工具和产品都在不断的演进，包括各类的Copilot插件、集成AI的IDE以及一些Remote的AI Agent，伴随着也开始讨论AI Coding会不会替代程序员（可能Junior Engineer为主）；但是从我们当前身边的实践来看，对于AI Coding的效果和跟个人日常coding工作的结合度的情况可能会存在不同的反馈和声音，有很爽的，有爽了几次的，有一直用着但是可能也说不出滋味的，也有浅尝辄止的。

2025-08-04 09:00:58 303

原创 iOS微距拍照大揭秘：为什么你的App近距离总是拍不清？

但在实际体验中，仍然会发现部分机型（iPhone 12 Pro Max）在近距离拍摄时，成像效果依然不如13 Pro及后续Pro/Pro Max机型（即 iPhone 13 Pro、13 Pro Max 及更高版本的 Pro/Pro Max 系列）清晰，甚至清晰度还不如更早的 iPhone 11 Pro Max。微距能力的不足，直接影响了用户的沟通效率和交易体验。传感器尺寸越大，裁剪系数越小。优化后，近距离拍摄的清晰度大幅提升，随着拍摄距离的变化可自动切换摄像头，始终保持清晰的拍摄效果，体验接近系统相机。

2025-07-29 09:00:27 1001

原创转转前端周刊第162期:2025 AI Coding非共识报告

它将模型、插件、知识库（RAG）、工作流等核心功能解构成透明、可控、可替换的模块化组件，赋能开发者成为“AI基础设施的架构师”，为构建严肃、可扩展、自主可控的AI应用提供了一套工业级的解决方案。长久以来，编程被定义为一种严谨的、逻辑驱动的活动，是将人类意图转化为机器可执行的、确定性指令的过程。本文主要聚焦于AI实践应用，首先从实操讲起（可直接复刻），然后再是实践背后的设计及思考，接着列举了团队在生产中的实践案例，最后谈谈感想展望。我们会对内容进行筛选和审核，保留你的推荐人署名，分享给更多的人。

2025-07-28 09:00:38 439

原创谁说前端改动看不出影响范围？我用 Cursor 找到了隐藏炸弹

于是我们设计了一个 Prompt 模板，用角色扮演 + 问题引导的方式，把 Cursor 带入“有经验的前端 + QA 工程师”这个角色里。但它们无法告诉你：你把 price 的单位从“元”改成了“分”，这是一个高风险的语义变更，所有调用方的数据源头都必须同步调整，否则将导致灾难性的金额展示错误。它虽然无法替你完成测试，但却能像一个可靠的 Reviewer 一样，帮你划定合理的测试范围，甚至在你遗漏时提醒：“这里也可能受影响，别忘了。这些“意外”，大概是每个维护老项目的前端都经历过的。

2025-07-22 09:01:21 912

原创微信小程序 Skyline 渲染引擎解析：如何突破 WebView 的性能天花板

页面会运行在同一个渲染引擎实例下，因此页面占用内存能够降低很多，还能做到更细粒度的页面间资源共享（如全局样式、公共代码、缓存资源等）。对于长列表的优化，通常离不开按需渲染，即理想状态下仅渲染在屏可视区域节点，超出可视区域的节点及时进行回收。持续优化的性能和扩展能力，让小程序开发更灵活高效。机制（仅渲染视口内节点）+ 分块光栅化，首次渲染耗时减少 50%，滑动时 GPU 加速光栅化，避免白屏和视觉撕裂。渲染线程专注样式计算、布局等，不受 JS 阻塞，可持续处理动画、滚动等渲染任务，确保用户操作流畅。

2025-07-15 09:00:34 909

原创转转前端周刊第160期:让AI帮你做前端自动化测试

本文针对Agent框架的三个主流协议进行介绍，包括MCP协议——解决AI Agent和外部工具交互问题；AG-UI协议——解决AI Agent与前端应用之间的交互标准化问题。随着AI应用的蓬勃发展，AI相关的规范和标准如协议开始出现在大众眼前，本文主要介绍其产生背景、实现思路、在AI应用中实践。如果你有发现一些精华文章想和更多人分享，可以点击我们的公众号名称，将文章链接和你的解读文案发给我们！我们会对内容进行筛选和审核，保留你的推荐人署名，分享给更多的人。最近明显感觉到，大厂对表格的关注度越来越高。

2025-07-14 09:01:34 193

原创转转前端周刊第159期:MCP 在蚂蚁前端的落地之旅

整个体系正在不断迭代，然而我们所见证的：它并不是简单的提效，而是“放大” —— 即原来做得差的，现在会更差， ⚠️ AI 代码的副作用，比你想的要严重得多。第二部分将为大家介绍 MCP 在蚂蚁的落地进展，蚂蚁是如何使用的 MCP，目前的落地进展到了哪里。本文基于M站首页重构项目中的一个真实需求，讲述如何借助 AI编程工具 Cursor + 结构化 Prompt 设计，完成从 Rax 到 React 的组件迁移、DX 到 React 的跨端重写，并实现业务逻辑优化与工程规范落地的全过程。

2025-07-07 09:01:42 360

原创 Cursor + MCP：双剑合璧，解锁极致编程效率

Cursor 作为前沿的 AI 编程工具，结合 MCP 的上下文协议，将持续推动开发模式的革新，让开发者更专注于创造性工作，而非繁琐的代码细节。Cursor + MCP 的协同，不仅是工具的结合，更是开发范式的升级。它们的融合让 AI 真正理解开发者的意图，使编程更高效、更智能，为软件工程带来全新的可能性。是OpenAI在2023年6月首次提出的技术方案，它旨在当模型在对话过程中识别到用户请求需要特定操作时，通过调用预定义的外部函数接口实现复杂操作，从而打通了大模型与外部服务之间的数据通道。

2025-07-01 09:02:27 1131 1

原创 Android图片编辑器的自研之路：从需求痛点到技术突破

针对这些问题，我们开发了包含图像标注框选、多图批量编辑、图片旋转调整、操作历史管理和边框颜色切换等核心功能的编辑器，通过精心设计的交互界面和底层技术实现，使一线人员能够通过简单直观的操作高效完成工作，显著提高了仓库整体运营效率。当用户在图片间切换时，系统会自动保存当前图片的所有编辑状态（包括已添加的框线、旋转角度等），并恢复目标图片的历史编辑状态。在仓内作业过程中，一线人员需要频繁对商品进行拍照、标注和信息录入，传统的流程往往需要多次切换操作界面，在质检、入库场景，每一个新增的操作步骤，都是成本的增加。

2025-06-30 09:00:16 638

原创转转前端周刊第158期:关于 AI 编程的一些浅思

首先，我要学习一下绝大多数同行的风格，“邀功”：如果简单对应2024年底做的今年前瞻的话，我们看到OpenAI和微软越来越公开化的“渐行渐远”，看到AI Coding和AI搜索的重磅级应用，无论是Cursor为代表的IDE，还是各家的Deep Research。为了重新对 AI 编程建立宏观认知，我收集整理了目前比较主流的一些框架或工具（这篇文章只是对大脑印象的即兴整理，可能会有所遗漏，仅供参考）。如果你有发现一些精华文章想和更多人分享，可以点击我们的公众号名称，将文章链接和你的解读文案发给我们！

2025-06-29 22:52:20 344

原创转转前端周刊第157期: AI+Code驱动的M站首页重构实践从技术债务到智能化开发

同时腾讯视频深度参与 Oteam 并推出了 KuiklyBase，涵盖 Kotlin/Native 的鸿蒙适配、组件生态、鸿蒙编译、堆栈还原、工具链相关建设，助力业界 KMP 开发者提高鸿蒙适配效率。面对M站技术栈陈旧、开发效率低下的挑战，我们通过楼层动态化架构重构和AI智能脚手架，实现了70%首页场景的标准化覆盖 + 30%的非标场景的研发提速，开发效率分别提升90%+与40%+。如果你有发现一些精华文章想和更多人分享，可以点击我们的公众号名称，将文章链接和你的解读文案发给我们！

2025-06-23 09:00:47 344

原创你和“安全上线”之间，可能就差这 5% 的核心代码覆盖率

早期我们的方案是全量插桩，统计，后端通过mapping文件的比对计算，得出增量的代码变更及覆盖记录，同时插桩只能通过配置包名，类，方法进行过滤，其他的代码都会被插桩，影响测试时应用的运行性能表现，同时这种方案后端计算量比较大，查看覆盖率的统计结果需要耗时几分钟，使用体验不佳。接入过程，涉及参数配置，diff 代码接口请求，插桩过滤，插桩，mapping 文件写入等环节，经常会遇到参数配置异常，接口请求数据异常，mapping 写入异常等，编译流程比较长，缺少有效信息，很难排查问题发生的环节。

2025-06-20 09:00:35 1089

原创转转前端周刊第156期: 聊聊AI应用架构演进

本文通过一条AI应用架构演进的路线（图来自《AI Engineering》），来描述和记录每一次演进增加的架构内容以及概述涉及到的相关技术，从而帮助自己以及可能有需要的同学按照一定的脉络整理LLM和AI应用快速发展下不断迸发的新设计和新技术，再者为后续可能的关于AI应用架构和传统应用架构的异同的主题探讨做些调研。当前技术部门推行研发自测的核心诉求，其核心诉求在于通过建立可信的质量保障机制释放测试资源，以此承接更多的业务需求，提升需求吞吐率。我们会对内容进行筛选和审核，保留你的推荐人署名，分享给更多的人。

2025-06-16 09:01:22 503

原创转转前端周刊第155期: Anthropic CPO传统程序员正在谢幕

Taro鸿蒙方案支持开发者使用React DSL来快速开发高性能原生鸿蒙应用，让 Taro具备了一份代码同时跨鸿蒙、小程序、H5、React Native 多端的能力，同时Taro支持类Web的开发范式，可以让开发者以熟悉的方式来开发鸿蒙应用，大幅降低鸿蒙开发门槛，并且存量的Taro业务也能快速转成鸿蒙原生应用，节约大量研发成本。这一点让我大吃一惊。我越来越觉得 2025 年是 AI 编程的重要一年，也许今年，传统的编程方式就彻底要被终结了。我们会对内容进行筛选和审核，保留你的推荐人署名，分享给更多的人。

2025-06-09 09:00:42 331

原创转转前端周刊第154期: AI编程助手规则调优实战

从基础概念到高级技巧，文章全面介绍了 CursorRules 的结构、配置方法及最佳实践，并探讨了其在提升代码质量、协作效率以及个性化体验方面的巨大价值。目前公司编写测试用例为人工编写，存在手工编写用例的普遍痛点，例如：重新编写，费时费力，边界遗漏，兼容遗漏等。如果你有发现一些精华文章想和更多人分享，可以点击我们的公众号名称，将文章链接和你的解读文案发给我们！最近发现了一个新组合，写代码用Cursor，审核代码用CodeRabbit，让写代码和代码审核都变得更高效、更智能。

2025-05-26 09:01:15 196

原创转转前端周刊第153期: Cursor 内部工作原理

通过实现一套自动化收集模块级代码影响面分析的方案，我们可以更精准地评估版本需求发布对于系统整体稳定性的影响，从而提前确保重点模块能够得到有效的预警和监控，并创建相应的预案计划。本期，我们将介绍通过使用 MCP Server - Figma AI Bridge，自动将你的 Figma 设计稿转换为整洁的前端代码，并生成相应的网页。简单高效，无需复杂配置，跟随文中的步骤操作，即可体验智能化的设计交付。如果你有发现一些精华文章想和更多人分享，可以点击我们的公众号名称，将文章链接和你的解读文案发给我们！

2025-05-19 09:01:44 258

原创转转前端周刊第152期: 淘天自营前端开发的AI增效实践总结

近期 MCP 的热度持续上升，网上也是喷涌出大量相关文章，相信在不远的将来 MCP 将成为每个开发者必备的技能之一，非常值得投入时间学习一下。下面会通过简单的实践来带大家理解一下 MCP 的工作原理，以及展望下 MCP 在未来可能的一些应用场景。最近大家都在聊 MCP，发现有个最重要的点被忽略了：通过标准化协议，将工具提供方与应用研发者解耦，这一点带来的将是 AI Agent 应用研发范式的转移（类似 Web 应用研发的前后端分离）。本次更新带来了众多 AI 相关功能的增强，显著提升了开发者的工作效率。

2025-05-12 09:02:48 283

原创转转前端周刊第151期: 2025淘宝春晚互动小游戏技术方案揭秘

本文在详解工作流与Agent的技术选型标准、设计模式应用及实施要点的同时，也融入了我的实战心得与实践经验总结。文章从背景出发，详细介绍了为确保用户流畅体验所采取的关键技术措施，包括渲染性能优化、Eva.js框架升级至2.0版本、WebGL 2的应用以及伪3D场景的实现等。但现在，随着 AI 的爆炸式发展，它又开始扮演新的角色：美丽背后的大脑。它正在进入浏览器，进入前端，进入我们日常使用的 Web 应用程序。如果你有发现一些精华文章想和更多人分享，可以点击我们的公众号名称，将文章链接和你的解读文案发给我们！

2025-04-28 09:02:44 454

原创转转前端周刊第150期: 用 Cursor 打造工程化 AI 编程体系

以易览采集工作为例，当新增一个数据源的采集，开发人员需要根据数据源的特征，从现有的采集任务中找到类似的数据源，然后复制一些文件进行代码重写，尽管大部分的代码已经通过模块化封装可复用，但还是少不了需要创建不少新的文件、修改配置等操作。这时候，Cursor的项目规则就呈现出了它的适用性，下文我将通过引入规则让AI帮我生成代码的实践，验证其对整体开发工作效率的提升到底有多少。在对 Dify 进行压测时，首先要明确压测的目的，即了解系统在不同负载条件下的性能表现，找出可能存在的性能瓶颈，为后续的优化提供依据。

2025-04-23 09:00:19 415

原创转转前端周刊第149期: Cursor 在前端需求开发工作流中的应用

Rspack 的核心目标之一，是提供卓越的开发体验，并且能够与基于 webpack 的项目实现无缝集成，将迁移成本降至最低。通过将 Rspack 集成到 Next.js 中，不仅展示了 Rspack 在复杂项目中的适用性，还为 Next.js 用户提供了一个改善开发体验的替代方案。本文将探讨 V8 的内存管理机制，帮助你理解浏览器崩溃的根源，并学会如何优化内存使用，避免类似问题的发生。仅仅是围绕个人开发流程中的已有问题，分享如何使用 Cursor 来提升这部分的开发体验，在工作中持续保持好的节奏和状态。

2025-04-14 09:01:01 290

原创代码变更暗藏危机？代码影响范围分析为你保驾护航

🔍 在项目代码的影响范围分析中，我们不仅需要标记直接变更的文件，还需要向上传播变更影响，标记依赖于变更的父节点。通过这样的可视化展示，开发人员可以直观地了解本次迭代代码的开发，在整个项目中影响了哪些路由、组件或者文件等，清晰地知道代码变更影响的范围。（1）在构建项目依赖树时，解析项目的路由信息是关键一环，因为路由定义了页面或组件的组织结构，是依赖分析的重要起点。简单来说，代码影响范围指的是项目中修改、添加或删除的文件，以及这些变更中的函数或变量在被其他部分引用时可能引发的连锁反应。

2025-04-03 10:59:53 1217

原创转转前端周刊第148期: AI 编程神器 Cursor 十大使用技巧

随着人工智能技术的快速发展，检索增强生成（RAG）作为一种结合检索与生成的创新技术，正在重新定义信息检索的方式。文章详细介绍了框架的核心模块（如DataEngine、LayoutEngine、StateCenter等）、页面动态性实现方式、组件通信机制以及业务接入流程，并结合实际案例分析了布局方式多样性的问题及解决方案。FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快速创建固定布局或自由连线布局的流程，并提供一套交互的最佳实践, 很适合有明确输入和输出的可视化工作流。

2025-03-31 09:00:36 502

原创转转前端周刊第147期: Vite成为首个接入AI的构建工具

Model Context Protocol (MCP) 作为新兴的开放协议，旨在打破这一困境，为 AI 智能体构建一套通用的“语言”，实现跨平台、跨应用的无缝协作。本文深入解读 MCP 的技术原理、应用场景、生态现状与未来挑战，探讨 MCP 如何成为下一代智能应用的关键基础设施，并邀请您一同思考，MCP 将如何重塑 AI 的未来。Vite 作为新一代前端构建工具的佼佼者，再次走在了技术创新的最前沿，通过MCP协议实现了与AI的深度融合，为开发者带来前所未有的智能开发体验。

2025-03-24 09:00:39 343

原创转转前端周刊第146期: Vue 3.6 将带来这些重磅功能，更快、更强！

本文围绕直播团队在过去半年中基于AI技术在工程侧提效的探索展开，详细介绍了服务端、前端、数据科学、测试和数据研发等职能团队如何结合AI能力进行创新尝试。文章不仅总结了现阶段取得的阶段性成果，还深入分析了AI能力的优势与局限性，例如文本生成的涌现能力、固定思维过程以及对世界的有限理解等。本文将从快手流水线检查曾经面临的问题、Mulan 定位及演进思路、Mulan 流水线质效提升实践、总结及展望等几个方面，讲述 Mulan 在快手准入流水线检查质效提升上的实践思路。2、淘宝直播AI提效探索的一些心得。

2025-03-17 09:02:03 387

空空如也

空空如也