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

Alipay の新しいホームページのフロントエンドの実践的な概要
もちろん、ページ パフォーマンスの最適化に関する個人的な経験も含まれています。ここでいくつかの点について言及したいと思います。

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

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

<!--[IE 9の場合]>
<script type="text/javascript">
// html5shiv MIT @rem remysharp.com/html5-enabling-script
// iepp v1.6.2 MIT @jon_neal iecss.com/print-protector
/*@cc_on(function(a、b){function r(a){var b = -1; while(++ b <f)a.createelement(e [b])} if(!(!window.attachevent ||!b.createstySheet || function(){var a = document.createelement(returnhad( Ength!== 1}()){a.iepp = a.iepp || {}; var 、g = new regexp( "(^| \\ s)("+d+")"、 "gi")、h = new regexp( "<(/*)("+d+")")、 "gi")、i =/^\ s*[\ {\}] \ s*$/、j = j new regexp [^\\ n]*)({[\\ n \\ w \\ w]*?}) "、" gi ")、k = b.createdocumentfragment()、l = b.documentlement、m = l.firstchild、n = b.createelement(" body ")、o = b.createelement(q; c)、b。 if(a+"" === undefined)return ""; var d = -1、e = a.length、f、g = []; while(++ d <e){f = a [d]; if(f.disabled)継続; ( "")}、c.parsecss = function(a){var b = []、c; while((c = j.exec(a))!= null)b.push(((i.exec(c [1])? "\ n":c [1])+c [2]+c [3]) tml = function(){var a = -1; q = q || b.body; while(++ a <f){var c = b.getelementsBytagname(e [a])、d = c.length、g = -1; } K.AppendChild(Q)、L.AppendChild(n)、n.className = q.className、n.id = q.id、n.innerhtml.replace(h、 "<$ 1font")}、c._beforprint = function lesheets、 "all"))、c.writehtml()}、c.restorehtml = function(){n.innerhtml = ""、l.removechild(n)、l.appendchild(q)}、c._afterprint = function(){c.restorehtml ; if(c.disablepp)return; m.insertbefore(o、m.firstchild)、o.media = "print"、o.classname = "iepp-printshim"、a.attachevent( "onbeforeprint"、c._beforeprint)、a.attachevent( "onafterprint"、c._afterprint)@*/*/
</スクリプト>
<![endif]-->

実は、このコードのおかげで、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 を次のように記述する必要があります。

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

<noscript データ-noscript="https://img.alipay.com/sys/homeindex/style/pb.png">
<img src="https://img.alipay.com/sys/homeindex/style/pb.png" alt="初心者クラス: Alipay を素早く簡単に学ぶ" />
</noscript>

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 のマクロタスクとマイクロタスクの詳細

推薦する

WeChatアプレット開発で遭遇したことのない落とし穴のまとめ

目次getApp()ページエントリファイルの先頭に変数を定義しますwx.createSelector...

フィールドを結合するSQL関数

最近、関連テーブル内のすべてのフィールドをクエリし、それらを 1 つのフィールドに再グループ化する必...

CSS で実装された円形のプログレスバー

成果を達成する 実装コードhtml <div class="wrap"&g...

MySQL ユーザーのホスト属性を素早く変更する方法

MySQL にリモートでログインする場合、使用するアカウントには特別な要件があります。アカウントのデ...

Linuxサーバ侵入緊急対応記録(概要)

最近、お客様から支援の依頼を受けました。管理されている通信コンピュータ ルームから、サーバーの 1 ...

VMware 仮想マシンに固定 IP アドレスを設定する方法 (グラフィック チュートリアル)

1. メニューバーで「編集」→「仮想ネットワーク エディター」を選択して仮想ネットワーク エディタ...

ログインと登録機能を実現するjs

この記事の例では、ログインと登録機能を実装するためのjsの具体的なコードを参考までに共有しています。...

Linux の運用と保守で netstat の代わりに ss コマンドを使用する方法

序文Linux サーバーを操作および管理するときに、最もよく使用されるコマンドの 1 つが nets...

MySQL の基本クイックスタート知識のまとめ (マインドマップ付き)

目次序文1. データベースの基礎知識1. データベースとは何ですか? 2. データベースの分類3. ...

Eclipse は Tomcat を構成しますが、Tomcat には無効なポート解決策があります

目次1. EclipseがTomcatを構成する2. Tomcat の無効なポートの解決方法方法1:...

複雑なSQLクエリを含むMySQLの一般的なSQL文の概要

1. 複雑なSQLクエリ1.1. 単一テーブルクエリ(1)指定の列を選択する[例] 全生徒の生徒ID...

VueにExcelテーブルプラグインを導入する方法

この記事では、Excelテーブルプラグインを導入するVueの具体的なコードを参考までに共有します。具...

MySQL データベースに基づくデータ制約の例と 5 つの整合性制約の紹介

非準拠データがデータベースに入るのを防ぐために、ユーザーがデータを挿入、変更、削除、その他の操作を行...

25 div+css プログラミングのヒントとコツ

1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値...

Linuxカーネルスケジューラソースコード初期化の分析

目次1. はじめに2. スケジューラの基本概念2.1. 実行キュー (rq) 2.2 スケジューリン...