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

もちろん、ページパフォーマンスの最適化に関する個人的な経験も含まれています。ここでいくつかの点について言及したいと思います。

1. HTML5タグの適用
HTML5 の適用はタグの適用だけではありませんが、タグの適用から始めることもできます。ブラウザを開いてソースコードを表示すると、<header> <footer> などの標準がすでに使用されていることがわかります。 HTML5 Shiv JS コードのセクションも見つかります。

コードをコピー

コードは次のとおりです。

実は、このコードのおかげで、HTML5 固有の標準を IE6 ～ IE8 で実行できるようになっています。著作権情報はページコード内に保持されており、自分で調べることができます。原理は非常にシンプルで、JS を使用してタグを作成し、IE バージョン 9 未満で認識できるようにして、直接使用するだけです。

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

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

コードをコピー

コードは次のとおりです。

<記事>
<a href="ストーリー1.html">
ブルース・ローソンが地球上で最もセクシーな男性に選ばれる
<p><img src="bruce.jpg" alt="gorgeous lovebundle. ">地球上のすべての女性を代表する議会は、満場一致でブルース・ローソンを最もセクシーな男性に選出しました。</p>
<p>続きを読む</p>
</a>
</記事>

そこで、前回シェアしたとき、私はこう言いました。「チームコラボレーションには、HTML5 標準を適用する際にコードをより統一するための一連の仕様を策定することが必要です。一般的に言えば、XHTML は比較的私たちの標準に沿っています。Alipay もこのアプローチを採用しており、合意された一連の仕様を持っています。XHTML に基づいて HTML5 を XHTML5 に変換して、チーム開発により適したものにすることができます。」どう思いますか？

2. アクセシビリティの向上と速度の向上<br />今回はホームページのほぼ全体をCMS化しており、すべてのアイコンを運営者が変更できる必要があるという非常に異例の要件があります。つまり、CSS スプライトを使用してメモリを犠牲にして速度を上げることで、HTTP リクエストの数を減らすことは不可能です。姉さん、HTTP は速度と引き換えに最も高価なものです。この場合、ページのパフォーマンスはどうなるのでしょうか?

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

並列読み込み

いわゆる遅延読み込みは、対応するタグを持つすべての画像の画像アドレスを記録し、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 を次のように記述する必要があります。

コードをコピー

コードは次のとおりです。

innerHTML を取得できない場合に、その data-noscript 属性を取得できるように、<noscript> タグに HTML5 形式の属性を追加します。次に、img を作成し、その src 値を data-noscript の値に設定します。ホームページで使用したコードは次のとおりです。

コードをコピー

コードは次のとおりです。

// noscriptから取得したinnerHTMLをエスケープする
HI.text2HTML = 関数 (テキスト) {
if(text.indexOf('&lt') === -1) テキストを返します。
var tmp = document.createElement("DIV");
tmp.innerHTML = テキスト;
tmp.textContent || tmp.innerText を返します。
}
// img を抽出し、noscript 標準の先頭に追加します。
// insertBefore + フラグメントメソッドを使用する
// ハックはすべてのブラウザと互換性があります
HI.ns2Live = 関数 (ns) {
var img,f = document.createDocumentFragment();
if(ns.innerHTML){
img = D.toDom(HI.text2HTML(ns.innerHTML));
} それ以外 {
ドキュメントに要素を追加します。
img.src = ns.getAttribute('data-noscript');
}
f.appendChild(画像);
親ノード f の前に挿入します。
}

しかし、Alipay のログインコントロールはまだ非常に貧弱に作られており、JS なしでは実装できません。したがって、この最適化を最初に行うのは面倒であり、コントロールパネルをアップグレードする必要があります。私はこれについてとても悲しい気持ちです。

3. 最適化、最適化、最適化<br />実は、今回の改訂では、最適化したいと思っていたものがすべて最適化されたわけではありません。例えば、静的ファイルのキャッシュは実際には 1 年に調整できます (Yahoo のように 10 年にしないのはなぜですか? 実はこれは規制なのですが、組織の名前を忘れてしまいました。笑)。たとえば、js と CSS のパフォーマンス最適化、画像圧縮、アクセシビリティ強化、フォント強化などです。いろいろありますが、ホームページにはまだまだ最適化できるポイントがたくさんあります。しかし今回は、何らかの理由で、プロジェクトが 1 週間早くリリースされ、完全に最適化されていませんでした。リリース後にはアップグレードパッケージがありますが、対応する製品ラインのユーザーは、これらのパフォーマンスの最適化をあまり気にしていません。建築グループの学生として、私はこの件に関して何も言う権利がありません。結局のところ、これは他の誰かの分野の産物であり、彼らはそれをやりたくないのです。

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

結論

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

<<: Dockerを使用してRedisクラスターを構築する方法

>>: JavaScript のマクロタスクとマイクロタスクの詳細