今回はjavascript、ページ読み込み速度の改善の際に気を付けることを書いていきます。
jqueryでよく使われる関数の中にanimate()関数がありますが、最近ではcssを使ってhiddenとかhoverしたほうが動きがカクつかなくて
スマートなアニメーションを作ることができます。
特にcordovaを使ってスマートフォンで見る際にはかなり遅れて表示されるので、ハイブリッドアプリ開発の際はanimateは
使わないほうがよさそうです・・・！
$(<span class="hljs-string">'hoge'</span>).animate({<span class="hljs-attr">opacity</span>:<span class="hljs-number">1</span>});
これではなく
<span class="hljs-selector-tag">hoge</span> {
width:120px;
<span class="hljs-attribute">opacity</span>:<span class="hljs-number">1</span>;
}
こんな感じ
animate関数は基本cssの動きを全部網羅しているので柔軟に対応できるのですが、近年ではアクセススピードとかがアプリの強みに
なりつつあるので、遅いアプリを作りたくなければcssをもっと柔軟に使いこなせるようにしましょうということでしょうか。
自分はcssはあまり得意ではないですが、この技法はスマートに使えるようにはしておきたいと思います。
