yahooトップページのヒント
2077 ワード
yahooトップページ最適化の新たな啓発について:
1.スクリプトのダイナミックロード
以前はスクリプトをボトムに置いていましたが、javascriptページを読み込まない場合は、ページdomツリーの解析が完了したら(bodyの底から直接読み込むこともできます)、機能スクリプトを非同期的にロードして、ブラウザがfetch、parse、executeスクリプトによる硬直(actのような)を防ぐことができます.
古い:
改善:
ページ作成の新しいモードを持ってきました.すべての複雑なアプリケーション及び基礎クラスライブラリの後期非同期ロードがアクティブになりました.(ページは非同期ローディング機能を実現するためのフィードスクリプトだけを静的に追加します.)yahooトップページを参照してください.
2.早めのflash
ページを並べたブロックに分割します.
エリア間でサーバー端flushが行われます.例えば、java端は前のブロックで行います.
次のブロックに対応するデータの読み出しを行います.
原理:flashはすでに発生した内容をブラウザの端に送り、もしブロックが解析的に判断されたら、ブラウザは先にブロック内に含まれているリソースファイル(css、script、img、flash...)をダウンロードしてレンダリングすることができます.
1.スクリプトのダイナミックロード
以前はスクリプトをボトムに置いていましたが、javascriptページを読み込まない場合は、ページdomツリーの解析が完了したら(bodyの底から直接読み込むこともできます)、機能スクリプトを非同期的にロードして、ブラウザがfetch、parse、executeスクリプトによる硬直(actのような)を防ぐことができます.
古い:
<body>
....
<script src='yy'></script>
<script src='xx'></script>
</body>改善:
<body>
....
<script >
dynamicGetScript('xx','yy',function(){
//your action
});
</script>
</body>ページ作成の新しいモードを持ってきました.すべての複雑なアプリケーション及び基礎クラスライブラリの後期非同期ロードがアクティブになりました.(ページは非同期ローディング機能を実現するためのフィードスクリプトだけを静的に追加します.)yahooトップページを参照してください.
// ，
<script type="text/javascript" src="http://l.yimg.com/a/combo?arc/yui/yui_0.2.4.js"></script>
<script type="text/javascript">
YUI.namespace("presentation");
// ，
YUI.presentation.lazyScriptList = ["http://l.yimg.com/a/combo?arc/yui/substitute_0.1.9.js&arc/yui/oop_0.1.10.js&arc/yui/event-custom_0.1.5.js&arc/yui/io-base_0.1.10.js&arc....."];
</script>
2.早めのflash
ページを並べたブロックに分割します.
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>エリア間でサーバー端flushが行われます.例えば、java端は前のブロックで行います.
out.flush()次のブロックに対応するデータの読み出しを行います.
原理:flashはすでに発生した内容をブラウザの端に送り、もしブロックが解析的に判断されたら、ブラウザは先にブロック内に含まれているリソースファイル(css、script、img、flash...)をダウンロードしてレンダリングすることができます.