注: この本文では、Web サイトをグレーにする方法についての技術的な点については言及されていませんが、その技術的な点については以前に汶川地震の際に言及されました。
この記事では、テクノロジーの実装方法について説明するのではなく、このニュースを初めて知った後、このグレーディング要件を迅速に実装する方法について説明します。
ニーズを満たすことは楽しいことではありませんが、他者にニーズを実現させることは楽しいことです。これが私たちの上司の考えです。
最近、国中で何か悲劇的なことが起こったため、哀悼の意を表すために、そのニュースを聞いて多くのウェブサイトが灰色に変わりました。
しかし、一部の Web サイトは比較的早く構築され、プログラマーはすぐに変更を加えてオンラインに移行します。
しかし、他の人の Web サイトでこのようなことが行われていたことに後から気づく人もいます。これを行わないと良くありません。空白のままにしましょう。さあ、Xiao Wang、Web サイトを無効にしてオンラインにします。テストには注意して、壊さないようにしてください。そこでシャオワンは重要な任務を受けました。
ある日、宝島が回収され、明るい赤に設定する必要があるので、コードを赤に変更してから回線にかけるのですか? お祝いが終わったので、コードを元に戻しますか?
ここのテキストは例として単純なスタイルを採用しています
目次
1. 日常のニーズをオンラインで提供するプロセス
日々の需要がオンライン化されており、製品の実現可能性分析段階では、その需要が価値があるかどうかを判断するために市場分析とデータ分析が必要です。
次に、要件レポートや要件ドキュメントの作成を開始し、要件レビューを開始する準備をします。
レビュープロセスには関係者が参加し、要件レビューの段階まで進めば必ず完了します。
その後、関係者が作業時間をスケジュールし、プロジェクトが他のプロジェクトとの兼ね合いを考慮して工期を設定します。
開発者の実装フェーズ (長くなる場合も短くなる場合もある)
その後フォローアップフェーズが始まり、テストは終了します
導入 (ローカル導入、テスト導入、プレリリース導入、オンライン導入) が完了し、オンラインになります。
2. この要件の重要なポイント
上の図からわかるように、あらゆる需要、またはあらゆる企業が需要に対して柔軟な処理を行うことになります。
最も柔軟なのは、上司が機会を見つけて自ら開発し、開発後すぐに開始することです。
したがって、この要件の焦点はオンラインプロセスにあります。
3. ウェブサイトを灰色または赤色にする CSS コード
例として、先ほど作成した新しく作成した DOM 要素を見てみましょう。これが通常のスタイルです。
div {
color: blue;
}
button {
width: 70px;
height: 20px;
line-height: 20px;
background: blue;
color: #FFF;
text-align: center;
}
<div class="box">
<div>这里是网站内容</div>
<button>按钮</button>
</div>グレーコード:
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
} 
3. CSS コードをより速く有効にする方法
△ これには、表示する必要がある優先度の高い CSS コードを維持するために別のプラットフォームを使用する必要があります。
△ HTML ページはフロントエンドに配置できず、Node Java プロジェクトであってもサーバーに配置する必要があります。
koa プロジェクトを例に挙げると、HTML ページをレンダリングする前に、別のプラットフォームにリクエストを送信して、維持されている最新の CSS コードを取得します。
その後、それが取得されて HTML ページにレンダリングされるため、オンラインに接続する必要がなく、優先度の高いグレー表示されたコードをより速くレンダリングできます。
doctype html
html
head
title= title
style(type="text/css")
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: drop-shadow(#EFE2DA);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
body
block content4. それによって生じる問題
これが完了すると、速度は非常に速くなりますが、問題は、ページが更新される前に毎回サードパーティ プラットフォームのインターフェイスが呼び出されるということです。
△ 訪問数が増加すると、このサードパーティ構成プラットフォームに大きな圧力がかかります。
△ また、プラットフォームを日常的にクリアする必要がない場合、プラットフォームが理由もなくそれを呼び出した場合、無駄な労力になります。
5. メッセージトリガーメカニズム
これにはメッセージ トリガー メカニズムが関係します。これは何を意味しますか?
△ インターフェース メソッド A を koa プロジェクトに追加して、サードパーティ プラットフォームからの呼び出しを受信します。
△ 同時に、B = false などのグローバル変数を追加します。B が false であることが検出された場合、ページが更新されるたびにサードパーティのグローバル CSS データを呼び出す必要はありません。
△ これは、サードパーティのプラットフォームが当社の koa プロジェクトと一定の関係を持つ必要があることを意味します。このグレー表示された CSS コードをメッセージとして送信することにした場合、このインターフェイス メソッド A をトリガーします。
△ インターフェイス メソッド A は、この時点でグローバル変数 (グローバル変数 B) を変更する必要があり、この時点でそれを true に変更します。
△ 次にユーザーがページを更新して B が true であることが検出されたときに、最新の CSS コード データが呼び出されます。
6. しかし、毎回呼び出すとやはり損失が発生します。
このメッセージ トリガー メカニズムを使用して成功したとしても、ここ数日は常にグレー表示になっている必要があり、ページがリクエストされるたびにこのサードパーティ インターフェイスを呼び出す必要があり、これでは依然として損失が生じます。
このとき、キャッシュを追加し、取得した CSS データをキャッシュとして使用できます。
ページをリクエストするたびに、現在の B が true であるかどうかを判断するだけでなく、キャッシュされたデータがあるかどうかも判断し、最終的にリクエストを送信するかどうかを決定することで、一定の損失を軽減する必要があります。
7. どこに行きますか?
単純なフロントエンドの起動であれば、後で気づくことになりますが、事前準備にそれほど多くの時間を費やす必要はありません。
このセットを実装すると、テキストシーンだけでなく、より多くのシーンで使用できるようになり、メッセージを受け取った後すぐに要求を解除することもできます。
どちらが現在のチームに適していると思いますか?