Alipay の新しいホームページのフロントエンドの実践的な概要

タグを適用するときに重点を置くべき重要なポイントは、そのセマンティクスの伝達です。 <header> や <footer> などのタグは理解しやすいですが、<section> や <aside> などのタグ、および新しいセマンティクスを使用する <small> などのタグは、さらに研究する価値があります。新しいホームページの改訂でもこの点を重視しましたが、実装はあまり理想的ではありません。次はこの分野で研究をします。興味があれば、私のチームに参加してください。

HTML5 の特徴の 1 つは「寛容さが素晴らしい」ことであり、タグを非常に柔軟に使用できることは特筆に値します。たとえば、「ブロックレベル」リンクを使用できます。XHTML の記述に慣れている人にとっては、次のコードには絶対に慣れず、不合理に感じるかもしれませんが、これは HTML5 で可能なことです。

実は、それは誰もが経験できるものなのです。全体的な感想としては、ホームページは以前のバージョンよりも内容が多くなっていますが、速度は驚くほど速くなっています。もう一つの明らかな感覚は、写真が最後に出てくるということです。はい、だからこそ、リクエストが多いにもかかわらず、まだ高速なのです。

いわゆる遅延読み込みは、対応するタグを持つすべての画像の画像アドレスを記録し、JS を使用して img を作成し、src 値をページ内にマークされているアドレスに変更することです。これには 2 つの利点があります。まず、テキスト コンテンツが最初に表示され、次に画像が読み込まれます。画像を順番に読み込むこのプロセスにより、ユーザーは心理的に安心し、ページが読み込まれていると感じます。次に、画像が並行して読み込まれるため、実際にページの速度が向上します。

しかし、これを行うにはリスクがあります。JS が有効になっていないと、ユーザーは画像を見ることができません。そのため、JSがなくてもページを表示できるように、ページのユーザビリティをさらに高める必要があります。その時思い浮かんだのは、JS を使用しないために特別に設計された <noscript> タグでした。次に、ブラウザで JS を無効にして、Alipay ホームページに再度アクセスします。はい、全部表示されましたね？目的は達成されました。方法は、noscript > img の構造に従い、各 <img> タグの外側に <noscript> タグを囲みます。JS がある場合は、JS を使用して <img> を <noscript> の外側に移動します。

技術的な実装面では、noscript から取得した innerHTML は Firefox などの高機能ブラウザではエスケープされたテキストになるが、IE ではエスケープされないという、比較的面倒な問題があります。最も重要なのは、IE7 では innerHTML を使用してもまったく取得できないことです。脱出は簡単なことであり、それを達成するためのハックを書くことはできますが、それを取得できないことが最大の問題です。したがって、img を次のように記述する必要があります。

Google の提案を確認することを強くお勧めします。私の最適化のほとんどはこれに基づいています: http://code.google.com/speed/page-speed/docs/overview.html

結論

はい、私が言いたいことはこれだけです。主要なポイントは 2 つだけであり、他のポイントは十分に説明されずに混在しています。さらに多くの作業が行われています。最近、すごく怠けてたから、いろんなことが起きちゃったんです。だからブログを書くには疲れすぎています。人々は今でも時々ブログを書いて要約するべきです。そうしないと、脳が機能しなくなり、単語をつなげて完全な文章を作れなくなってしまいます。今回の改訂では、HTML/CSS コードの大部分をインターン生が書きました。これについては前回 Weibo でも触れました。私は主にJS全般の把握と最適化を担当しています。現在のインターンはみんなとても優秀だと思います。私が3年生の頃は、コードも書けませんでした。ハハハ…