jQuery Mobile 1.4が正式版に。CSSインラインSVGのアイコンでRetina対応、DOM削減で動作の高速化も

2014年1月7日

iOSやAndroidなどクロスデバイス対応のモバイルアプリケーション開発のためのJavaScriptライブラリ「jQuery Mobile」の最新版「jQuery Mobile 1.4」が公開されています

CSS内のSVGでアイコンを描画

今回のバージョンの大きな特徴は、これまで画像ファイルを基に描画されてきたアイコンがすべてSVGに置き換えられたことで拡大縮小に対して柔軟になり、Retinaなど高精細な画面でもなめらかな表示を実現したことです。

例えば、jQuery Mobile 1.4でアイコン表示を備えたボタンをChromeのデバッガで見てみると、イメージファイルを示す部分にはSVGのコードがそのまま記述されていることが分かります。

fig

これまであったPNG形式のイメージファイルは一掃され、CSSのインラインSVGによってアイコンが描画されるようになったのです。

DOMを削減して性能向上

jQuery Mobileでは、基のHTMLファイルに対して実行時に動的なDOMが多数追加され、それによってさまざまなレイアウトや動作を実現しています。しかし、この多数のDOMがブラウザのレンダリング処理の負荷になり、動作を重くしている原因の1つでもありました。

jQuery Mobile 1.4では、追加されるDOMが削減され、性能向上が計られていると説明されています。jQuery Mobile 1.4のリリースを発表したブログから引用します。

To improve performance we reduced DOM manipulation. Generation of inner markup for elements styled as butons has been completely removed. In many cases the framework just adds classes to the native element during enhancement and we even reduced the amount of classes that are added by the framework.

性能向上のためにDOM操作を削減しました。要素をボタンとしてスタイルするための内側のマークアップ生成は完全に廃止されました。多くの場合、このフレームワークは拡張のために基の要素にクラスを追加するだけで、またその追加クラスの多くも削減されています。

そのほかデフォルトのテーマがフラット対応になるなどの変更点があります。

Tags: JavaScript Web技術 jQuery Mobile モバイル

このエントリーをはてなブックマークに追加
ツイート
follow us in feedly





タグクラウド

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準

アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本