チューニング』、少し前にようやくという感じで読了。結構な情報量だし、JavaScript周りは圧倒的に理解が足らないので、おそらく読み直しが必要。画像を表示するimg要素には、height属性やwidth属性で大きさを設定することができます。無駄なLayoutを減らすには、このimg要素に対してheight属性とwidth属性を設定してください。画像が読み込まれていない段階では画像の大きさがわからないため仮の大きさで一度Layoutが行われます。画像が読み込まれ次第画像の大きさが変わることになるのでLayoutやそれに続くレンダリング処理が再度行われます。あって、なんとなくwidth/height属性は指定した方が良さそう、って気にならなくもない。感じで、画像の大きさは可変を前提とする)ことの多い昨今、あらかじめ素の幅と高さをマークアップで指定しておいたところで、その値通りに収まるケースは相対的に減っている訳で、あまり意味がない気もする(むしろ書かない方が若干だけどHTMLファイルの軽量化になるし、滅多にないけど大きさの異なる同じファイル名の画像に差し替える時にラク)。以前Twitterにそのあたりのモヤモヤを軽く吐き出したところ識者の方から超短時間内もしくはOSの次のイベントループに入る前に発生した複数回の変更は一度にまとめられるので安全です。JSで同期的に複数のレイアウト変更させてあっても一回と計算できます。別に発生することはないから、労力ほど変わりはしない気がするといったコメントをいただき、書籍に書かれてあるほど単純なお話ではなさそう、ということまでは理解したものの、それ以上の深追い(何)はしていません。Designing誌2004年8月号の特集記事「なぜ表示は遅くなるのか」で、100枚の異なる画像を表示させる際に、widht/height属性を与えた場合と与えなかった場合でページの表示速度がどう違うかの検証が紹介されています。それによると、ほとんどのブラウザで属性を"指定しない"方が1〜2割速いという結果になっていました。1秒未満の差であり、計測の誤差も考慮する必要はあるものの、「widht/height属性を指定する方が表示が速くなる」は、すでに神話と言っていいかも知れません。記していたのが思い出されます。2004年当時からすれば、表示パフォーマンスの計測は比較的容易になりましたし、それゆえ1秒未満の時間であってもそれを安易に誤差と片付けずストイックに改善することが求められる風潮を微妙に感じなくもない現代において、width/height属性の指定が表示パフォーマンス上、果たして本当に有効なのかどうか......ブラウザーに依らず一義的な正解を出すことがそもそも可能かを含め、ファイナルアンサーが待たれます(他力本願)。なんか全然、書籍の感想になってないけど気にしない。チューニング著作者について@kazuhitoは、木達一仁の個人サイトです。宇宙開発や人力飛行機、Webデザイン全般に興味があります。Apple製品と麺類とコーヒーが好きです。南極には何度でも行きたい。「アクセシビリティおじさん」としてWebアクセシビリティ・ファースト推進中。自己紹介もご覧ください。feed3TwitterFacebookLinkedInFlickrInstagramFoursquareFeedご注意コンテンツの正確性や信頼性には配慮していますが、必ずしもそれらを保証はしません。コンテンツにある意見や見解は、個人の立場において述べたものであり、所属組織等を代表するものではありません。コンテンツの利用およびその結果に対し、一切の責任を負いかねます。AnalyticsとAddThisを利用しており、その目的においてクッキーを使用しています。私は、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。