本周黑板报 #3

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

性能优化

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

来源于 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 文件：

Copy
// news.js
import '../svgs/smiley-surprised.svg';
import '../svgs/popcorn.svg';

Copy
// components.js
import '../svgs/smiley-love.svg';

Copy
// home.js
import './component.js';

import '../svgs/gradient.svg';
import '../svgs/video.svg';

webpack 构建文件输入、输出配置：

Copy
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 文件：

Copy

<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>


Copy

<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>


入口 html 会引入相应 svg 内容，通过<use>元素在需要使用 svg-icon 的地方重复使用：

Copy


<use xlink:href="#gradient"></use>


<use xlink:href="#smiley-love"></use>


<use xlink:href="#video"></use>

<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>



<use xlink:href="#popcorn"></use>


<use xlink:href="#smiley-surprised"></use>

<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>


免费好用的浏览器录屏插件

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 这些大公司都在用，太全能了