2022_02_25

8569 ワード
TIL: Today I Learned テキストリンク
じかんそくていほう

  • console.time(”keyword”)

  • console.timeEnd(”keyword”)
  • timeとtimeEndは()内の値が同じでなければカウントできません.

  • const start = performance.now();

  • const end = performance.now();
  • console.測定はlog(end-start)と同じ方法で行った.
    • FileReader

  • Browserは偽urlを生成することができる.

  • ブラウザで作成したurlは有効ですが、他のブラウザでは存在しません.

  • 上記機能により、storageを介さずに画像previewを表示することができる.
    :画面にのみ画像が表示され、ストレージにアップロードされません.

  • この場合,偽urlを生成した画像をFor Moonにアップロードすると,写真の数に応じて要求されるため,時間消費が増加する.

  • そのため、この場合、Promise.all()を使用してリクエストを送信します.

  • この方法を使用すると、ストレージのコストと早期到着の速度を向上させることができます.

  • Blob:サイズの大きいファイルタイプを指します.
    • PromiseAll
  • 基本文法:Promise.all([])
    要求は
  • 配列であるため、結果値も配列に入ります.
  • すべての処理が同時に発生する.
  • で待っていたのもPromiseallで同時に発生します.(すべてのシナリオの各シナリオを待つのではなく、すべてのシナリオ自体を待つ)
  • 完了:Promiseで処理が完了した
  • 却下:
    • 処理エラー状態
  • pending:待機処理状態
    • 複数の
  • Promiseを要求するのと比較して(ここに示すように)Promise.allを出すのがもっと速い.
    • ** Promise.race()の機能もあります.
    const results = await Promise.all(
      ["철수", "영희", "훈이"].map(
        (el) =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve(el);
            }, 3000);
          })
      )
    );
    console.log(results);
    Preload
  • は、事前にデータを受信し、ユーザが入ったときに
    • を迅速に表示する.
  • useEffectを使用して画像()ラベルを生成します.
    • 親ラベルのchild追加として
  • userefを使用します.
  • srcにループを打った後、onload時にSTAITZ値を与えます.
    useEffect(() => {
    const img = new Image();
    img.src = url;
    img.onload = () => {
      setImgTag(img);
    };
  }, []);

  const onClickImagePreLoad = () => {
    if (imgTag) divRef.current?.appendChild(imgTag);
  };

<div ref={divRef}></div>
<button onClick={onClickImagePreLoad}>이미지 프리로드</button>
    • lazyLoad
  • は、いくつかの操作を実行するときに、
    • にデータを降格する.
  • ライブラリは簡単に使用できます.
    • 拡張子をwebpに変更すると、画像のダウンロード性能が向上します.
  • 画像のアップロードに役立つライブラリ
  • react-beautiful-dnd
  • react-dropzone library
  • react-avatar-editor
  • Google PageSpeedInsightsでページの実行速度を分析できます.
    • algorithm
    .toString(陣形)
  • 特定のデータを文字列に変換し、()内の進数に変換します.
    • parseInt()
  • は、元のパターン(数値入力)に変換される.
    • a = 125;
a = a.toString(3)

console.log(a)
// 결과값 : '11122'

a = parseInt(a, 3)

console.log(a)
// 결과값: 125
    Github Copilot で Go を書く
    TIL 220225