1

ライトボックスまたは画像スライダーを実装する場合、私の通常のアプローチは、以下のように、固定の幅と高さの要素内にスライドを含む要素をネストすることoverflow:hidden;です。

CSS3スライダー図

余白をアニメーション化することで、スライドを表示領域内で滑らかに移動できます。

私は最近、フルスクリーンスライドを使用し、RetinaディスプレイiPadをターゲットとするこのようなスライダーを実装しています。スライドは画像ではなく、HTMLの個別のチャンクであり、一部には高解像度の埋め込みメディアが含まれています。デバイスのパフォーマンスは許容範囲内ですが、確実に改善される可能性があります。

私の質問は、この種のWebアプリのクライアント側のパフォーマンスを最適化しようとするときに、実際にどのような要素を考慮する必要があるかということです。たとえば、CSS3トランジションは、ハードウェアアクセラレーションの結果として優れていると見なされていることを私は知っています。

WebKitがより満足できるDOMをレイアウトする方法はありますか？

「遅延読み込み」の非表示ページは実際に影響を与える可能性がありますか？もしそうなら、DOMのサイズを制御するためにすでに見られている古い要素を積極的に削除する価値がありますか？

現在、各スライドは非同期で読み込まれていますonLoad。すべてのHTMLを一度にブラウザに提供することで（一部のHTTPリクエストを保存する以外に）パフォーマンスに影響はありますか？

私はあなたが思い付くことができるどんなヒントやトリックにも非常に感謝します！

4

1 に答える 1

1

OK、ここで覚えておくべきことがいくつかあります。

  1. 再塗装は避けてください。変換と遷移を使用できる場合は、実行してください。ブラウザはあなたが何をしているかを知っているので、必要のないときに再描画を避けることができます。私はこれを数年前に書きました：http：//css3.bradshawenterprises.com/sliding/、これはこれを行う方法を説明しています。jQueryanimateの使用へのフォールバックは一般的な選択肢です。私はこれを行うためのかなり醜い方法をここに書きました：http：//css3.bradshawenterprises.com/legacy/、しかしあなたはおそらくそれをより良い方法で書く方法について考えることができます。jQuery 1.8は、たとえばベンダープレフィックスを抽象化して、私の醜いコードの多くを回避します。

  2. transform: translate3d(0,0,0);可能な場合は3D変換を使用します。移動ビットにを追加することで、少しごまかすことができます。これにより、Webkitの新しいレイヤーに強制され、Webkitの一部のバージョンで役立ちます。

  3. メモリ使用量とDOMオブジェクトについては、ChromeまたはSafariのタイムラインインスペクターを使用してスライダーを使用して自分自身を記録し、何が起こっているかを確認します。iOS 6.0にアクセスできる場合は、Safariでデバイスに接続して、デバイスで直接インスペクターを使用できます。

  4. https://developer.apple.com/videos/wwdc/2012/?id=601は、この種のことを扱ったビデオであり、一見の価値があります。そのページにアクセスできない場合は、iTunes U経由でビデオを入手できると思いますが、それは私も開発者だからかもしれません...いずれにせよ、ビデオのタイトルは「UIWebViewsでのWebコンテンツの最適化」です。およびiOS上のWebサイト」。

つまり、測定、記録、分析、実験を行います。

于 2012-07-27T14:56:50.257 に答える