jquery(javascript)とCSSから考えるCPUとGPU、そしてSEO

jquery(javascript)とCSSから考えるCPUとGPU、そしてSEO

自分はこのブログで良く「cssだけで出来る〇〇」という記事を書いています。
ですが、cssは本来何か動作するものを作るためのものではなく、
ウェブページのスタイルを指定するための言語なので、本来の想定とはズレている為実装は結構面倒です。
jquery(最近ならjavascript)ならスッキリかけるものをわざわざcssでやっていることも多いです。
ではなぜわざわざ面倒な方法を選ぶのか?
ちゃんと理由があるので、その辺りをCPU、GPU絡めながら解説していきます。

jquery(javascript)とcssでは、処理に使用する領域に違いがある。

jQueryは、比較的知っている人も多そうな、CPUを使っていて、
cssは、GPUというものを使って処理しています。
CPUは、Central Processing Unitの略で、その名の通りコンピュータの中枢、脳みそのような存在です。
対してGPUは、Graphics Processing Unitの略で、名前の通りコンピュータの画像描写を行う際に必要となる計算処理を行っています。

CPUは、コア数は多くなく、また基本的に並列処理には向いていません。
対してGPUは非常にコア数が多く、並列処理を得意としています。

イメージとしては、CPUが工場長(リーダー)で、GPUが工場のラインを担当しているイメージです。
工場長(リーダー)は一人~数人で支持を出し、工場のラインは複数個所で同時に作業を進めているのと同じように、
CPUが指令を出し、GPUが画像の描写を行います。

そうすると、いったいどんな違いがでるのか。
良く言われるのはjqueryでの画像描写は「カクツク」ということです。
スペックの低いPCだと、CPUの性能もあまり良くないため、jqueryを使っての画像描写処理が遅く、
結果としてカクカクした動きになってしまいます。
(最近はPCの性能が良いのでそんなこともないですが、役所のおんぼろPCや古いスマホ等を使うと明らかに違いが出ます。)

GPUはその点画像処理を専門にしているので、よっぽど古くない限りはカクツクことがありません。
これが、自分がやたらとcssだけで色々な描画をしようとしている理由の一つです。

jquery(javascript)は、読み込みが遅い。(遅延読み込みの対象にしたい)

もう一つ、SEO的な観点でcssのみにしているという理由もあります。
というのも、jqueryの処理を記述したファイルは、大抵の場合遅延読み込みというものをしたいからです。
遅延読み込みというのは、ザックリいうとページがユーザーが操作できるようになってから、
ファイルを読み込むようにするものです。
(やり方は簡単で、footerでファイルを読み込むだけ)
Googleは、ページの読み込みスピードは速ければ早いほど良いと言っているので、遅延読み込みはSEOに有効です。

なので、jqueryは後から読み込むようにしたいのですが、
遅延読み込みの問題として、ユーザーが操作できるようになってから読み込み始めるため、
ユーザーの操作開始→読み込み完了
まで特定の処理が出来ない状態になってしまいます。

そうすると、絶対に最初からユーザーが操作できる状態になっていて欲しい要素にはcssを当てるか、
jqueryを二つ切り出して必要なものだけheaderに入れるといった処理をすることになります。
自分は二つ切るのは嫌なのでcssで頑張っているというわけです。(それでも限界はありますが!)

後単純にcssの方が読み込みが速いです、jqueryは遅いです。
jqueryを遅延読み込みしたい理由は単純にそれになります。

結局どういうときにcssで頑張ってどういうときにjquery(javascript)がいいのか

cssは、結局はスタイルを当てるためのものなので、複雑な動きはかなり難しいです。
なので、「ページ上部にあり、かつ比較的単純な動きの描写」であればcssで頑張って動きを付けてあげると良いと思います。
その他は、無理せずjquery(javascript)で描写してしまいましょう。

ちなみに、ずっとjquery(javascript)と、わざわざ()を付けてきたのには理由があり、
jqueryはそろそろお役御免になるかもしれないからです。
もちろん古いサイトはべったり依存しているので、後30年は残ると思います。
ただ、最近はjavascriptがかなり使いやすくなっているということもあり、
jqueryからjacascriptに移行することで高速化を図る動きが出ているようです。
英語記事ですが、githubがjqueryをremoveしたという記事

もしかすると、cssで頑張る必要もなくなるかもしれません。

まとめ

css3_logo

jquery, cssからみるCPUとGPUの違い、そしてSEOから考えるどちらを使うのがよいのかということをまとめてみました。
どっちを使うかというか、そもそも目的が違うものなので、
どこまでcssを無理やり使って高速化(もしくはぬるぬるした動き)を目指すか、というのが正しいかもしれません。

参考サイト

jQuery.animate vs CSS.transition
[5分で理解]GPUとは?CPUと違いや性能と活用