🎞️ 🚿 🤽🏻 Web 1.5またはAjaxの部分的な置き換え ♥️ 🤘🏼 🌊

Hello％Habrauser％。

最初とは異なり、その主な欠点がない、ajaxテクノロジーのアナログのアイデア/実装を共有したいと思います。 ajax wikiから、次のことがわかります。

メリット

トラフィックの節約。
サーバーの負荷を軽減します。
インターフェースの反応の加速。

欠点

標準ブラウザツールとの統合の欠如。
動的にロードされたコンテンツは検索エンジンでは利用できません。
サイト統計の古い会計方法は無関係になります。
プロジェクトの複雑さ。

テンプレートクライアントキャッシュ（以後TCC）の発明のアイデアには、ajaxと同じ利点がありますが、その欠点はまったくありません。

アイデア

ajaxの場合、主な「トリック」は個々のブロックをロードすることであり、これによりトラフィックが大幅に節約されます。しかし、ajaxの大きな問題は、古いブラウザーと検索エンジンの両方との強い非互換性、および既存のプロジェクトへの複雑な統合です。ブロック上の次のサイトをajaxで書き直してパズルを解くと、現代のテクノロジーの助けを借りても同様の結果を達成することは実際には不可能ですが、実装と互換性のコストは低くなりますか？だから...水を注ぎ終えましょう...アイデアは非常に単純です：更新する必要があるものだけをロードします（実際には、ajaxのアイデアによく似ています）。全体の問題は実装です。基礎は、JSのニーズ（localStorageなど）のためにある種のストレージをサポートするための最新の標準と、サーバー側でテンプレートをキャッシュするというアイデアでした。それらを横断して、TCCを取得しました。つまり、サーバー上のテンプレートの場合のように、ページ全体は通常、別々のファイル（コード）によって処理および形成された部分に分割され、ユーザーによって結合および破棄されます。多くの場合、一部の断片はキャッシュされ、しばらくの間再構成されません。アイデアは、このキャッシュの一部をクライアント側に転送し、クライアントからサーバーに情報を転送し、キャッシュをリキッド状態に維持するためのインフラストラクチャを作成することです。つまりページをロードするとき、通常通り、サーバー側でフォームを作成し、いくつかのブロックをスキップしますが、サーバーキャッシュからそれらを取得せず、単に空のままにします。この形式では、クライアントに転送します。既存のキャッシュを使用して、結果のページをユーザーに表示します。説明から、次のことが明らかです。

+不要なブロックを形成せず、サーバー側でそれらに時間を費やしません（これらのブロックをキャッシュするコストを含むパフォーマンスに加えて）。
+不要な（重複した）情報をサーバーからクライアントに送信しません（ダウンロード速度とトラフィックの削減）。
+基本的に、ドキュメントの構造と方法を変更しません（加えて、既存のエンジン/サイトへの統合の容易さ、および検索エンジンと古いブラウザの問題がないことは、TCCサポートがない場合、常にフルバージョンのページを受け取るためです）すべてのブロック）;

全体として、TCCの一連の作業は次のように表すことができます。

クライアントはページを要求します。
サーバーは、特別なブロックマーカーで論理ブロックに分割するhtmlを生成します。
このページを受け取ったクライアントは、マーカーでページを分割し、キャッシュに入れます。
クライアントは、同じサイトの別のページへのリンクをたどります。
サーバーどのブロックがキャッシュされるかを知ると、キャッシュに関係のないブロックについてのみ、空のブロックマーカーと塗りつぶされたブロックマーカーで構成されるページを形成します（つまり、本質的に古いページと新しいページの差分を形成します）。
このような差分を受信したクライアントは、キャッシュから必要なブロックを抽出してページを埋めます。
利益

実装

デモのサンプルも短期間で収集することは明らかです。したがって、多くのことに目をつぶります（htmlの解析にjQueryを使用するなど、迅速な結果を得るための軽さ）。

以下に示すように、改善できるもののリストですので、デモの例（本番環境でのアプリケーションの観点から）を批判しないでください。

まず、キャッシュ用にブロックをマークする方法を決定する必要があります。簡単にするために、標準のhtml span要素を使用しました。これは、含まれるブロックにほとんど影響を与えないためです（つまり、ネストされたフローティングブロックおよびインラインコンテキストで通常動作します）。これがマーカーであることを示すために、次の原則によって呼び出される特別なクラスが選択されました。

tcc_ <ID> _ <MODE> [_ <TTL>];

どこで：

<ID>-一意のブロック番号。

<MODE>-キャッシングモード（以下について）。

<TTL>-キャッシュの有効期間。

キャッシングモードは、クライアントが処理しているブロックをクライアントに示すことを目的としています。 3つのキャッシュモードが割り当てられました。

r（リアルタイム）-キャッシュの対象ではないブロック（ページがリロードされるたびに更新されます）;

s（サーバー）-サーバー上に形成され、キャッシュの対象となるブロック（キャッシュ内のブロックを形成または置換する必要がある場合に作成されます）;

c（クライアント）-クライアントがキャッシュされたデータを配置する空のサーバー上に形成されたブロック。

実装に移りましょう（サーバーコードはPHPにありますが、何にでも書き換えることは難しくないと思います）。まず、ブロックの先頭を形成する単純な関数を作成します（実際、この関数は、いくつかの入力データに基づいて、特別なクラスで標準スパンを形成する必要があります）。

function blockStart($id, $ttl = false) 
      

        
        
        
      

     { 
      

        
        
        
      

     global $curTime; 
      

        
        
        
      

     global $tcc; 
      

        
        
        
      

     
      

        
        
        
      

     if (!$ttl) 
      

        
        
        
      

     { 
      

        
        
        
      

     echo '<span class="tcc_' . $id . '_r">'; 
      

        
        
        
      

     return true; 
      

        
        
        
      

     } 
      

        
        
        
      

     else if (isset($tcc[$id]) && ($tcc[$id] > $curTime)) 
      

        
        
        
      

     { 
      

        
        
        
      

     echo '<span class="tcc_' . $id . '_c_' . $tcc[$id] . '">'; 
      

        
        
        
      

     return false; 
      

        
        
        
      

     } 
      

        
        
        
      

     else 
      

        
        
        
      

     { 
      

        
        
        
      

     echo '<span class="tcc_' . $id . '_s_' . $ttl . '">'; 
      

        
        
        
      

     return true; 
      

        
        
        
      

     } 
      

        
        
        
      

     }

ご覧のとおり、この関数は2つの外部変数、$ curTime（必要な形式の現在時刻）、および$ tcc（クライアントのキャッシュのリスト。以下のクライアントからサーバーで受信することについて説明します）を使用します。関数の残りのロジックは非常にシンプルで簡単です。

次に、ストレージ（この場合はlocalStorage）を操作するための特定のサービス関数セットをクライアント側（つまり、JS側）で記述する必要があります。

function storSet(id, ttl, value) 
      

        
        
        
      

     { 
      

        
        
        
      

     localStorage.setItem('tcc_' + id, ttl + ':' + value); 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     function storGet(id, ttl) 
      

        
        
        
      

     { 
      

        
        
        
      

     var data = localStorage.getItem('tcc_' + id); 
      

        
        
        
      

     if (data == null) return null; 
      

        
        
        
      

     
      

        
        
        
      

     var data_ttl = data.substr(0, 12).split(':', 1)[0]; 
      

        
        
        
      

     if ((data_ttl != ttl) || (data_ttl <= curTime)) return null; 
      

        
        
        
      

     
      

        
        
        
      

     return data.substr(data_ttl.length + 1); 
      

        
        
        
      

     }

ここでもすべてが簡単です... storSetでは、ブロックの有効性をチェックするためにidを指定してttlを保存することを忘れずにデータを保存します。 storGetでは、そのIDでブロックを取得し、ttlの有効性を確認し、成功した場合、キャッシュされたブロックを返します。

次に、サーバーから受信したすべてを解析するメガパーサーが必要です。

function tcc() 
      

        
        
        
      

     { 
      

        
        
        
      

     var item; 
      

        
        
        
      

     
      

        
        
        
      

     while ((item = $('[class^=tcc_]:first')) && (item.length != 0)) 
      

        
        
        
      

     { 
      

        
        
        
      

     var cn = item.attr('class').split('_'); 
      

        
        
        
      

     
      

        
        
        
      

     if (cn[2] == 's') 
      

        
        
        
      

     { 
      

        
        
        
      

     var nItem = item.clone(); 
      

        
        
        
      

     var cItem; 
      

        
        
        
      

     
      

        
        
        
      

     while ((cItem = nItem.find('[class^=tcc_]:first')) && (cItem.length != 0)) 
      

        
        
        
      

     { 
      

        
        
        
      

     cItem.replaceWith('<span class="cache_' + cItem.attr('class') + '"></span>'); 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     storSet(cn[1], cn[3], nItem.html()); 
      

        
        
        
      

     } 
      

        
        
        
      

     else if (cn[2] == 'c') 
      

        
        
        
      

     { 
      

        
        
        
      

     var data = storGet(cn[1], cn[3]) 
      

        
        
        
      

     
      

        
        
        
      

     if (data == null) 
      

        
        
        
      

     { 
      

        
        
        
      

     alert('critical error'); 
      

        
        
        
      

     } 
      

        
        
        
      

     else 
      

        
        
        
      

     { 
      

        
        
        
      

     var nItem = $('<span>' + data + '</span>'); 
      

        
        
        
      

     var cItem; 
      

        
        
        
      

     
      

        
        
        
      

     while ((cItem = nItem.find('[class^=cache_tcc_]:first')) && (cItem.length != 0)) 
      

        
        
        
      

     { 
      

        
        
        
      

     var ncn = cItem.attr('class').split('_'); 
      

        
        
        
      

     
      

        
        
        
      

     var rItem = item.find('[class^=tcc_' + ncn[2] + '_]'); 
      

        
        
        
      

     
      

        
        
        
      

     if (rItem.length != 0) 
      

        
        
        
      

     { 
      

        
        
        
      

     cItem.replaceWith('<span class="' + rItem.attr('class') + '">' + rItem.html() + '</span>'); 
      

        
        
        
      

     } 
      

        
        
        
      

     else 
      

        
        
        
      

     { 
      

        
        
        
      

     cItem.remove(); 
      

        
        
        
      

     } 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     item.replaceWith(nItem.html()); 
      

        
        
        
      

     } 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     if (cn[2] != 'c') 
      

        
        
        
      

     { 
      

        
        
        
      

     item.replaceWith(item.html()); 
      

        
        
        
      

     } 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     ... 
      

        
        
        
      

     
      

        
        
        
      

     }

コードは非常に透過的であるため、ここで説明することはあまりありません。ブロックを見つけた->それがわかった->必要なアクションを生成した。

その結果、クライアント側で行うべきことは、サーバーがキャッシュを持っていることをサーバーに知らせることだけです。これにより、サーバーは後続のページを正しく形成できます。トランスポートの形式では、シンプルで基本的なCookieが選択されました。

function tcc() 
      

        
        
        
      

     { 
      

        
        
        
      

     
      

        
        
        
      

     ... 
      

        
        
        
      

     
      

        
        
        
      

     var storage = ''; 
      

        
        
        
      

     
      

        
        
        
      

     for (var i = localStorage.length - 1; i >= 0; i--) 
      

        
        
        
      

     { 
      

        
        
        
      

     var key = localStorage.key(i); 
      

        
        
        
      

     var prefix = key.split('_', 1)[0]; 
      

        
        
        
      

     var key = key.substr(prefix.length + 1); 
      

        
        
        
      

     
      

        
        
        
      

     if (prefix != 'tcc') continue; 
      

        
        
        
      

     
      

        
        
        
      

     var ttl = storExist(key); 
      

        
        
        
      

     
      

        
        
        
      

     if (ttl != null) 
      

        
        
        
      

     { 
      

        
        
        
      

     if (storage.length != 0) storage += ','; 
      

        
        
        
      

     
      

        
        
        
      

     storage += key + '_' + ttl; 
      

        
        
        
      

     } 
      

        
        
        
      

     else 
      

        
        
        
      

     { 
      

        
        
        
      

     localStorage.removeItem('tcc_' + key); 
      

        
        
        
      

     } 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     var cookie = 'tcc=' + escape(storage) + ';path=/'; 
      

        
        
        
      

     
      

        
        
        
      

     if (storage == '') cookie += ';expires=Thu, 01-Jan-1970 00:00:01 GMT'; 
      

        
        
        
      

     
      

        
        
        
      

     document.cookie = cookie; 
      

        
        
        
      

     }

Cookieは非常に透過的に形成され、倉庫を通過してブロックを探し、Cookieのリストに各ブロックのIDとTTLを記入します。指定されたコードでは、別のサービス関数storExistが使用されます。これは、ブロックが有効な場合にブロックのTTLを返すことを除いて、storGetとほぼ同じです。

function storExist(key) 
      

        
        
        
      

     { 
      

        
        
        
      

     var data = localStorage.getItem('tcc_' + key); 
      

        
        
        
      

     
      

        
        
        
      

     if (data == null) return false; 
      

        
        
        
      

     
      

        
        
        
      

     var data_ttl = data.substr(0, 12).split(':', 1)[0]; 
      

        
        
        
      

     
      

        
        
        
      

     if (data_ttl <= curTime) return null; 
      

        
        
        
      

     
      

        
        
        
      

     return data_ttl; 
      

        
        
        
      

     }

さて、クライアント側では、基本的にすべてを実行し、サーバーに戻りました。冒頭で、特定の$ tcc配列（マーカーブロックの形成機能用）に言及しました。これは、形成する必要があります。

if (isset($_COOKIE['tcc'])) 
      

        
        
        
      

     { 
      

        
        
        
      

     $list = explode(',', $_COOKIE['tcc']); 
      

        
        
        
      

     
      

        
        
        
      

     for ($i = 0; $i < count($list); $i++) 
      

        
        
        
      

     { 
      

        
        
        
      

     $item = explode('_', $list[$i]); 
      

        
        
        
      

     
      

        
        
        
      

     if (count($item) == 2) 
      

        
        
        
      

     { 
      

        
        
        
      

     $tcc[$item[0]] = $item[1]; 
      

        
        
        
      

     } 
      

        
        
        
      

     } 
      

        
        
        
      

     }

すべてが基本です。

まとめ

私は実験の結果に非常に満足していると言わなければなりません。最後のスクリプトでは、キャッシュを自動的に処理し、可能な限り少ないトラフィックをマージして送信する単純なシステムを得ました。最終的なJSスクリプト（理論的には常にクライアントからサーバーに送信する必要があります）は、2kの圧縮YUVトラフィックを受け取りますが、非圧縮のGZipトラフィックは、私にとってはかなり許容範囲です。また、古いブラウザーまたは検索エンジンの場合、クライアント側はJS、localStorageまたはCookieをサポートしないため、サーバーは常にクライアント側にキャッシュがないと判断し、常にフルページを形成します（つまり、高齢者との互換性を備えた自動システムを手に入れました。これは私にとってとてもクールです）。また、テンプレートエンジンと簡単に組み合わせてブロックをマークし、プログラマーが不必要なhemoを使わずにクライアント側とサーバーの両方にキャッシュできる、かなり単純なサーバー実装も注目に値します。また、オプションで、この方法でJSとCSSをドキュメントの本文に直接キャッシュすることができます（ちなみに、この場合、必要なスクリプトとスタイルをすべて含めることができます）。この場合、各JSまたはCSSを個別のブロックに分離および分離することにより、必要なJSおよびCSSコードのみをロードする便利で基本的なシステムを取得し、サーバーリクエストを最小限に抑えます（このリクエストが単なるキャッシュ検証であっても）。

短所（または別の方法でできること）

明らかに、jQueryを取り除く必要があります（これは理解できます）。

ブロックのマーキングを<！-cc_ <ID> _ <MODE> [_ <TTL>]->のようなものに変更します。この場合、標準との互換性や共有htmlの整合性を心配せずにブロックをマークできます（ただし、スパンブロックでは、完成したhtmlブロックのみをカットする必要があります。そうしないと、TCCブラウザーからサポートされていない場合、すべてがバラバラになります）。

アイデア自体の主な欠点は次のとおりです。

各クライアントのキャッシュの関連性を監視するサーバー側の必要性（たとえば、オンラインストアで商品のバスケットの場合、バスケットが変更されてクライアントに固有である場合も変更する必要があります。つまり、クライアントのキャッシュが古くなっていることを理解する必要があります）。
Cookieの潜在的な増加は、クライアントからサーバーへのトラフィックの増加につながります（ただし、最終的に選択されたTTLブロックとその数にすべて依存するため、これはまさに潜在的な問題です。

まあ、それがすべてです...

最適化のための合理的な批判とアイデアを聞きたいです。すべての質問に喜んでお答えします。

PS残念ながら、誰かが私に1つのphpファイルの場所を教えてくれたら、私は感謝するでしょう、作業スクリプトの例をレイアウトすることはできません。

UPD。 PS実例へのリンク： catsmile.heliohost.org/Mear/tcc.php （場所についてはcatsmileに感謝）

UPD.2 PPSこのトピックの目的を理解するあいまいさを排除するために、明確にします。本当の意味でのajaxの置き換えは提案しません。特定の実装では、クライアントキャッシングのオプションのみを検討することを提案します。また、実証されたコードは完全であると主張せず、アプローチを実証する目的でのみ作成されました。このトピックの主な目標は、クライアント側でいくつかのブロックをキャッシュするアイデアと、これらのブロックを操作する方法に関するアイデアとコメントを収集することです。

Web 1.5またはAjaxの部分的な置き換え

アイデア

実装

まとめ

短所（または別の方法でできること）

More articles: