問題に直面したとき、最初にすべきことは考えることと分析することです。この思考習慣を脳に養成し、「問題の疑問の行き止まりでぼんやりする」ことに浸るのではなく、思考が停滞し、思考力が欠如している状態を次のように表現します：「なぜこうなるの！？」、「そうじゃないはず！？」、「理論的にはあり得ない！？」、「一体なぜ！？」、あるいはすぐに他の人に尋ねることです。問題は自分で独立して考えて解決することで最も多くの成果を得られ、最も深い思考が得られます。
パフォーマンス最適化#
すべてのパフォーマンス最適化の物語は、この図から始まります...
出典: 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 構築完了、ただし子リソース（画像、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 の例を提供しており、もし 3 つのコンポーネントがそれぞれいくつかの 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 内容を引き入れます：
<!-- 引入 -->
<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 よりもはるかに使いやすいです。ルール設定は host ファイルの書き方と一致し、ドメイン名のワイルドカードをサポートし、ファイルレベルの粒度で、簡単に開閉、切り替え、モバイルリクエストをプロキシできます。私がよく使ういくつかの設定は以下の通りです：
switchyomega は、プロキシ管理 / 切り替え、リクエスト転送を一体化したブラウザプラグインで、異なるプロキシ間で迅速に切り替えたり、リクエストを異なるプロキシに転送したりするのに便利です。
さまざまなシナリオモードをサポートしています：
- プロキシサーバー：例えば、私が使用している翻訳ソフトは小猫（Clash for Windows）で、switchomega を通じてプロキシサーバーを設定し、ポート番号を小猫の実行ポートに設定できます。
- 自動切り替えモード：さまざまな条件に基づいて、柔軟に指定されたプロキシサーバーに自動的に切り替えます。例えば、ドメイン名のワイルドカードを使用して、海外のウェブサイトへのトラフィックを小猫に転送し、国内のウェブサイトへのトラフィックは直接接続することで、より良いサーフィン体験を得ることができます。
- 直接接続：プロキシを使用せず、ネットワークリクエストが直接接続されることを意味します。
- システムプロキシ：他の拡張機能やオペレーティングシステム環境のプロキシ設定。
私はもう iTerms2 を使わない理由#
万能な推コミュニティで、より良いコマンドラインツールを見つけました。AI 機能を統合したスマートターミナル 👉 Warp、素晴らしいです：
ファイルを探す：
CLI コマンドの自動提示：
プロンプト生成コマンド（無料版は月 40 回）：
面白いこと#
iconfy#
iconifyは、オープンソースのアイコンセットで、さまざまなフレームワーク、css、html に埋め込むことができ、Figma や Sketch デザインソフトウェアのプラグインサポートも提供しています。大規模で包括的です。
color4bg#
color4bgは、さまざまなアートスタイルの背景を生成するクリエイティブなサイトで、非常に素晴らしいです！
私が適当にエクスポートした webm 形式のビデオ：
producthunt#
producthuntで新製品のトレンドを確認し、面白くて楽しい新しいものを優先的に体験できます。
dribbble#
dribbbleは、世界中のすべてのデザイナーの最終的な帰属地とされており、そこで多くのことを見て、自分のデザインや製品の目を養うのに役立ちます 😏
🍱#
free-bento-grid-generator bento、便当箱、この流行の便当箱レイアウトカード生成ツールです～
独立開発者ナビゲーションサイト#
Indie hackersは、独立開発者のためのナビゲーションサイトで、独立開発者が使用するツールのコレクションをカテゴリ別に収集し、初めて独立開発者がアプリケーションの提供速度を加速するのを助けることを目的としています。素晴らしいです、今のところ私は非常に必要としており、まだ始まったばかりです。
Google SEO#
web.devが Core Web Vitals の特集を提供し、フロントエンドアプリケーションのパフォーマンスを最適化する方法を学ぶことができ、google search centerは、ウェブサイトの SEO 最適化に関する知識を提供し、SEO 最適化分野の学習に役立ちます。
AITDK#
aitdkは、AI を活用した SEO で、説明を入力すると、TDK を生成します。SEO ランキングに影響を与える要因は非常に多く、これらの要因を非常に熟知し、AI の能力を利用して一つ一つ最適化することが重要です。このような能力を提供するプラットフォームも面白いです。
screen studio#
screen.studioは非常に素晴らしいです。公式サイトで紹介を見てください。Microsoft、Google、Vercel、Adobe などの大企業が使用している全能の録画クライアントソフトウェアです。