モバイルでの高速化でなんか知ってることねがぁ〜〜〜?てよっしーに聞いたら出てきた。
will-changeって使ってますか?え?なにそれ?未来の話??(よく見たら未来の話でした。一番下に対応ブラウザ書いてますがiOS Safari対応してません)
概要
Dev.Opera — CSS will-changeプロパティについて知っておくべきこと
https://dev.opera.com/articles/ja/css-will-change-property/
saraさんだぁ〜。最近良く見るなぁ。(これとか。http://postd.cc/the-state-of-svg-animation/)
どうやらGPUアクセラレーションのおまじないの新しいやつみたい。
transform: translateZ(0);
の新しい版。
事前にブラウザに何のプロパティを変化させるかを伝えておいて、それに描画を最適化させる準備をしてもらう→最初からGPU枠をあてがう(日本語おかしい?)のでカクついたりへんなバグが出ない。的な。
ただしいつもどおり、
使いすぎるな、
使い終わったら消せ、
とのこと。
美味しいビールも飲み過ぎたら身体に毒だよ程々にね、ということだね!わかりやすい!!!
スタイルシートで宣言されたwill-changeは削除できません
って書いてあるから基本JSで制御するらしい。不思議や。
対応ブラウザ
ん?っておい
一年前の記事執筆時点で対応がChrome Canary 36+、Opera Developer 23+、Firefox Nightlyだけってなんだよ。俺は今の今使える技術はねぇかって聞いたんだよー!
Can I use… Support tables for HTML5, CSS3, etc
http://caniuse.com/#feat=will-change
iOS Safari対応してないじゃねぇか…!よっしーめ!!!
コメントを残す