遇到问题的第一时间，应该是思考与分析，大脑中养成这种思考习惯，而不是沉浸在 “问题疑惑的死胡同里原地发呆”，我用此形容思考停滞不前、缺乏思考力的状态：“为什么会这样呢！？”、“不应该呀？！”、“理论上不可能呀？！”、“我靠到底为啥呀！？”，抑或是马上去问别人，问题需要自己独立思考解决才能收获最多，思考最深刻
性能优化#
一切有关性能优化的故事都要从这张图说起...
来源于 w3c Timing
初始化阶段#
navigationStart：当前页面创建时间，或上个页面 unload 时间
unloadEventStart：上个页面 unload 事件回调开始执行时间
unloadEventEnd：上个页面 unload 事件回调执行结束时间
redirectStart：重定向开始时间
redirectEnd：重定向结束时间
建连阶段#
fetchStart：fetch发出GET请求的时间
domainLookupStart：DNS 解析开始时间
domainLookupEnd：DNS 解析结束时间
connectStart：TCP 开始建连的时间
secureConnectionStart：对于 HTTPS，SSL 开始连接时间，否则为 0
connectEnd：TCP 建连完成的时间
请求阶段#
requestStart：请求发出时间
responseStart：从服务器端（或缓存、本地资源）开始接收响应的时间
responseEnd：响应结束时间
渲染阶段#
domLoading：文档开始加载时间，此时document.readyState = 'loading'
domInteractive：DOM 构建完成，但是子资源如 images、js、css、iframes 等还在加载中，此时document.readyState = 'interactive'，触发DOMContentLoaded事件
domContentLoadedEventStart：DOMContentLoaded事件回调开始执行的时间
domContentLoadedEventEnd：DOMContentLoaded事件回调执行结束的时间
domComplete：文档及其子资源均加载完成的时间，此时document.readyState = 'complete'，将触发load事件
loadEventStart：load事件回调开始执行的时间
loadEventEnd：load事件回调执行结束的时间
摸鱼收获#
一款插件优化项目中的 svg#
svg-chunk-webpack-plugin 是一款来自社区的 webpack 插件，零配置提供了 "代码分割"svg 的能力，从而优化项目中对 svg 引用；还能缩减设计提供 svg 代码体积。作者提供了 example 示例，假如有三个组件，分别引入了一些 svg 文件：
// news.js
import '../svgs/smiley-surprised.svg';
import '../svgs/popcorn.svg';
// components.js
import '../svgs/smiley-love.svg';
// home.js
import './component.js';
import '../svgs/gradient.svg';
import '../svgs/video.svg';
webpack 构建文件输入、输出配置：
entry: {
home: `${path.resolve(__dirname, './src/js/home.js')}`,
news: `${path.resolve(__dirname, './src/js/news.js')}`
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'js/[name].js'
},
最终将以入口文件为单元分别输出 svg 文件：
<!-- home.svg -->
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs><linearGradient id="24d5a"><stop offset="5%" stop-color="green"/><stop offset="95%" stop-color="gold"/></linearGradient></defs>
<symbol id="gradient"><rect width="100%" height="100%" fill="url(#24d5a)"/></symbol>
<symbol id="smiley-love" viewBox="0 0 48 48"><circle cx="24" cy="24" r="24" fill="#fbd971" class="e79d992bst0"/><path fill="#d8b11a" d="M24 41.1c-7.6 0-13.7-6.2-13.7-13.7 0-.6.5-1.1 1.1-1.1s1.1.5 1.1 1.1c0 6.3 5.1 11.4 11.4 11.4s11.4-5.1 11.4-11.4c0-.6.5-1.1 1.1-1.1s1.1.5 1.1 1.1c.2 7.6-5.9 13.7-13.5 13.7" class="8a82da16st1"/><path fill="#e64c3c" d="M14.3 12.2c.5-1.1 1.6-1.9 3-1.9 1.8 0 3.1 1.5 3.2 3.2 0 0 .1.4-.1 1.2-.3 1.1-.9 2-1.7 2.8l-4.4 3.8-4.3-3.8c-.8-.7-1.4-1.7-1.7-2.8-.2-.8-.1-1.2-.1-1.2.2-1.8 1.5-3.2 3.2-3.2 1.4 0 2.4.8 2.9 1.9"/><path fill="#e64c3c" d="M33.6 12.2c.5-1.1 1.6-1.9 3-1.9 1.8 0 3.1 1.5 3.2 3.2 0 0 .1.4-.1 1.2-.3 1.1-.9 2-1.7 2.8l-4.4 3.8-4.3-3.8c-.8-.7-1.4-1.7-1.7-2.8-.2-.8-.1-1.2-.1-1.2.2-1.8 1.5-3.2 3.2-3.2 1.3 0 2.4.8 2.9 1.9" data-name="Calque 1-2-2"/></symbol>
<symbol id="video" viewBox="0 0 16 16"><path fill="#ff004b" d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8m3.3 8.5-4.5 3c-.1 0-.1.1-.2.1s-.2 0-.3-.1c-.2-.1-.3-.3-.3-.5V5c0-.2.1-.4.2-.5.2-.1.3-.1.5 0l4.5 3c.2.1.3.3.3.5s-.1.4-.2.5"/></symbol>
</svg>
<!-- news.svg -->
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs/>
<symbol id="popcorn" viewBox="0 0 32 32"><path d="M15.4 4.5c-2 0-3.6 1.6-3.6 3.6 0 .5.4.9.9.9s.9-.4.9-.9c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8c0 .5.4.9.9.9s.9-.4.9-.9c0-2-1.6-3.6-3.6-3.6"/><path d="M29.1 9c0-1.3-.9-2.5-2.1-2.8-.4-2.4-2.4-4.2-4.9-4.2q-.9 0-1.8.3C19.4.9 17.9 0 16.1 0s-3.3.9-4.2 2.3Q11 2 10.1 2C7.6 2 5.6 3.8 5.2 6.2 4 6.5 3.1 7.7 3.1 9c0 .7.3 1.4.7 1.9-.5.5-.9 1.3-.9 2.1 0 .2 0 .4.1.6l3.2 16C6.4 31 7.7 32 9.1 32h13.8c1.4 0 2.7-1 2.9-2.4l3.2-16c0-.2.1-.4.1-.6 0-.8-.3-1.5-.8-2 .5-.5.8-1.2.8-2M9 30c-.5 0-.9-.3-1-.8l-3.2-16V13c0-.5.4-1 1-1H9v.1L10 30zm6 0h-3v-.1L11 12h4zm5 0h-3V12h4zm7-16.8-3.2 16c-.1.5-.5.8-1 .8H22l1-17.9V12h3c.6 0 1 .5 1 1zM26 10H6c-.6 0-1-.4-1-1s.4-1 1-1c.3 0 .5-.1.7-.3S7 7.3 7 7c0-1.7 1.3-3 3-3 .6 0 1.2.2 1.7.5.3.2.6.2.9.1q.45-.15.6-.6c.4-1.2 1.5-2 2.8-2s2.4.8 2.8 2q.15.45.6.6c.3.1.6.1.9-.1.5-.3 1.1-.5 1.7-.5 1.7 0 3 1.3 3 3 0 .3.1.5.3.7s.4.3.7.3c.6 0 1 .4 1 1s-.4 1-1 1"/></symbol>
<symbol id="smiley-surprised" viewBox="0 0 41 40"><g transform="translate(.216)"><circle cx="20" cy="20" r="20" fill="#ffd93b"/><path fill="#f4c534" d="M40 20c0 11-9 20-20 20-6.3 0-11.9-2.9-15.6-7.4C7.9 35.3 12.2 37 17 37c11 0 20-8.9 20-20 0-4.8-1.7-9.1-4.4-12.6C37.1 8.1 40 13.7 40 20"/><circle cx="20" cy="31.2" r="3.5" fill="#3e4347"/><path fill="#fff" d="M31.3 19.5c0 2.5-2 4.5-4.5 4.5s-4.5-2-4.5-4.5 2-4.5 4.5-4.5 4.5 2 4.5 4.5"/><circle cx="26.7" cy="19.5" r="2.1" fill="#3e4347"/><path fill="#5a5f63" d="M27.9 19.3c-.2.1-.5 0-.7-.2s-.2-.5 0-.7c.2-.1.5 0 .7.2.1.3.1.6 0 .7"/><path fill="#e9b02c" d="M32.4 13.8c.1.7.1 1.5-.1 2.1-.9-2.5-3.4-4-6.1-3.5-1 .2-1.5-1.1-.6-1.6.7-.4 1.4-.7 2.3-.7 2.1 0 4.1 1.6 4.5 3.7"/><path fill="#fff" d="M8.7 19.5c0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5-2-4.5-4.5-4.5-4.5 2-4.5 4.5"/><circle cx="13.3" cy="19.5" r="2.1" fill="#3e4347"/><path fill="#5a5f63" d="M12.1 19.3c.2.1.5 0 .7-.2s.2-.5 0-.7c-.2-.1-.5 0-.7.2-.2.3-.1.6 0 .7"/><path fill="#e9b02c" d="M7.6 13.8c-.1.7-.1 1.5.1 2.1.9-2.5 3.4-4 6.1-3.5 1 .2 1.5-1.1.6-1.6-.7-.4-1.4-.7-2.3-.7-2.1 0-4.1 1.6-4.5 3.7"/></g></symbol>
</svg>
入口 html 会引入相应 svg 内容，通过<use>元素在需要使用 svg-icon 的地方重复使用：
<!-- 引入 -->
<svg class="svgItem-icon">
<use xlink:href="#gradient"></use>
</svg>
<svg class="svgItem-icon">
<use xlink:href="#smiley-love"></use>
</svg>
<svg class="svgItem-icon">
<use xlink:href="#video"></use>
</svg>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs><linearGradient id="24d5a"><stop offset="5%" stop-color="green"/><stop offset="95%" stop-color="gold"/></linearGradient></defs>
<symbol id="gradient"><rect width="100%" height="100%" fill="url(#24d5a)"/></symbol>
<symbol id="smiley-love" viewBox="0 0 48 48"><circle cx="24" cy="24" r="24" fill="#fbd971" class="e79d992bst0"/><path fill="#d8b11a" d="M24 41.1c-7.6 0-13.7-6.2-13.7-13.7 0-.6.5-1.1 1.1-1.1s1.1.5 1.1 1.1c0 6.3 5.1 11.4 11.4 11.4s11.4-5.1 11.4-11.4c0-.6.5-1.1 1.1-1.1s1.1.5 1.1 1.1c.2 7.6-5.9 13.7-13.5 13.7" class="8a82da16st1"/><path fill="#e64c3c" d="M14.3 12.2c.5-1.1 1.6-1.9 3-1.9 1.8 0 3.1 1.5 3.2 3.2 0 0 .1.4-.1 1.2-.3 1.1-.9 2-1.7 2.8l-4.4 3.8-4.3-3.8c-.8-.7-1.4-1.7-1.7-2.8-.2-.8-.1-1.2-.1-1.2.2-1.8 1.5-3.2 3.2-3.2 1.4 0 2.4.8 2.9 1.9"/><path fill="#e64c3c" d="M33.6 12.2c.5-1.1 1.6-1.9 3-1.9 1.8 0 3.1 1.5 3.2 3.2 0 0 .1.4-.1 1.2-.3 1.1-.9 2-1.7 2.8l-4.4 3.8-4.3-3.8c-.8-.7-1.4-1.7-1.7-2.8-.2-.8-.1-1.2-.1-1.2.2-1.8 1.5-3.2 3.2-3.2 1.3 0 2.4.8 2.9 1.9" data-name="Calque 1-2-2"/></symbol>
<symbol id="video" viewBox="0 0 16 16"><path fill="#ff004b" d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8m3.3 8.5-4.5 3c-.1 0-.1.1-.2.1s-.2 0-.3-.1c-.2-.1-.3-.3-.3-.5V5c0-.2.1-.4.2-.5.2-.1.3-.1.5 0l4.5 3c.2.1.3.3.3.5s-.1.4-.2.5"/></symbol>
</svg>
<svg class="svgItem-icon">
<use xlink:href="#popcorn"></use>
</svg>
<svg class="svgItem-icon">
<use xlink:href="#smiley-surprised"></use>
</svg>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs/>
<symbol id="popcorn" viewBox="0 0 32 32"><path d="M15.4 4.5c-2 0-3.6 1.6-3.6 3.6 0 .5.4.9.9.9s.9-.4.9-.9c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8c0 .5.4.9.9.9s.9-.4.9-.9c0-2-1.6-3.6-3.6-3.6"/><path d="M29.1 9c0-1.3-.9-2.5-2.1-2.8-.4-2.4-2.4-4.2-4.9-4.2q-.9 0-1.8.3C19.4.9 17.9 0 16.1 0s-3.3.9-4.2 2.3Q11 2 10.1 2C7.6 2 5.6 3.8 5.2 6.2 4 6.5 3.1 7.7 3.1 9c0 .7.3 1.4.7 1.9-.5.5-.9 1.3-.9 2.1 0 .2 0 .4.1.6l3.2 16C6.4 31 7.7 32 9.1 32h13.8c1.4 0 2.7-1 2.9-2.4l3.2-16c0-.2.1-.4.1-.6 0-.8-.3-1.5-.8-2 .5-.5.8-1.2.8-2M9 30c-.5 0-.9-.3-1-.8l-3.2-16V13c0-.5.4-1 1-1H9v.1L10 30zm6 0h-3v-.1L11 12h4zm5 0h-3V12h4zm7-16.8-3.2 16c-.1.5-.5.8-1 .8H22l1-17.9V12h3c.6 0 1 .5 1 1zM26 10H6c-.6 0-1-.4-1-1s.4-1 1-1c.3 0 .5-.1.7-.3S7 7.3 7 7c0-1.7 1.3-3 3-3 .6 0 1.2.2 1.7.5.3.2.6.2.9.1q.45-.15.6-.6c.4-1.2 1.5-2 2.8-2s2.4.8 2.8 2q.15.45.6.6c.3.1.6.1.9-.1.5-.3 1.1-.5 1.7-.5 1.7 0 3 1.3 3 3 0 .3.1.5.3.7s.4.3.7.3c.6 0 1 .4 1 1s-.4 1-1 1"/></symbol>
<symbol id="smiley-surprised" viewBox="0 0 41 40"><g transform="translate(.216)"><circle cx="20" cy="20" r="20" fill="#ffd93b"/><path fill="#f4c534" d="M40 20c0 11-9 20-20 20-6.3 0-11.9-2.9-15.6-7.4C7.9 35.3 12.2 37 17 37c11 0 20-8.9 20-20 0-4.8-1.7-9.1-4.4-12.6C37.1 8.1 40 13.7 40 20"/><circle cx="20" cy="31.2" r="3.5" fill="#3e4347"/><path fill="#fff" d="M31.3 19.5c0 2.5-2 4.5-4.5 4.5s-4.5-2-4.5-4.5 2-4.5 4.5-4.5 4.5 2 4.5 4.5"/><circle cx="26.7" cy="19.5" r="2.1" fill="#3e4347"/><path fill="#5a5f63" d="M27.9 19.3c-.2.1-.5 0-.7-.2s-.2-.5 0-.7c.2-.1.5 0 .7.2.1.3.1.6 0 .7"/><path fill="#e9b02c" d="M32.4 13.8c.1.7.1 1.5-.1 2.1-.9-2.5-3.4-4-6.1-3.5-1 .2-1.5-1.1-.6-1.6.7-.4 1.4-.7 2.3-.7 2.1 0 4.1 1.6 4.5 3.7"/><path fill="#fff" d="M8.7 19.5c0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5-2-4.5-4.5-4.5-4.5 2-4.5 4.5"/><circle cx="13.3" cy="19.5" r="2.1" fill="#3e4347"/><path fill="#5a5f63" d="M12.1 19.3c.2.1.5 0 .7-.2s.2-.5 0-.7c-.2-.1-.5 0-.7.2-.2.3-.1.6 0 .7"/><path fill="#e9b02c" d="M7.6 13.8c-.1.7-.1 1.5.1 2.1.9-2.5 3.4-4 6.1-3.5 1 .2 1.5-1.1.6-1.6-.7-.4-1.4-.7-2.3-.7-2.1 0-4.1 1.6-4.5 3.7"/></g></symbol>
</svg>
免费好用的浏览器录屏插件#
screenity 这款免费插件太好用了。界面友好，操作简便，功能强大。点击即可录制，再次点击结束录制，支持自由裁切、多种格式（gif、mp4、webm）下载。在平时开发中远程复现问题，录屏快速分享场景下提高效率
如何高效切代理#
lightproxy 是福报厂一款开源代理工具，比起 Proxyman/Charles 好（sha）用（gua）很多。规则配置与 host 文件写法一致，支持域名适配符，文件级粒度，可轻松开闭、切换、代理手机请求。我常用到的几种配置如下：
switchyomega 是一款集代理管理 / 切换、请求转发一体的浏览器插件，方便快速在不同代理器之间切换或转发请求到不同代理上
支持不同情景模式，如：
- 代理服务器：如，我使用的翻墙软件是小猫咪也即 Clash for Windows，那我就可以通过 switchomega 配置一个代理服务器，端口号配置为小猫咪运行端口即可
- 自动切换模式：根据多种不同条件，灵活自动切换到指定代理服务器上。如，我可以通过域名通配符将访问国外网站的流量转发到小猫咪，访问国内网站的流量直接连接，从而收获更好的冲浪体验～
- 直接连接：不使用任何代理，网络请求直连的意思
- 系统代理：其他扩展或操作系统环境的代理配置
我不再用 iTerms2 了，因为...#
我在万能的推社区发现了更好的命令行工具，一个集成 AI 能力的智能化 terminal 👉 Warp，牛逼无须多言：
找文件：
CLI 命令自动提示：
prompt 生成 Command（free 版 40 次 / 月）：
有趣的事#
iconfy#
iconify，开源图标集，支持不同框架、css、html 嵌入，还为 Figma、Sketch 设计软件提供插件支持，大而全
color4bg#
color4bg 能生成各种具有艺术特色的背景的创意站，简直是太秀了！
我随便导出的一个 webm 格式视频：
producthunt#
可以在 producthunt 查看新产品趋势，找到有趣好玩的各种新鲜事物优先体验
dribbble#
dribbble 号称是世界上所有设计师的最终归属地，在上面多看看，培养培养自己设计、产品眼神不错 😏
🍱#
free-bento-grid-generator bento，便当盒，这种流行的便当盒布局卡片生成工具～
独立开发者导航站#
Indie hackers 独立开发者导航站，分类别收集了独立开发者所用的工具集合，目的是帮助初入独立开发 er 加快应用交付速度，不错，现阶段我很需要，刚起步
Google SEO#
就像 web.dev 提供了 Core Web Vitals 专题学习优化前端应用性能，google search center 提供了网站 SEO 优化相关知识，可供 SEO 优化领域学习
AITDK#
aitdk，AI 助力 SEO，输入描述，生成 TDK。影响 SEO ranking 的因素非常多，我觉得得对这些因素非常熟悉了解之后，利用 AI 能力去逐项优化，提供这样一种能力的平台也是有搞头的
screen studio#
screen.studio 太牛逼了，直接去官网看介绍吧。一款全能录屏客户端软件，Microsoft、Google、Vercel、Adobe 这些大公司都在用，太全能了