JavaScriptプログラムに関する各種メモ書き:タグ「高速化」での検索

jqueryの fadeIn / fadeOut メソッドを CSS3アニメーションにする

jqueryの fadeIn / fadeOut メソッドを CSS3(animation)アニメーションにするには以下のようにします。

デモ : http://logic.moo.jp/livedemo/jquery.fadecss3/demo.html

<link rel="stylesheet" href="jquery.fadecss3.css">
<script type="text/javascript" src="jquery.fadecss3.js"></script>
$('#item').fadeInCss3();
$('#item').fadeOutCss3();

$('#item').fadeInCss3(1000, 'ease-in');
$('#item').fadeOutCss3(3500, 'ease-in-out');

jquery.fadecss3.css として保存

@keyframes fadein_css3_kf {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes fadein_css3_kf{
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes fadeout_css3_kf {
  0% {opacity: 1;}
  100% {opacity: 0; visibility: hidden; }
}
@-webkit-keyframes fadeout_css3_kf{
	0% {opacity:1;}
	100% {opacity:0; visibility: hidden;}

jquery.fadecss3.js として保存

$.fn.fadeInCss3 = function(duration, easing) {
  var event_alias = "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd";
  if (! duration){duration=400;}
  if (! easing){easing='linear';}
  var _this = this;
  setTimeout(function() {
    return $(_this).show().css({
        'animation'                 : 'fadein_css3_kf 400ms linear 0s 1 normal' ,
        'animation-duration'        : duration + 'ms' ,
        'animation-timing-function' : easing ,
        'animation-fill-mode'       : 'forwards' ,
        'visibility'                : 'visible'
    }).on(event_alias, function(){
      $(this).off(event_alias);
      $(this).css({
        'visibility' : 'visible' ,
        'animation'  : 'none'
      });
    });
  }, 0);
};

$.fn.fadeOutCss3 = function(duration, easing) {
  var event_alias = "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd";
  if (! duration){duration=400;}
  if (! easing){easing='linear';}
  $(this).each(function(){
    if( $(this).filter(':not(:hidden)').length ){
      $(this).show().css({
          'animation'                 : 'fadeout_css3_kf 400ms linear 0s 1 normal' ,
          'animation-duration'        : duration + 'ms' ,
          'animation-timing-function' : easing ,
          'animation-fill-mode'       : 'forwards' ,
          'visibility'                : 'visible'
      }).on(event_alias, function(){
        $(this).off(event_alias);
        $(this).css({
          'visibility' : 'hidden' ,
          'animation'  : 'none' ,
          'display'    : 'none'
        });
      });
    }
  });
  return $(this);
};

ただ現時点では CSSアニメーションはjQuery本体のanimate()よりは早いものの、Velocity.js には劣るようです。 参考 : http://bit.ly/1QnSfRn

No.1006
02/22 15:14

edit

css
アニメーション
高速化

外部JavaScriptファイルを動的に読み込み(遅延読み込み)HTMLページ描画を高速にする

外部JavaScriptファイルを動的に読み込みWEBサイトを高速にしましょう!

JavaScriptは通常の<head></head>タグ内に記述しますが、この場合HTML描画前にJavaScript読み込みが発生し、またJavaScriptの読み込みが終わるまで待機しているので、読み込み終わりを待ってからでないとHTML描画は開始されません。

そこで外部JavaScriptファイルを動的(HTMLレンダリングと同時、またはDOM Ready時)に読み込むよう変更します。


■ 方法1-1. async をつけて読み込む(新しいやり方)

今までJavaScriptは以下のように読み込んできました。

<script src="myfile.js"></script>

これに async を追加します

<script src="myfile.js" async></script>

これで非同期読み込みとなり、「Javascript読み込み」と「HTMLページ描画」が同時に行われ、高速にページを表示することができます。

ただしasync属性の特徴として

・.js ファイル読み込み完了と同時にその .jsファイルを実行する

・実行順序がバラバラ(読み込み完了順)になる

がありますので jQuery プラグイン等 jQueryの存在が前提となるスクリプトがある場合は

  • jQuery本体には使用しない
  • jQueryプラグインには使用する

とする必要があります。(結局jQuery本体の読み込みに待ちが発生するのでおすすめはしません。)

または全てを1ファイルにまとめて読み込ませるという方法もあります(これはとてもいい方法です。が、手動でするには手間がかかります。)


■ 方法1-2. defer をつけて読み込む(新しいやり方)(とりあえずJavaScriptはよくわからないけど高速化したいという方にはこちらの方をおすすめします。)

async属性の代わりにdefer属性というのもあります。

違いは

async :  .jsファイル読み込み直後に実行。『複数の .jsファイルを読み込む場合に実行順序は保証されない』
defer :  DOMツリー構築完了直後(DomReadyハンドラ前)に実行。『実行順序は保証される』

です。どちらもDOM構築を妨げない(HTMLレンダリングが高速)のは同じです。

記述方法は

<script src="myfile.js"></script>

これに defer を追加します

<script src="myfile.js" defer></script>

簡単ですのでこちらをおすすめします。


■ 方法2. 遅延読み込みスクリプトで対応する(古いけど確実なやり方)

例:3つのJavaScriptファイル『aaa.js』『bbb.js』『ccc.js』と1つのCSSファイル『test.cs』を遅延読み込みする(要:jQuery)

// dom ready時に読み込み開始(事前にjQueryを読み込ませておいてください。)
$(function(){
		alert('js load start !!! ');
		require_onload( ['aaa.js', 'bbb.js', 'ccc.js', 'test.css'] );
});

function require_onload( arg ) {
	if (is_array(arg)){
		var element = [];
		for(var i=0; i<arg.length; i++){
			if ( arg[i].match(/\.css$/) ){
				add_child_css(arg[i]);
			}
			else if ( arg[i].match(/\.js$/) ){
				add_child_js(arg[i]);
			}
			else{ alert('check url : ' + arg[i]) }
		}
	}
	else{
		if ( arg.match(/\.css$/) ){
			add_child_css(arg);
		}
		else if ( arg.match(/\.js$/) ){
			add_child_js(arg);
		}
		else{ alert('check url : ' + arg[i]) }
	}
}
function add_child_js(src){
	var element = document.createElement("script");
	element.src = src;
	document.body.appendChild(element);
}
function add_child_css(src){
	var css_element = document.createElement('link');
	css_element.type = 'text/css';
	css_element.rel  = 'stylesheet';
	css_element.href = src;
	document.body.appendChild(css_element);
}
function is_array(obj) {
	return Object.prototype.toString.call(obj) === '[object Array]';
}

これを<head>〜</head>タグ内に設置します。(</body>タグ直前でなくてもOK。)

3行目に

		alert('js load start !!! ');

があるので、読み込み開始時にアラートが表示されます。(もうその時にはHTML描画(正確にはDOM構築)が終わっていることが確認できると思います。)

実際使うときにはこの行は削除してください。

このスクリプトを使うと全てのページ描画準備が終わった段階(DOM Ready)で .js .css を読み込みに行きますので高速になります。

またページレイアウトに関係ある .css を遅延読み込みするとHTML描画とCSSスタイルの読み込み・適用が同時に行われるので画面が一瞬乱れる可能性があります。

ですのでWEBフォントの .css など レイアウトに関係ない .css を遅延読み込みするといいでしょう。

No.517
07/09 14:21

edit

高速化
HTML5