この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
広告
posted by fanblog
2018年09月21日
HTML、javascript、jQuery、css高速化あれこれ
速度改善を指示された時に調べたまとめ
速度改善じゃなくて最初の実装時に意識したいですね。。。
速度改善じゃなくて最初の実装時に意識したいですね。。。
ページの調査
１．Google PageSpeed Insights
ページURLを入力することで、高速化するためのサイト改善のヒントが得られる。
すべての項目に対応する必要はないが、対応できる部分は対応することでサイトの高速化がはかれる。
すべての項目に対応する必要はないが、対応できる部分は対応することでサイトの高速化がはかれる。
javascript、jQuery編
１．scriptタグはbody要素の最後に
javascriptファイルの読み込み、解析時は他のファイルの読み込みや、ブラウザの描画が止まってしまうようなので、処理上問題がなければbody要素の最後（の直上に）配置するようにする。
２．javascriptファイルは出来る限り外部ファイルで作成する
HTMLファイルは毎回ダウンロードされるため、javascriptファイルは出来るだけ外部ファイルで作成し、キャッシュされるようすることで、HTMLのダウンロードサイズを減らすことができます。
ただし、javascriptファイルの更新時にキャッシュが残ってしまうため、パラメータを付与するなどjavascriptファイル更新時の対策を検討する必要があります。
ただし、javascriptファイルの更新時にキャッシュが残ってしまうため、パラメータを付与するなどjavascriptファイル更新時の対策を検討する必要があります。
2018年09月19日
jQueryの要素存在チェック
jQueryによる要素の存在チェック方法です。
他にもやり方はあると思いますが、自分が良く使うものをメモ
他にもやり方はあると思いますが、自分が良く使うものをメモ
１．$(selector)[0]
if($(selector)[0]){
alert("OK");
} else {
alert("NG");
}
alert("OK");
} else {
alert("NG");
}
２．$(selector).length
if($(selector).length){
alert("OK");
} else {
alert("NG");
}
alert("OK");
} else {
alert("NG");
}
３．$(selector)size()
if($(selector)size()){
alert("OK");
} else {
alert("NG");
}
alert("OK");
} else {
alert("NG");
}
まとめ
sizeやgetを使う方法もありますが、個人的には上の2つをよく使ってる気がします。
また、処理速度を気にするならjQueryを使用しない↓が良いかと。。。
document.getElementById("id") != null
また、処理速度を気にするならjQueryを使用しない↓が良いかと。。。
document.getElementById("id") != null
2018年09月18日
jQueryセレクタのまとめ
たまにド忘れするので、jQueryのセレクタまとめました。
基本的なセレクタ
１．要素で指定する
$("要素名")
２．idで指定する
$("#id名")
※セレクタでidを指定する場合は「#」を使用する
３．classで指定する
$(".class名")
※セレクタでclassを指定する場合は「.」を使用する
複数条件での指定
１．AND条件での指定
要素、id、class等をつなげて記載する
例：「test」というidを持つdiv要素
$("div#test")
$("div#test")
例：「test」と「dummy」の２つのclassを持つ要素
$(".test.dummy")
$(".test.dummy")
２．OR条件での指定
要素、id、classなどを「,」でつなげて記載する
例：「test」classまたは「dummy」classを持つ要素
$(".test,.dummy")
$(".test,.dummy")
例：a要素または「test」というidを持つ要素
$("a,#test")
$("a,#test")
階層での指定
１．先祖要素を指定する
先祖要素＋スペース＋対象要素となるように記載する
例：「test」idを持つ要素内にある「dummy」classを持つ要素
$("#test .dummy")
$("#test .dummy")
２．親要素を指定する
「>」で「親 > 子」となるように記載する
例：「test」idを持つ要素を親に持つ「dummy」classを持つ要素
$("#test > .dummy")
$("#test > .dummy")
兄弟要素の指定
１．前後関係を指定して要素を指定する１
「+」でつなげて記載する
例：「test」idを持つ要素の次の「dummy」classを持つ要素（兄弟要素）
$("#test + .dummy")
$("#test + .dummy")
２．前後関係を指定して要素を指定する２
「~」でつなげて記載する
例：「test」idを持つ要素以降に出てくる「dummy」classを持つ全ての要素（兄弟要素）を指定
$("#test ~ .dummy")
$("#test ~ .dummy")
