コードを書かなくても、Web サイトを 10 倍速く開くことができます

皆さんこんにちは、「Negative Snow Bright Candle」です、よろしくお願いします。

バックグラウンド

2 年前の 2020 年 3 月に、LeetCode (中国語版) は「Daily Question」アクティビティを開始しました。Leekow の Web サイトでは毎日トピックが発表され、全員が質問したり議論したりすることができます。

当時、私は疫病のせいで家に引きこもっていました。Lekron 愛好家として、私は自分で「Daily Question」チェックイン活動を企画しようと考えています。

最初の反応は「ああ、私がやりたかったことがリコウによって実現された！」でした。しかし、妻のアドバイスを受けて、同じ「Daily Question」活動を行うのにLikouと競争する必要はなく、自分の強みを活かして「Likou Daily Question」活動を中心としたコミュニティを構築すべきだと理解しました。

そこでその夜、私は「 Likou Daily Question Check-in 」という小さなグループを立ち上げ、周りの仲の良い友達を招待して数字を集め始めました。グループでは、全員が今日の Likou の日常の問題解決策について話し合い、お互いを監督してチェックインできます。

グループ友達のチェックイン状況を確認するにはどうすればよいですか?

同様のチェックイングループを調査したところ、Likou でチェックインが完了した後、すべてのグループがスクリーンショットを送信し、人体の統計を送信する必要がありました。

グループの人数はすぐに 50 人に達しました。毎日のチェックイン状況を人間の肉で数えるのはとても疲れるでしょう。

**しかし、私たちはプログラマーです! **問題が発生した場合は、プロジェクトを開発しましょう。

そこで、私は週末をかけて「Daily Check-In Website」を開発しました。アドレスは: ojeveryday.com

この Web サイトでは、クローラー技術を使用して、メンバー全員が今日のトピックを完了したかどうかをカウントします。つまり、会員が Likou 上の質問に回答している限り、しばらくするとチェックイン Web サイトで会員のステータスが「チェックイン済み」に更新されます。

完全に自動化されているため、追加の操作は必要ありません。非常に怠け者です！

ウェブサイトがオープンして 2 年になりますが、現在の状況はどうですか?

参加者数は3626名に達しました。
6つのチェックイン監督グループを設立。
オープンソースのアルゴリズムブラッシングテンプレートを作成する: AlgoWiki
この公式アカウントを含め、元々はチェックイン組織のために作成されました。

しかし、最近チェックインサイトの開く速度が非常に遅く、毎回開くのに時間がかかることに気づきました。

Chrome のトラブルシューティングツールを調べてみると、Web ページを開くのに毎回15秒かかることがわかりました。

調査によると、ネチズンが Web サイトを開くのに耐えられる最長時間は 6 ～ 8 秒で、12 秒を超えると、99% のユーザーが待たずに Web ページを直接閉じます。

ページを開くのに最適な時間は 2 秒です。

したがって、この Web サイトを最適化する時期が来ました。キーボードをつかんで、やってみましょう！

分析する

ウェブサイトの読み込みが遅い原因は何ですか?

Webサイトを開く際のリクエストを分析した結果、時間がかかる操作は「静的リソース」と「バックグラウンドインターフェース」で、2秒以上かかることが分かりました。

失敗する静的リソース要求がまだいくつかあります。。

したがって、アイデアは「静的リソースの読み込み速度の最適化」と「バックグラウンドインターフェイスの最適化」を中心に展開します。

静的リソースの読み込み速度を最適化する

まず、静的リソースにアクセスする方法を見てください。

最も時間がかかったものはangular-1.2.10.jsスラグサーバーに配置されましたが、そうではありませんでしたCDN。したがって、アクセスは成功しますが、非常に遅いです。

そして、インターネット上にjquery.dataTables.min.cssあったにもかかわらず、リクエストは失敗しました。それは海外からのものでした。アクセス障害は当然のことです。CDNCDN

そこで、私は「静的資源」を最適化するために、これらの資源を国内に置くという方法をとりますCDN。

クラウドコンピューティング技術の普及により、クラウドサーバーとCDNこれらのサービスは実際にすぐに利用できるようになり、価格も非常に安くなりました。

私が採用した某クラウドのオブジェクトストレージサービス：

新しいオブジェクトストアを作成するときに、「プライベート書き込み、パブリック読み取り」に設定する権限を選択します。

メーカーが提供するアップロードツールを使用して、Webサイトで使用する静的リソースをオブジェクトストレージにアップロードします。

再びCDN加速をオンにします。

リソースを読み取るときは、CDNアクセラレーションされたドメイン名を使用します。

もう一度 Web サイトを開いて、静的リソースがどのくらい速く読み込まれるかを確認します。

以前はこれらの時間のかかるユーザーでしたが、現在ではアクセス時間は基本的に 60 ミリ秒以内です。

以前は最も時間がかかっていましたangular-1.2.10.jsが、アクセス時間はから 100 倍高速に4.04sなりました37ms。

jquery.dataTables.min.css以前に失敗した訪問と失敗した訪問にはjquery.dataTables.min.js通常どおりアクセスできるようになり、ロード時間はわずか20ms10 分程度です。

飛んでいるような気分に！

もっと速くできるでしょうか？

Web サイトの静的リソースは、基本的にほとんど変更されません。ブラウザーは静的リソースをキャッシュします。

Web ページを初めて開くときは、すべてのリソースをサーバーから取得する必要があります。

ただし、Web ページを閉じてしばらくしてから「更新」または「再度開く」場合は、静的リソースがディスク/メモリキャッシュから読み取られるため、速度は非常に高速になります0ms。

ここまでで「静的リソース」の最適化が完了しました。

インターフェースの高速化

バックグラウンドインターフェイスが結果を返すまでに数秒かかりますが、なぜこんなに遅いのでしょうか?

ホームページで要求されている 4 つのインターフェイス、つまり **「統計」、「パンチリスト」、「更新時間」、および「今日のトピック」** を見てください。このうち、「統計」と「チェックインリスト」の2つのインターフェースには最大4秒もかかっていた。

これら 2 つのインターフェイスにはパラメーターdate=2022-03-18、つまり今日要求されたデータがあります。

バックグラウンドインターフェイスはリクエストをSQLクエリに変換するだけなので、データベースの問題であると考えられます。

私のデータベースはクラウドベンダーのクラウド MySQL を使用しています。

ログインして見てみると、ああ、インデックスがありません! ！

このテーブルの行の総数は何ですか?

データは 174 万行あります。！

つまり、各インターフェイス呼び出しでは、174 万行のデータから日付が今日であるすべてのチェックイン情報をフィルターで除外し、統計を実行する必要があります。

インデックスがない場合は、トラバースする必要があり、時間計算量は $お (ん)$ ！

ウェブサイトを立ち上げた当初はデータ量が比較的少なかったため、インターフェイスのアクセス速度は非常に速かったです。データには数百万行があるため、SQL実行時間は数秒かかります。

問題がどこにあるのかがわかったので、最適化は実際には非常に簡単で、インデックスを追加するだけでOKで、インターフェイス上で直接操作できます。

ここでは「日付」「ユーザー名」「チェックインの有無」の3つの列にインデックスを付けていBTREEます。

Web サイトの背景のインターフェイスコードを変更する必要はありません。

Web ページを再度更新して、現在のインターフェースのアクセスに時間がかかっていることを確認してみましょう。

summaryこれまで最も時間がかかった「統計」インターフェースがから4.04s変わり、 32125ms倍に高速化しました！

同じく手間のかかる「チェックインリスト」インターフェースがpageからに3.89s変わり101ms、速度が38倍に向上しました！

SQLインデックスによって実行速度が大幅に向上していることがわかります。

やっと

上記 2 つの最適化を行った結果、Web サイトを開く速度は2s以内に抑えられるようになりました。「最適なページ開始時間」に達しました。

たとえば、以下のスクリーンショットは、1.6sWeb ページが読み込まれていることを示しています。以前は必要でしたが15s、切り上げられ、Web サイトの速度が10倍に向上しました~~

要約すると、主に 2 つの最適化を行いました。静的リソースのアップロードCDNとバックエンドデータベースのインデックス作成です。それぞれ、Web 静的リソースの読み込み速度とバックグラウンドインターフェイスの影響速度が向上しました。

CDN, キャッシュやインデックス作成などはコンピュータの基本的な概念であり、この Web サイトの最適化はこれらの概念を簡単に理解して応用したものです。

美団には「基礎技術をしっかりと練習する」という古い格言があります。

高さ 1 万フィートの建物が地面からそびえ立ち、基本的なスキルのハードな学習が基礎を築きます。

最後に、私の小さな Web サイトはアクセス数がそれほど多くないため、CDN従量課金制のコストは非常に低いと言いたいと思います。Web サイトのトラフィックが比較的大きい場合でも、コストを評価する必要があります。

LeetCode チェックイン監視グループに参加したい友人は、http://www.ojeveryday.com/#/submitをクリックして、個人の LeetCode のホームページアドレスを入力します。あなたをグループに引き込みます。

画像出典:

アンスプラッシュ、デジタルオーシャン