<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[友人C君的博客]]></title><description><![CDATA[与 bug 不共戴天 ᕙ(⇀‸↼‵‵)ᕗ]]></description><link>https://blog.youkuaiyun.com/CWH0908</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; CWH0908]]></copyright><item><title><![CDATA[前端AI落地实战手册：从模型选型到系统驾驭]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/160400334</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/160400334</guid><author>CWH0908</author><pubDate>Wed, 22 Apr 2026 11:11:03 +0800</pubDate><description><![CDATA[Anthropic提出的开放协议，标准化AI应用与外部数据源、工具的交互。类比：AI世界的USB-C接口——任何MCP客户端都能调用任何MCP服务器暴露的能力。Skill是可复用的"AI能力包"，封装完成特定任务所需的知识、流程、工具和成功标准。通常以Markdown文件形式存在。：Prompt是一次性指令，Skill包含流程纪律——会引导AI按固定顺序执行多个步骤，每一步都有明确验证条件。在2026年，AI应用开发已迈入"AI原生"时代。]]></description><category></category></item><item><title><![CDATA[数组和对象常用遍历方式]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/159329152</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/159329152</guid><author>CWH0908</author><pubDate>Sun, 22 Mar 2026 00:23:35 +0800</pubDate><description><![CDATA[场景需求推荐 API数组需中断、高性能for或for...of数组执行副作用，不中断forEach数组转换（映射、筛选、归约）mapfilterreduce数组条件判断someeveryfind对象遍历自身可枚举属性forEachfor...of对象只需键或值对象需包含不可枚举或 Symbol 属性对象需要中途跳出for...of。]]></description><category></category></item><item><title><![CDATA[pnpm包管理器 详解]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/158807215</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/158807215</guid><author>CWH0908</author><pubDate>Sun, 08 Mar 2026 14:57:12 +0800</pubDate><description><![CDATA[pnpm 巧妙地结合了两种链接的优点：用硬链接解决磁盘空间问题，用软链接解决依赖结构问题，同时解决了磁盘空间浪费和幽灵依赖两大痛点。与npm和Yarn相比，pnpm在保持优秀生态兼容性的前提下，提供了更高的磁盘效率、更强的依赖隔离性和更严格的包管理。对于追求项目稳定性和开发体验的团队，pnpm无疑是一个理想的选择。]]></description><category></category></item><item><title><![CDATA[CJS、ESM、AMD 和 UMD 四种模块系统的详细对比]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/158797574</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/158797574</guid><author>CWH0908</author><pubDate>Sun, 08 Mar 2026 02:00:09 +0800</pubDate><description><![CDATA[CJS在 Node.js 生态中根深蒂固，但动态特性限制了现代前端优化；ESM是未来标准，提供静态分析和更好的性能，但需要适应新的语法和环境配置；AMD历史意义大于实用，已逐渐被 ESM 和打包工具替代；UMD作为兼容层，常用于库发布，但随着 ESM 普及，其地位可能下降。在实际开发中，新项目建议直接采用ESM；若开发通用库，可输出ESM + UMD以兼顾现代与老旧环境。]]></description><category></category></item><item><title><![CDATA[在浏览器中输入URL并按下回车后发生了什么？(延伸问题）]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/158745464</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/158745464</guid><author>CWH0908</author><pubDate>Fri, 06 Mar 2026 23:51:54 +0800</pubDate><description><![CDATA[DNS缓存是临时存储DNS查询结果的行为，以减少重复查询、提高响应速度。可能出现的层级：浏览器缓存、操作系统缓存、路由器缓存、本地DNS服务器缓存、代理服务器缓存等。查看和清除：浏览器：Chrome。]]></description><category></category></item><item><title><![CDATA[React Fiber 详解]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/158702057</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/158702057</guid><author>CWH0908</author><pubDate>Thu, 05 Mar 2026 19:01:12 +0800</pubDate><description><![CDATA[Fiber 的定义：React Fiber 是 React 16 引入的一种基于链表结构的可中断、带优先级的异步渲染架构，它将渲染任务拆分为多个单元，通过时间切片和优先级调度实现更流畅的 UI 更新。它既是一种底层数据结构（每个组件对应一个 Fiber 节点），也是一套可中断、可恢复、带优先级的任务调度机制。Fiber 让 React 能将渲染任务拆分成小单元，按需暂停、恢复或终止，避免长时间阻塞主线程。引入 Fiber 的原因（旧架构痛点）]]></description><category></category></item><item><title><![CDATA[[]与set,weakSet ，{}与map,weakMap的区别]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/158690408</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/158690408</guid><author>CWH0908</author><pubDate>Thu, 05 Mar 2026 10:39:26 +0800</pubDate><description><![CDATA[]]]></description><category></category></item><item><title><![CDATA[unpkg 与 npm 的基本介绍]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/131662210</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/131662210</guid><author>CWH0908</author><pubDate>Tue, 11 Jul 2023 16:54:53 +0800</pubDate><description><![CDATA[UNPKG是一个基于npm registry 的静态资源 CDN 服务，它可以快速获取和使用任何JavaScript包，无需安装任何软件或包。UNPKG可以从NPM仓库中获取任何包，支持直接在浏览器中使用和在Node.js中使用。UNPKG的优点是快速、简单和易用，特别适合于快速开发和测试。但是，由于UNPKG不支持版本锁定，可能会出现版本问题，此外，由于UNPKG是一个公共CDN服务，可能存在安全问题。]]></description><category></category></item><item><title><![CDATA[前端面试题型汇总（适合社招两-三年水平）]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/126448361</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/126448361</guid><author>CWH0908</author><pubDate>Sun, 21 Aug 2022 11:07:28 +0800</pubDate><description><![CDATA[随着社区流行技术的更新迭代以及工作经验的增加，对于前端开发，我有了新的理解。接下来我将整理出工作中常见的问题。]]></description><category></category></item><item><title><![CDATA[前端性能优化]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/124439747</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/124439747</guid><author>CWH0908</author><pubDate>Wed, 27 Apr 2022 01:25:06 +0800</pubDate><description><![CDATA[如何了解当前页面的性能状况


通过Chrome浏览器的Lighthouse和performance功能面板查看资源数据



DCL（DOMContentLoaded），DOM解析完毕。
	FP（First Paint），表示渲染出第一个像素点。FP一般在HTML解析完成或者解析一部分时候触发。
	FCP（First Contentful Paint），表示渲染出第一个内容，这里的“内容”可以是文本、图片、canvas。
	FMP（First Meaningful Paint），首次渲染有意义的内容的时间]]></description><category></category></item><item><title><![CDATA[NPM 发布Vue组件/插件流程]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/121719197</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/121719197</guid><author>CWH0908</author><pubDate>Sat, 04 Dec 2021 22:40:47 +0800</pubDate><description><![CDATA[1: 首先进入npm官网申请账号（需要邮箱验证通过后才可发布npm包）npmhttps://www.npmjs.com/

2：在本地命令行通过 npm login 进行本地登录

3：在自己需要对外发布的文件夹内通过命令 npm publish 进行发布



注意点：

ERR! code E403 npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/itheima-toolscxs - Forbid
...]]></description><category></category></item><item><title><![CDATA[Object.defineProperty和Object.freeze、Object.seal的区别]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/121407070</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/121407070</guid><author>CWH0908</author><pubDate>Thu, 18 Nov 2021 18:22:14 +0800</pubDate><description><![CDATA[对象是由多个名/值对组成的无序的集合。对象中每个属性对应任意类型的值。
定义对象可以使用构造函数或字面量的形式：


var obj = new Object;
obj.name = "张三";  //添加描述
obj.say = function(){};  //添加行为

或

var obj = {
  name: "张三",
  say: function(){

  },
};


除了以上添加属性的方式，还可以使用Object.defineProperty定义新属性或修改原有的属性。

1.1 ]]></description><category></category></item><item><title><![CDATA[Charles for mac/windows 安卓端 代理及转发]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/119798654</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/119798654</guid><author>CWH0908</author><pubDate>Thu, 19 Aug 2021 12:51:58 +0800</pubDate><description><![CDATA[1 给本机安装根证书





2 安卓端的wifi设置到提示的ip及其端口，安装证书后，此时安卓端请求能被Charles代理解析到









访问 chrl.pro/ssl 进行安卓端的证书安装（建议chrome，访问网址即自动下载安装证书）





3 进行域名转发，Map Remote














...]]></description><category></category></item><item><title><![CDATA[项目的性能优化]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/118438092</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/118438092</guid><author>CWH0908</author><pubDate>Sat, 03 Jul 2021 16:50:30 +0800</pubDate><description><![CDATA[图片的优化


base64
首先盲目使用base64并不能带来性能的优化，首先图片转成base64之后，体积会增大1/3，虽然减少了图片带来的http请求，但如果base64体积过大，会造成html文件体积臃肿，适得其反。在webpack配置上，默认图片转成base64的体积一般都是3k以内，所以对小图进行base64转码是优化http请求，保证页面加速渲染，加快页面加载速度。

svg
小图除了可以使用base64之外，还能使用svg格式的文件来取代图形字体存在本地，其中svg的效果更优，因为是矢量图不]]></description><category></category></item><item><title><![CDATA[关于React的setState]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/118402414</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/118402414</guid><author>CWH0908</author><pubDate>Fri, 02 Jul 2021 01:08:41 +0800</pubDate><description><![CDATA[前言

在React16.8之前，React通过this.state来访问state，通过this.setState()方法来更新state。当this.setState()被调用的时候，React会重新调用render方法来重新渲染UI。state是React中的重要概念。React是通过状态管理来实现对组件的管理。那么，React是如何控制组件的状态，又是如何利用状态来管理组件的呢？

一、合成事件中setState

在jsx中常见的onClick、onChange这些都是合成事件


class A]]></description><category></category></item><item><title><![CDATA[2021-07-02]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/118402243</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/118402243</guid><author>CWH0908</author><pubDate>Fri, 02 Jul 2021 01:01:04 +0800</pubDate><description><![CDATA[React核心开发团队一直都努力地让React变得更快。在React中可以用来优化组件性能的方法大概有以下几种:

组件懒加载(React.lazy(...)和&lt;Suspense /&gt;)
	Pure Component
	shouldComponentUpdate(...){...}生命周期函数
本文还会介绍React16.6加入的另外一个专门用来优化函数组件(Functional Component)性能的方法:React.memo。

无用的渲染

组件是构成React视图的一个基本单元。.]]></description><category></category></item><item><title><![CDATA[ES5继承和ES6继承及其区别]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/118314211</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/118314211</guid><author>CWH0908</author><pubDate>Mon, 28 Jun 2021 23:46:46 +0800</pubDate><description><![CDATA[ES5继承分别有以下几种

原型链继承
通过将对象的__proto__指向被继承构造函数的protopyte，使得新的对象在寻找属性和方法的时候能够通过__proto__向上查找原型链，用于定义实例间共享的属性或方法。这种方案最大问题就是子类无法通过父类创建私有属性。


// 示例:
function Parent() {
    this.name = ['写代码像蔡徐抻'] 
}
Parent.prototype.getName = function() {
    return this.name.]]></description><category></category></item><item><title><![CDATA[Web 安全]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/118276509</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/118276509</guid><author>CWH0908</author><pubDate>Sun, 27 Jun 2021 17:08:56 +0800</pubDate><description><![CDATA[XSS攻击
	

跨站脚本攻击（Cross Site Script）

XSS的重点不在于跨站点，而在于脚本的执行。那么XSS的原理是：
恶意攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面的时候，那么嵌入到web页面中script代码会执行，因此会达到恶意攻击用户的目的。那么XSS攻击最主要有如下分类：反射型、存储型、及 DOM-based型。 反射性和DOM-baseed型可以归类为非持久性XSS攻击。存储型可以归类为持久性XSS攻击。

反射型

反射型xss一般指攻击者通过..]]></description><category></category></item><item><title><![CDATA[redux,react-redux,redux-saga,dva的区别与联系]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/118249011</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/118249011</guid><author>CWH0908</author><pubDate>Sat, 26 Jun 2021 14:38:26 +0800</pubDate><description><![CDATA[【redux】

1、定位：它是将flux和函数式编程思想结合在一起形成的架构；

2、思想：视图与状态是一一对应的；所有的状态，都保存在一个对象里面；

3、API：

store：就是一个数据池，一个应用只有一个；　　

state：一个 State 对应一个 View。只要 State 相同，View 就相同。

action：State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 Vi.]]></description><category></category></item><item><title><![CDATA[React 服务端渲染 & umi服务端渲染]]></title><link>https://blog.youkuaiyun.com/CWH0908/article/details/118147080</link><guid>https://blog.youkuaiyun.com/CWH0908/article/details/118147080</guid><author>CWH0908</author><pubDate>Wed, 23 Jun 2021 11:18:20 +0800</pubDate><description><![CDATA[react 服务端渲染原理不复杂，其中最核心的内容就是同构。

node server 接收客户端请求，得到当前的req url path,然后在已有的路由表内查找到对应的组件，拿到需要请求的数据，将数据作为 props 、context或者store 形式传入组件，然后基于 react 内置的服务端渲染api renderToString() or renderToNodeStream() 把组件渲染为 html字符串或者 stream 流, 在把最终的 html 进行输出前需要将数据注入到浏览器端(注.]]></description><category></category></item></channel></rss>