Geekly Articles each Day

JavaScriptのロヌドず初期化


モバむルWebの出珟により、むンタヌネットは再び悪くなり、デバむスは遅くなりたした。 3G、4G、Wi-Fi ...-もちろん、それらはどこかにありたすが、実際に必芁な堎合は、原則ずしお速床がモデムモヌドに近くなり、「Stone Age」モバむルデバむスが珟代の情報量の条件に該圓するこずがわかりたす。 垂内䞭心郚15階でも、モバむルむンタヌネットアむコンに魔法の文字Eが衚瀺されおいる堎合がありたす。 毎回埅機しおメガバむト単䜍でアップロヌドしお短いメッセヌゞを送信するよりも、䜕らかの皮類のWebサヌビスのネむティブバヌゞョンを䜿甚する方が適切です。 Webサヌビスのネむティブバヌゞョン...明確なビゞネスマヌケティング、アプリケヌションレヌス。 ただし、ナヌザヌは定期的に曎新する必芁がありたすが、より高速に実行されるネむティブWebアプリケヌションを遞択し、倧量のリ゜ヌスをダりンロヌドしたせん。

この蚘事では、JavaScriptの読み蟌みず初期化を最適化する方法に぀いお説明したす。


すべおのコヌドが䜿甚されるわけではありたせん。


ナヌザヌが人気のあるサむトのさたざたなモバむルバヌゞョンの最初のペヌゞにアクセスするずきに䜿甚されるコヌドの量を特定するために、少し調査を行いたした。 このために、Chrome + script-coverプラグむンを䜿甚したした。

病院の平均では、コヌドの玄40を䜿甚しおいたす。 ダりンロヌドしたリ゜ヌスの80を䜿甚しおいるサむトもありたすが、20しか䜿甚しおいないサむトもありたす。 「残りは他のペヌゞのキャッシュから䜿甚されたす」ず蚀うず正しいでしょう-開発者ずしお、私たちはなぜ倚くがロヌドされるのかを知っおおり、単玔なナヌザヌはメッセヌゞを送信するだけでこのボリュヌムがロヌドされるのを埅぀たびにお友達に。

キャッシュ


ナヌザヌがすべおのリ゜ヌスを䞀床ダりンロヌドするず、キャッシュされ、次回ダりンロヌドしないず仮定したす有効期限FTW +300幎。

珟圚、デスクトップWebブラりザのキャッシュサむズは40〜80MBです。 ほがすべおのサむトがExpiresでキャッシュにクロヌルするこずを望んでいるため、この量はアクティブなWebサヌフィンの1時間半で浪費される可胜性がありたす。写真やその他の怪しいリ゜ヌスを300幎以䞊䜿い、䟿利なスクリプトを抌し出したす。 それは䞀皮の山の王たたはむンドの列車になりたす。 400 MBのディスクキャッシュをねじ蟌んでも、毎日同じスクリプトずスタむルを䜿甚できたす。

モバむルでは、すべおが悪化したす-iOS Safariにはディスクキャッシュがありたせんメモリ内のみ。Androidでは、20 MBに制限されおいたす。

最適化アプリ



簡単なアプリケヌションを1぀䜜成したした-これはチャットのプロトタむプです。 むンタヌネットの7Kb / sの速床で、非垞に厳しい条件でダりンロヌドを高速化しようずしたす。 すべおのバヌゞョンはここで芋るこずができたすazproduction.github.com/loader-test

順次ロヌドず実行


起動時に、スクリプトを読み蟌むアプリケヌションコヌドは次のようになりたす。
<script src="js/b-roster.js"></script> <script src="js/b-dialog.js"></script> <script src="js/b-talk.js"></script> <script src="js/index.js"></script>

スクリプトは、4぀のリク゚ストでロヌドされ、順番に実行されたす実際、最新のブラりザヌではこれは少し間違っおいたす。 これは、すべおのオプションの䞭で最悪です。 圌のプロフィヌルは次のようになりたす。

18秒...そんなに埅たないで...

䞊列ダりンロヌドず実行


スクリプトが䞊行しおロヌドおよび開始されるように、 async属性を远加しおコヌドをわずかに倉曎したす。 倚くのアプリケヌションでは、このダりンロヌド方法は機胜したせん。 スクリプトは以前のコヌドに䟝存する堎合がありたす。
  <script src="js/b-roster.js" async></script> <script src="js/b-dialog.js" async></script> <script src="js/b-talk.js" async></script> <script src="js/index.js" async></script>

䜕が埗られるか芋おみたしょう

䜕も倉わっおいたせん... DOM readyむベントのみが少し早く発生したすが、これは圹に立ちたせん。 アプリケヌションが機胜するためにはすべおのコヌドが必芁です。

䞊列ロヌド、順次開始


別の「最適化」を適甚しおみたしょう。同時にロヌドしたすが、順次実行したす。 これを行うには、 LAB.jsラむブラリを䜿甚したす。
  <script type="text/javascript" src="vendors/LAB.min.js"></script> <script> $LAB .script("js/b-roster.js") .script("js/b-dialog.js") .script("js/b-talk.js") .wait() .script("js/index.js"); </script>

そしおそれは悪化しただけです

䞊行しおロヌドしおいるように芋えたす-これは、リ゜ヌスのロヌドがブロックされおはならず、すべおが少しですが、より高速であるこずを意味したす。
実際、最新のブラりザはすべお、ペヌゞ䞊のすべおのスクリプトを䞊行しおロヌドしたすが、ドキュメント内の宣蚀の順序で順番に実行したす。 スクリプトが必芁以䞊に早く到着するず、その起動はブロックされたす。 LAB.jsの堎合、LAB.jsスクリプトは他のすべおのスクリプトのロヌドをブロックし、さらにはある皋床のボリュヌムを必芁ずするずいう事実にもかかわらず、実際にはブラりザヌの䜜業を行いたす。

集めお梱包


別のかなり明癜な最適化を適甚したしょう-すべおのスクリプトを1぀のファむルに収集し、このコヌドを䜕らかのミニファむダで圧瞮したす。
 $ cat **/*.js > main.js $ java -jar yuicompressor.jar main.js -o main.min.js

これらの行は倚くの人に銎染みがあるず思いたす。YUICompressorを䜿甚したすが、 UglifyJsたたはClosure Compilerを䜿甚するこずをお勧めしたす。

この最適化の結果は非垞に明癜です。 原則ずしお、それ以䞊最適化しないこずが可胜です:)しかし 9s ...-毎回埅機するナヌザヌは非垞に倚くありたせん。

AppCache-オフラむンストレヌゞ


䞀般的なキャッシュずは異なり、これは各アプリケヌションの個人甚であり、他のアプリケヌションはそのリ゜ヌスを抌し぀ぶすこずはできたせん。 発生する可胜性があるのは、AppCacheの合蚈クォヌタが終了するか、ナヌザヌがクリアするこずだけです。 AppCacheは倚くのブラりザでサポヌトされおいたす 。 オフラむンストレヌゞず呌ばれたすが、そのリ゜ヌスを䜿甚しおオンラむンで䜜業できたす。

接続はずおも簡単です

マニフェスト属性をappcacheファむルぞのリンクに登録するだけで十分です
 <html manifest="example.appcache"> </html>

キャッシュに移動するすべおのリ゜ヌスをリストするこのファむルを䜜成したすこれはファむルの最も単玔なバヌゞョンです
 CACHE MANIFEST # v1 - 2011-08-13 http://example.com/index.html http://example.com/main.js

たた、Webサヌバヌの蚭定で、ファむルが正しいMIMEタむプで返され、キャッシュされないように、数行を蚘述したす
 AddType text/cache-manifest .appcache ExpiresByType text/cache-manifest "access plus 0 seconds"

AppCacheを䜿甚するず、アプリケヌションが期限切れであるこずをナヌザヌに迅速に䞍必芁な束葉杖なしで通知し、ペヌゞのリロヌドを芁求するか、リロヌドの解決を芁求できたす。 ブラりザは、すべおのネットワヌクアクティビティを取埗し、キャッシュをチェックしたす。updatereadyむベントにサブスクラむブし、キャッシュのステヌタスをチェックするだけです。
 if (window.applicationCache) { applicationCache.addEventListener('updateready', function() { if (confirm('An update is available. Reload now?')) { window.location.reload(); } }); //       if(window.applicationCache.status === window.applicationCache.UPDATEREADY) { if (confirm('An update is available. Reload now?')) { window.location.reload(); } } }

AppCacheの長所
1.信頌できるキャッシング
2.オフラむンで䜜業する
3.シンプルなバヌゞョン管理
4.タむムリヌな曎新

AppCacheの短所
1.ディスククォヌタが終了する堎合がありたす
2.ナヌザヌがサむトでキャッシュを䜿甚するこずを蚱可しおいない可胜性がありたすFirefoxの堎合
3. NETWORK:\n*登録されおいない堎合、キャッシュされたペヌゞでオンラむンリ゜ヌスを利甚できたせんNETWORK:\n*
4. .appcacheファむルにExpires +300幎を突然远加するず、ナヌザヌは叀いバヌゞョンに完党に固定されたす。
5.他のドメむンぞのリダむレクトは倱敗ずしお認識されたす
AppCacheのいく぀かのマむナス点www.alistapart.com/articles/application-cache-is-a-douchebag

VitaZheltyakovからいく぀かのコメントを挿入させおください。圌に感謝したす。
-FFで構成された暙準キャッシュを䜿甚しお、アプリケヌションキャッシュのファむルを曎新したす。 -ファむルは曎新されたせん。
-NETWORKおよびFALLBACKセクションに特定のリンクパタヌンではなくを入れたす-指定されおいないファむルはすべおダりンロヌドされたせん。
-フレヌムで、最初にアプリケヌションキャッシュキャッシングを䜿甚しおペヌゞを開きたす-アプリケヌションはフリヌズし、ペヌゞを呚期的に読み蟌みたす。
-マニフェストが宣蚀されおいるメむンペヌゞのオフラむンコピヌを䜿甚しおみおください-キャッシュから䜜業ペヌゞずしおロヌドされたす。


キャッシュからアプリケヌションをリロヌドするずどのような結果が埗られるかは非垞に明癜だず思いたす-0リク゚スト、0バむト。 .appcacheファむルのダりンロヌドには1぀の芁求が必芁になる堎合がありたす

AppCacheの詳现
MDN tinyurl.com/mdn-appcacheの AppCacheに関する蚘事
AppCacheのよくある質問appcachefacts.info
初心者向けAppCache www.html5rocks.com/en/tutorials/appcache/beginner

遞択的ダりンロヌド


珟圚、キャッシュは良奜ですが、アプリケヌションの読み蟌みは最適ずはほど遠い状態です。 珟圚、ナヌザヌが必芁ずしないかもしれない远加のリ゜ヌスをロヌドしおいたす。 遅延読み蟌みスクリプトで最適化を適甚したす。 AMDの 「パタヌン」-非同期モゞュヌル定矩ず、このAPIを実装するRequireJSラむブラリを䜿甚できたす

1.䞻芁郚品を出荷する
2.必芁に応じお残り
3.自動䟝存関係ロヌド
4. ...
5.利益

アプリケヌションを2぀の郚分に分割できたす。これは、連絡先のリストずダむアログを含む名簿です。 名簿は垞に衚瀺される必芁があり、ダむアログが開く頻床は䜎くなるため、必芁に応じおロヌドしたす。

私たちのhtmlはこのようになりたした
 <script data-main="js/amd/index" src="vendors/require.js"></script>

require.jsに必芁なラッパヌで各モゞュヌルをラップしたした。 index.jsの堎合、次のようになりたす。
 require(["b-roster"], function(Roster) { new Roster($('body')); });

そしお、各ロヌド可胜モゞュヌルを別のラッパヌでラップしたす。
 define(function () { //  -   return ModuleName; });

起動時には、index.jsずroster.jsのみをロヌドし、roster芁玠をクリックしお、残りのファむルをロヌドしたす。
 querySelector('.b-roster').addEventListener('click', function (e) { require(["b-dialog"], function(Dialog) { new Dialog(element); }); }, false);

アむデアず実装は簡単です。結果ずしお埗られたものを芋おみたしょう。

前の結果ず比范しお、さらに2぀のリク゚ストを行うようになりたしたが、スクリプトの初期ボリュヌムは16.5 KB、時間は2.1秒枛少したした

もちろん、このアプロヌチには1぀の重芁なマむナス点がありたす-ナヌザヌは4秒埅っおから名簿芁玠をクリックする必芁があるため残りのスクリプトが読み蟌たれたす、これはもちろんあたり良くありたせん。

遅延読み蟌みず初期化


起動時の7.4秒-もちろん、これは18秒ではなく、ナヌザヌが蚱容できる3〜5秒ではありたせん。

スクリプトの量が増加するず、アプリケヌションの起動時間であるスタヌトアップレむテンシも増加したす。 実際のずころ、起動時に、ブラりザはこのファむルにリストされおいるすべおの関数、オブゞェクト、コンストラクタヌを解釈し、初期化する必芁がありたす珟時点では必芁ありたせん。 たた、ブラりザずデバむスのリ゜ヌスの負荷に応じお、シャッフルされたJavaScriptの1MBの初期化時間は最倧3秒に達する可胜性がありたす。 もちろん、デスクトップブラりザヌの堎合、この数倀ははるかに䜎くなりたす100〜300ミリ秒。

アプリケヌションを構築するずき、スクリプトを文字列に倉換し、必芁に応じおそれらをドロップしおコヌドを取埗できたす。 はい、evalは通垞の起動よりも遅くなりたすが、この初期化は起動時には発生したせんが、アプリケヌションの実行時に発生するため、アプリケヌションの起動が速くなりたす。

Lmd


この考えに基づいお、 LMDの原則-遅延モゞュヌル宣蚀を䜜成し、同じ名前の別の「ブヌトロヌダヌ」を䜜成したした。 遅延初期化に加えお、LMDには他ず比范しお倚くの利点がありたす。

2. Node.jsのようなモゞュヌル

AMDは、毎回defineを蚘述する必芁がありたすが、Node.jsの堎合は、ラッパヌや゚クスポヌトを䜿甚したマゞックなしで、1 in 1ブラりザヌのコヌドを定矩および蚘述せずに行うこずができたす。

これは、index.jsコヌドがLMDでどのように芋えるかです。
 var $ = require().$, // require("undefined") Roster = require("b-roster"); new Roster($('body'));

LMDパッケヌゞをアセンブルするずき、LMD自䜓はすでにこのコヌドを必芁なラッパヌでラップしおいたす。

3.組み蟌みのコレクタヌおよびパッカヌ

LMDには、すでにスクリプトのコレクタヌずパッカヌが組み蟌たれおいたす。 パッケヌゞに含める必芁があるすべおのスクリプトを宣蚀する必芁がありたす。
 { "path": "./modules/", "modules": { "main": "index.js", "b-roster": "b-roster.js", "undefined": "utils.js", //     * "*": "*.js" } }

LMDはそれらを圧瞮およびパックしたすが、圧瞮ずパッケヌゞングは​​オプションです。ファむル党䜓たたはモゞュヌルごずに個別に管理できたす。

4.柔軟なラむブラリサむズ

Require.js-AMDずは異なり、すべおのLMDコヌドは、䞍必芁なゞェスチャヌなしで、アセンブリ時にスクリプトパッケヌゞに含たれおいたす。 あらゆる皮類の最適化ず「プラグむン」を柔軟に有効たたは無効にできたす。 たずえば、コヌドが最新のモバむルデバむスでのみ機胜する堎合、IE6でこれらすべおのハックが必芁なのはなぜですか LMDでは、この「最適化」を蚭定で簡単に無効にできたす。 たたは、CSSを動的にロヌドしたくない-なぜ䜙分なコヌドをドラッグする必芁があるのですか -オプションを無効にするず、コヌドが小さくなりたす。 LMD.jsの最小サむズは288バむトのみです。

5.ホットビルドプロゞェクト

䜕が起こったのかを確認するために毎回再構築する必芁があるようなWebアプリケヌションがありたす。 LMDもこれに悩たされたすが、毎回サヌバヌ䞊でトリッキヌなビルドをmakeたたは調敎するこずを匷制したせん。 監芖モヌドでLMDを起動するだけで、アセンブリに含たれるファむルを倉曎するたびに、LMDはプロゞェクト党䜓を再構築したす。

 $ lmd watch config.lmd.json output.js

6.スマヌトコレクタヌ

アセンブリ䞭に発生する可胜性のある゚ラヌを指摘できるLMD.jsからスマヌトコレクタヌを䜜成しようずしおいたす-ParseError、蚭定の欠萜/远加フラグ、遅延モゞュヌルでのグロヌバルの盎接䜿甚、およびその他の最適化。

たくさんのプラスがありたすが、実際には䜕が

AMDず比范しお、ボリュヌムをさらに13.5 Kb、開始時間を2.1秒、リク゚スト数を2枛らしたした。

最初のケヌスず比范するず、驚くべき結果が埗られたす。


おわりに


1. AppCacheを䜿甚したすが、泚意しおください
AppCacheはかなり単玔な最適化であり、プロゞェクトコヌドを倉曎するこずなく、Webアプリケヌションに適切なキャッシュを远加したす。 AppCacheには倚くの問題がありたす。 アプリケヌションキャッシュはDouchebagです。 リ゜ヌスのリストを収集したり、スクリプトを蚘述したりするのが面倒な堎合は、Confess tinyurl.com/confessjsツヌルを䜿甚できたす。

2.スクリプトを収集する
スクリプトをただ圧瞮しおいない堎合、これは最も費甚察効果の高い最適化です-読み取りを停止しお、最終的にmakeファむルを曞き蟌みたす:)

3. LMDたたはAMDの䜿甚を開始する
既存のアプリケヌションをLMDたたはAMDに倉換するこずは非垞に困難ですが、曞き始めるず、ナヌザヌず開発者の䞡方にずっおこれを行うのは簡単で有益です。 遅延読み蟌みに加えお、完党に分離されたモゞュヌルも取埗したす。これは、チヌムワヌクで非垞に有益です。



すべおのリンク


最適化したアプリケヌションazproduction.github.com/loader-test

ツヌルずスクリプト
LMD github.com/azproduction/lmd
tinyurl.com/confessjsを告癜する
Require.js requirejs.org
YUIコンプレッサヌtinyurl.com/yui-compressor
caniuse.comを䜿甚できたすか
script-cover code.google.com/p/script-cover
UglifyJS github.com/mishoo/UglifyJS
losureompilercode.google.com/ p /closure- compiler

AppCacheによる
MDN tinyurl.com/mdn-appcacheの AppCacheに関する蚘事
AppCacheのよくある質問appcachefacts.info
初心者向けAppCache www.html5rocks.com/en/tutorials/appcache/beginner
AppCacheの問題に関する蚘事www.alistapart.com/articles/application-cache-is-a-douchebag

PSこれは、DUMP 2012での私のレポヌトの拡匵版です

UPD AppCacheの問題が远加されたした。yeremeievずVitaZheltyakovに圹立぀リンクずヒントをありがずう。

Source: https://habr.com/ru/post/J145269/

More articles:


All Articles