フロントエンドテンプレート+バックエンドデータ、テンプレートを使用して、データはLocalStorage に二重にキャッシュされる.
フロントエンドテンプレート+バックエンドデータとフロントエンドajaxバックエンドHTML文字列を取得する2つの方法で性能の最適化を実現し、バックエンドは生成した静的ファイルをCDNにプッシュし、ユーザーがアクセスする際に速度情報(ユーザーのブロードバンド速度をテストする)を埋め込んでをレンダリングする方法を決定する.
各モジュールのHTML,CSS,JSを相関依存から引き離し,オンデマンドロードを実現する.
は、ユーザのネットワーク速度が遅いために、がローディングされないことを防止するために、第1のフレームのマルチキャスト画像およびレンダリングロジックをページに直接出力する.
スクロールイベントをスロットル処理し、スクロール時にDOM操作と複雑な計算をできるだけ避ける.レンダリングロジックの初期化時に、フロアの高さ、フロアのoffsetTopなど、フロアに関する情報を収集することで、スクロール時にDOM操作を行う必要がなくなり、スクロールの効率が向上する.一方、フロアのデータ、例えばフロアの高さが変化した場合、メッセージ通知のメカニズムによりフロア情報をリアルタイムで更新すればよい. スクリプトはロード実行を遅らせ、ビジネス上の統計レポートなどの論理もあり、window onloadイベントの後に実行することができ、統計のような要求がページロードリソースを占有することを回避し、ページonload時間を低減することができます. テンプレート、データ分離キャッシュ.localStorageを使用すると、テンプレートとデータをキャッシュできます.これにより、ユーザーが2回目のロード時にネットワークリソースを要求することなく、ローカルから直接取得できます. しかし、キャッシュの後、どのように更新しますか?MD 5の検証版を行うことで、本来実現することができます.
データにとって、データはバックエンドによって与えられ、バックエンドの学生にキャッシュ可能なインタフェースデータをバージョン番号としてMD 5値を計算させ、ページにまっすぐ出て、インタフェースでこのバージョン番号を返すことができます.これにより、現在のエンドデロードはまずバージョン番号が一致しているかどうかを判断し、キャッシュを直接読むか、ネットワークからリソースを要求するかを判断することができます.
強制webkitカーネルレンダリング多くの国産ブラウザは360、QQブラウザなどの2コアであり、Webkitカーネルレンダリングを強制的に使用するオープン方式を提供しており、ユーザーがより良い閲覧体験を得ることができます.
Icon Font:Icon Fontの互換性は非常に良く、異なるブラウザのユーザーに一貫した閲覧体験を得ることができ、フォント圧縮ツールを通じて、圧縮されたフォントファイルも非常に小さく、パフォーマンスの損失があまりありません. 空き時間自動ローディングフロアおよびピクチャフロアのローディング操作を1つのキューに入れ、ユーザーがスクロール操作を停止した3 s後にこのキューのフロアを自動ローディングし始め、ユーザーがスクロールを開始したときにこのローディングキューを空にし、スクロールを停止した3秒後にロードを再開することができます.このような処理により、ユーザが閲覧する空き時間を合理的に利用してページをロードすることができ、ユーザにページのロードがより速く感じさせることができる. var scrollTimer = null;
var isScrolling = false;
$(window).bind('scroll.loadFloor', function (e) {
isScrolling = true;
clearTimeout(autoLoadTimer);
clearTimeout(scrollTimer);
autoLoadingQueue = [];
resourceLoader && resourceLoader.pause();
scrollTimer = setTimeout(function () {
isScrolling = false;
if (pageConfig.idleTimeLoad) {
autoLoadTimer = setTimeout(autoLoad, 3000);
}
}, 200);
});
function autoLoad () {
if (!isScrolling) {
runFloorLoadQueue();
}
}
災害対策のバックエンドにはポケットがあり、フロントエンドにもサービスがあり、フロントエンドキャッシュにも1階があります. 後端:上流へデータ異常を取りに行くと、フロントエンドポケットデータに戻る.
フロントエンド:インタフェースのデータフォーマットが間違っている場合、の代わりにポケットインタフェースをアクティブに呼び出す.
フロントエンド:前のページをキャッシュし、インタフェースが間違っている場合はキャッシュページを取る.
静的リソースプリロードトップページプリロードリンクのアクティブページ