遇到問題的第一時間，應該是思考與分析，大腦中養成這種思考習慣，而不是沉浸在 “問題疑惑的死胡同裡原地發呆”，我用此形容思考停滯不前、缺乏思考力的狀態：“為什麼會這樣呢！？”、“不應該呀？！”、“理論上不可能呀？！”、“我靠到底為啥呀！？”，抑或是馬上去問別人，問題需要自己獨立思考解決才能收穫最多，思考最深刻
性能優化#
一切有關性能優化的故事都要從這張圖說起...
來源於 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>
免費好用的瀏覽器錄屏插件
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 這些大公司都在用，太全能了