1

CSS のプロパティに関する興味深い記事を見つけましたwill-change(これにより、何が変更され、積極的に反応するかを事前にブラウザーに伝えることができます)。このプロパティの背後にある主な理由は、パフォーマンスを向上させることです。

私が理解している限り、次のように使用できます: jsFiddle (四角をクリック)

<div class="element"></div>

.element {
    width: 50px;
    height: 50px;
    margin:30px;
    background: red;
    transition: transform 1s ease-out;
}
.element:hover {
    will-change: transform;
}
.element:active {
    transform: rotate(90deg);
}

ここまでは順調ですが、パフォーマンスの改善について語るには、この改善を測定する方法が必要です。

では、パフォーマンス、CPU/GPU 使用率の有無を測定する方法はありwill-changeますか?

この記事の執筆時点では、Chrome Canary 36 以降、Opera Developer 23 以降、および Firefox Nightly のみが will-change プロパティをサポートしています。安定したチャネルにも出荷する意図があります。

4

1 に答える 1

0

これは今日のコンパクト性です:: http://caniuse.com/#search=will-change

有効にできます 1. FPS メーター 2.ペイント長方形を表示

Google Chrome コンソールの [レンダリング] タブ。will-change プロパティを使用している場合、FPS レートは 60 FPS から低下しません。また、ショー ペイントの四角形も表示されません。

Will-change プロパティは、固定要素に追加する場合に最も効果的です。(スクロール時)

于 2015-07-21T12:51:22.870 に答える