遇到问题的第一时间，应该是思考与分析，大脑中养成这种思考习惯，而不是沉浸在“问题疑惑的死胡同里原地发呆”，我用此形容思考停滞不前、缺乏思考力的状态：“为什么会这样呢！？”、“不应该呀？！”、“理论上不可能呀？！”、“我靠到底为啥呀！？”，抑或是马上去问别人，问题需要自己独立思考解决才能收获最多，思考最深刻

性能优化

一切有关性能优化的故事都要从这张图说起...

来源于 w3c:Navigation 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这些大公司都在用，太全能了