<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[FantasyBreaker的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/FantasyBreaker</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; FantasyBreaker]]></copyright><item><title><![CDATA[常用ES标准]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/136997750</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/136997750</guid><author>FantasyBreaker</author><pubDate>Sun, 24 Mar 2024 23:30:47 +0800</pubDate><description><![CDATA[判断对象是否有子鼠星，比hasOwnProperty()（obj=null时会报错）安全；13.字符串方法startsWith、endsWith、includes。2.对象方法Object.values()、Object.entries。类似于Object.keys()返回对象所有的键、值、键值对数组。3.字符串方法padStart()、padEnd()3.字符串trimStart()、trimEnd()10.数据结构Set、Map、Symbol。1.数组includes方法。12.模块化module。]]></description><category></category></item><item><title><![CDATA[正向代理和反向代理]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/136997473</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/136997473</guid><author>FantasyBreaker</author><pubDate>Sun, 24 Mar 2024 22:40:34 +0800</pubDate><description><![CDATA[*正向代理：**是一个位于客户端和目标服务器之间的服务器（代理服务器），为了从目标服务器取得内容，客户端向代理服务器发送一个请求并指定目标，然后代理服务器向目标服务器转交请求并将获得的内容返回给客户端。通过正向代理服务器访问目标服务器，目标服务器是不知道真正的客户端是谁的，甚至不知道访问自己的是一个代理。其实是代理服务器代理了目标服务器去和客户端进行交互，通过反向代理服务器访问目标服务器时，客户端是不知道真正的目标服务器是谁的，甚至不知道自己访问的是一个代理。正向代理作用主要是用于解决访问限制问题。]]></description><category></category></item><item><title><![CDATA[读书笔记（三十二）：代理与反射]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127319700</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127319700</guid><author>FantasyBreaker</author><pubDate>Mon, 17 Oct 2022 10:34:50 +0800</pubDate><description><![CDATA[js代理与反射]]></description><category></category></item><item><title><![CDATA[读书笔记（三十一）：Promise]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127303803</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127303803</guid><author>FantasyBreaker</author><pubDate>Thu, 13 Oct 2022 17:14:22 +0800</pubDate><description><![CDATA[promise]]></description><category></category></item><item><title><![CDATA[读书笔记（三十）：数组]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127302660</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127302660</guid><author>FantasyBreaker</author><pubDate>Thu, 13 Oct 2022 15:55:22 +0800</pubDate><description><![CDATA[js数组]]></description><category></category></item><item><title><![CDATA[读书笔记（二十九）：symbol]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127243632</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127243632</guid><author>FantasyBreaker</author><pubDate>Mon, 10 Oct 2022 14:56:15 +0800</pubDate><description><![CDATA[symbol]]></description><category></category></item><item><title><![CDATA[读书笔记（二十八）：解构赋值]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127238787</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127238787</guid><author>FantasyBreaker</author><pubDate>Mon, 10 Oct 2022 11:24:05 +0800</pubDate><description><![CDATA[解构赋值]]></description><category></category></item><item><title><![CDATA[读书笔记（二十七）：对象]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127229283</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127229283</guid><author>FantasyBreaker</author><pubDate>Sun, 09 Oct 2022 17:40:03 +0800</pubDate><description><![CDATA[js对象]]></description><category></category></item><item><title><![CDATA[读书笔记（二十六）：函数]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127222548</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127222548</guid><author>FantasyBreaker</author><pubDate>Sun, 09 Oct 2022 16:22:15 +0800</pubDate><description><![CDATA[js函数]]></description><category></category></item><item><title><![CDATA[读书笔记（二十五）：多行字符串]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127211927</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127211927</guid><author>FantasyBreaker</author><pubDate>Sat, 08 Oct 2022 17:47:57 +0800</pubDate><description><![CDATA[多行字符串]]></description><category></category></item><item><title><![CDATA[读书笔记（二十四）：块级作用域]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127015449</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/127015449</guid><author>FantasyBreaker</author><pubDate>Sat, 08 Oct 2022 16:23:55 +0800</pubDate><description><![CDATA[块级作用域]]></description><category></category></item><item><title><![CDATA[js删除对象属性]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/125386520</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/125386520</guid><author>FantasyBreaker</author><pubDate>Tue, 21 Jun 2022 10:45:19 +0800</pubDate><description><![CDATA[js删除对象属性]]></description><category></category></item><item><title><![CDATA[读书笔记（二十三）：代码整洁]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/124279306</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/124279306</guid><author>FantasyBreaker</author><pubDate>Sun, 24 Apr 2022 17:14:15 +0800</pubDate><description><![CDATA[一、有意义的命名
1.名副其实
选个好名称要花时间，但省下来的时间比花掉的多。注意命名，一旦发现有更好的名称，就换掉旧的。
变量、函数或类的名称应该已经答复了所有的大问题，它该告诉你，它为什么会存在，它做什么事，应该怎么用。如果名称需要注释来补充，那就不算是名副其实。
int d; // elapsed time in days
int elapsedTimeInDays;

选择提现本意的名称能让人更容易理解和修改代码。
2.避免误导
程序员必须避免留下掩藏代码本意的错误线索，避免使用与本意相悖的词。比如]]></description><category></category></item><item><title><![CDATA[文字省略样式]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/124327909</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/124327909</guid><author>FantasyBreaker</author><pubDate>Thu, 21 Apr 2022 17:55:38 +0800</pubDate><description><![CDATA[1.中英文效果区别
word-break:break-all; //只对英文起作用，以字母作为换行依据

word-wrap:break-word; //只对英文起作用，以单词作为换行依据

white-space:pre-wrap; //只对中文起作用，强制换行

white-space:nowrap; //强制不换行，都起作用

2.单行文字省略显示
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

注意：一定要指定容器的宽度]]></description><category></category></item><item><title><![CDATA[读书笔记（二十二）：前端安全]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/124254698</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/124254698</guid><author>FantasyBreaker</author><pubDate>Tue, 19 Apr 2022 11:08:24 +0800</pubDate><description><![CDATA[1.单页应用安全策略
单页应用采用前后端分离的设计方式，路由由前端管理，通过ajax进行通信，用户请求页面时，后端经常无法获取用户身份信息。

使用HTTPS来对传输内容（昵称、密码、token等）进行加密。
不要在URL query中传递敏感数据。
升级npm包，npm在6.0之后可以检测三方库隐患。

# 扫描所有依赖，列出依赖中有安全隐患的包
npm audit

# 把不安全的包升级到可兼容的版本
npm audit fix


响应头设置
Content-Security-Policy:设置应用是]]></description><category></category></item><item><title><![CDATA[读书笔记（二十一）：缓存]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/124250793</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/124250793</guid><author>FantasyBreaker</author><pubDate>Mon, 18 Apr 2022 17:02:54 +0800</pubDate><description><![CDATA[1.缓存分类
web缓存可以分为很多种，如数据库缓存、服务器缓存、CDN缓存、HTTP缓存等。
HTTP缓存是用于临时存储Web文档（HTML页面和图像），以减少服务器延迟的一种信息技术。使用的好处：

使网页加载和呈现速度更快。
由于减少了不必要的数据传输，因而可以节省网络流量和带宽。
减少服务器的负担。

浏览器缓存按位置可分为：内存缓存（memory cache）、硬盘缓存（disk cache）、service worker等。
浏览器的资源缓存可分为硬盘缓存和内存缓存两类。当首次访问网页时，资源文]]></description><category></category></item><item><title><![CDATA[读书笔记（二十）：函数式编程]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/124245174</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/124245174</guid><author>FantasyBreaker</author><pubDate>Mon, 18 Apr 2022 14:38:57 +0800</pubDate><description><![CDATA[用函数式代码取代面向过程式的代码的好处：

表达力更加清晰，通过函数的命名以及对函数进行原子拆分，能看出函数功能和执行过程。
利于复用，函数本身具有天然的复用能力。
利于维护，纯函数和幂等性可以保证输入相同输出相同，在维护和调试时能更加专注，减少共享带来的问题。

1.纯函数
函数的输入参数确定，输出结果是唯一确定的。不能修改外部变量，以避免造成副作用，不能调用random及发送异步请求等具有不确定性操作。
例：array的slice方法属于纯函数，它不对数组本身进行操作；array的splice方法不属于]]></description><category></category></item><item><title><![CDATA[读书笔记（十九）：框架性能]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/124148403</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/124148403</guid><author>FantasyBreaker</author><pubDate>Wed, 13 Apr 2022 16:40:26 +0800</pubDate><description><![CDATA[1.react的虚拟DOM diff
react主要通过使用高效diff算法、进行batch操作、摒弃脏检测更新方式来保证虚拟DOM diff算法和更新都能高效。
任何一个组件使用setState方法时，会被认为变‘脏’了，进而触发组件本身的重新渲染。因为react始终维护两套虚拟DOM，一套是更新后的，另一套是前一个状态的，可以通过对两套执行diff算法，找到需要的最小单元集，并应用在真实的DOM中。
react的大胆假设：

对DOM节点跨层级移动的情况忽略不计。
拥有相同类型的两个组件生成相似的树形结]]></description><category></category></item><item><title><![CDATA[读书笔记（十八）：性能优化]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/124143882</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/124143882</guid><author>FantasyBreaker</author><pubDate>Wed, 13 Apr 2022 13:53:38 +0800</pubDate><description><![CDATA[1.图片优化
除了传统的图片懒加载手段，还可以使用WebP图片格式替换。
WebP是Google开发的一种新的图片格式，它支持有损压缩、无损压缩和透明度，压缩后的文件大小比JPEG、PNG等都要小。所以可以节省带宽，减少页面载入时间，节省用户的流量。
由于可能存在兼容性问题，需要在替换之前进行兼容性试探：
const supportWebp = () =&gt; new Promise(resolve =&gt; {
	const image = new Image()
	image.onerror = (]]></description><category></category></item><item><title><![CDATA[读书笔记（十七）：性能监控和错误收集]]></title><link>https://blog.youkuaiyun.com/FantasyBreaker/article/details/124126283</link><guid>https://blog.youkuaiyun.com/FantasyBreaker/article/details/124126283</guid><author>FantasyBreaker</author><pubDate>Tue, 12 Apr 2022 17:30:11 +0800</pubDate><description><![CDATA[1.性能衡量指标

首次绘制时间：页面发生第一次绘制的时间点。
首次有内容绘制时间：指浏览器完成渲染DOM中第一部分内容（文本、图像或其他任何元素）的时间点，用户应该在视觉上有直观的感受。
首次有意义绘制时间：指页面关键元素的渲染时间。
首屏时间：进入页面之后，应用渲染完成整个屏幕（未滚动之前）内容的时间。
用户可交互时间：用户可以与应用进行交互的时间。一般认为是DOMReady的时间。

DOMContentLoaded指的是文档中DOM内容加载完毕的时间，HTML结构已经是完整的了。Load事件是指页面]]></description><category></category></item></channel></rss>