最初の画面最適化シリーズ（A）

タイトル：最初の画面に最適化シリーズ（a）の日付：2018年6月23日13時53分30秒タグ：

約束する
写真遅延ロード
フロントエンド：遅延ロードのカテゴリをルーティング

要件の説明：倍負荷速度を最適化し、黒と白の時間を短縮します。

最適化は、818回のプロジェクトで使用される時間だけでなく、それらに由来する知識を意味します。このプロジェクトは、より複雑であるので、より多くのモジュール、（大型電気プロバイダのウェブサイトよりも確かに優れては）、8つの要求があり、かつ合理化の後に、一歩間違え、黒と白の現象は非常に深刻になります。貧しい体験してください。分類モジュールパーティション1. ## 2.ホーム回転4.図3以降のメインコンテンツ表示7.ディスプレイ8協力機構を表示するための番号6をケースの数を収集し

折り目に配置されている大画面で表示するためにも、4、5、6です。

最適化の方法

スケルトンスクリーン（スケルトン画面）

簡単に言えば、ページのコンテンツは最初のいくつかのプレースホルダグラフィックスを使用して、ロードされていないスケルトン画面は、コンテンツをロードすると、その後のスワップを完了した後、それを交換してください。ページが完全にレンダリングされる前に、ユーザーが現在のページの一般的な枠組みを描いた、シンプルなスタイルが表示され、効果を体験して、知覚することができるページが徐々にロードされ、最終画面骨格の各占有部分が完全に置き換えられます。次のように表示します。

、データのこの部分の長さが0,5を占める背景表示され、場合モジュールはもちろんコース5推奨されるように、ここでここに示されている別個の書き込みページ全体のための構成要素が、各モジュールのための成分の導入は、存在しませんデータ要求は、それが実際のデータを表示し、このセクションは表示されなくなります、完了です。これが唯一の理由は、このページ内の要求より、自宅でのみのコースを意味します。また、この文言は非常に面倒で、保守が容易ではありません。

遅延ロードをルーティング

経路に対応する異なる成分がルートがアクセスされたときに、コードの異なるブロックに分割し、次いで、中規模および大規模プロジェクトの対応するコンポーネントをロードされ、それは非常に開発者のための効率的なだけでなく、メンテナンスが容易に見えるであろう。しかし、ここで生産・開発を行うには、本番環境でいい加減にプロジェクトが非常に大きい場合、あなたは熱い更新時間をトリガするためのコードを変更するたびに非常に長くなりますので、区別が環境なので、唯一のルート。

// 生产环境  _import_production.js
module.exports = file => () => import('@/pages/' + file + '.vue');
// 开发环境 _import_development.js
module.exports = file => require('@/pages/' + file + '.vue').default; // vue-loader at least v13.0.0+
// router.js中引用
const _import = require('./_import_' + process.env.NODE_ENV);
{
    path: 'course',
    component: _import('course/index'),
    name: 'course'
}

写真遅延ロード（VUE-lazyload）

// 安装
npm install vue-lazyload --save-dev
// 使用 main.js
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)
Vue.use(VueLazyload, {
    preLoad: 1.8,
    error: require('@/assets/lazy/error.png'),
    loading: require('@/assets/lazy/loading.png'),
    attempt: 1,
    listenEvents: ['scroll']
});

new Vue({
  el: 'body',
  components: {
    App
  }
});
// 在使用图片的地方加上v-lazy即可
<img v-lazy="img.src" >

より多くの使用が参照することができVUE-lazyloadの場合、ロードされ、表示画像を、この段階では、イメージリソースローディングプロセスをアリのクラウドストレージの写真を要求する荷重の状態を表示するために行く、リクエストが完了したデータであることで、ここで提示した結果を画像ローディングの失敗、画像を表示するのに失敗。

約束する

戻る私達の元の質問に、要求数のコースホームページは8だった、Googleにブラウズし、要求の数がブロックされます制限するよりも、要求が非同期要求で、同じドメイン下の要求数に対する我々のブラウザは限られています6つの同時要求の量は、例えば、データ要求と要求のホームコースでは、上の写真の数百人まで追加、我々は要求やデータに、加えて、遅延ロードを使用して、画像処理の要求を行っています異なるドメインの下で、我々は考慮する必要があり、現在8つのデータ要求、であるので、あなたは、同じ時間を発行するたびにあなたは、すべてのを別の時間の要求を送信するとき、私はテストでは、それはおそらく、各要求のための時間は、50ミリ秒ですでした十ミリ秒程度要求された時間を要求したので、私は解決策が、そうするための遅延要求をsetTimeoutメソッドを使用することであったが、私は、要求ごとに個別の時間をテストし、それらのための遅延時間を記述する必要があるので、効率が非常に低く、 A。また、約束より実行優先度と、のsetTimeoutが低減され、次のように後、方法の約束を採用しました。

return new Promise((resolve,reject) => {

})

このアプローチを使用するもう1つの理由は、すべての非同期要求が同時にトリガ場合は、ブラウザが彼らのために実行するために優先順位を割り当てますが、この方法で、私たちの呼び出しでの順序で要求の順序、ということです。ブラウザの割り当ては、それが最初に実行されるページの下部を要求することができます。あまり要求の場合、この差は有意でない反映。

言及した約束、私は（維持が困難、かつエレガントではない）、コールバックの層の問題を解決するよう最大の利点は、本来の意図として、そのデザインだと思う - チェーン通話だけでなく、組み合わせのためPromise.all（）の使用、データは非常に便利です。

ブラウザのキャッシュ（のlocalStorage）

行わまれに変更されたデータ・キャッシュ、および異なるキャッシュ倍に係る周波数変換のため。

if (cacheTime < 0) cacheTime = 3600000;
var result = { data: response.data, expiration: new Date().getTime() + cacheTime };
localStorage.setItem(cacheName, JSON.stringify(result));

詳細なキャッシュ方法は、githubのにアップロードされました：ビューに移動します

PageSpeedのツール

このツールは、Googleのプラグインストアからダウンロードすることができ、使いやすい、すべての点が最適化されるように一覧表示することができます。絵は、ブラウザのキャッシュの使用など地域の問題を、プロンプトが表示され、あなたがたETagを設定し、サーバー上の時間を期限切れにする必要があります。時間は、テストをロードするために使用することができます

console.time('加载时间');
console.timeEnd('加载时间');

参考記事：

ウェブサイトのパフォーマンス最適化の戦闘 - 1.06sの物語から12.67sへ
イベントループで
JavaScriptがセブンイレブンで動作 - エンジンとパフォーマンス最適化のヒントをレンダリング
VueのSPAは、ページの読み込み速度を最適化する方法に基づいて、
画面スケルトンVUEプロジェクトに追加
ブラウザは、同時要求資源が限られている許可 - 分析
静的リソースの変態とキャッシュを更新するには、上記のは、ちょうど私の個人的な理解が不十分な場合、また示し、感謝してくださいで、まだちょうどスラグスラグです。