7 月 04 2008
AutoPagerizeでスクロールが重くなるのを回避する
ピンポイントネタ。
Firefoxの、Greasemonkeyというアドオンの、AutoPagerizeというスクリプトが、実はスクロールにかなりの負荷をかける仕様になってる、ということへの対処法（代替スクリプト）が公開されていました。
AutoPagerize を少し高速化 (update 0.0.31) - GANAwareはてな版
何それ？という人のために簡単に説明します。
まず、Greasemonkeyとは、ユーザがウェブを閲覧するとき任意にスクリプトを実行させることができるようになる拡張。つまり、ユーザスタイルシートじゃできないような挙動や表示に関する細かいページのカスタマイズが可能になるわけです。
＊可能になるだけで、別個スクリプトをインストールする必要があります。
＊Greasemonkeyは多少、セキュリティ上に問題があるそうです。自己責任でお願いします。
AutoPagerizeはその代表的なスクリプトで、たとえばGoogle検索とかITmediaの記事みたいな何ページにもわたる内容を、下方にスクロールするだけで（ページを切り替えずに）次々と表示してくれるというシロモノです。
Live Search 画像検索みたいな状態、と言えば分かりやすいでしょうか。
で。非常に便利なのはいいんですが、CPU使用率を見てみると、AutoPagerizeがオンの時は通常より、スクロールに３倍くらいの負荷がかかっているようでした。
原因は「FirefoxのレンダリングはCSSの position: fixed; 系に弱いため」みたいです。
紹介したganawareさんの修正版では、position:fixed を position:absolute に変更し、スクロール後１秒たったらバーの位置に合わせて top: を修正する、…という方法で対処されているとのことです。なるほど！
ついでにスクロールが重くなる状況について少し調べてみました。
position: fixed; だけでなく、背景画像を固定するための background-attachment: fixed; とも相性が悪いようです。たとえば、以下のようなページをFirefoxで閲覧すると、スクロールが激重になるはずです。C2Dでも楽々CPU使用率50％突破しました。
特にFirefox 2.0の方が顕著で、overflow: auto; とかと組み合わさると描画が乱れたりします。Firefox 3.0では解決されてると思いきや、…どうやら負荷がかかりやすいのは相変わらずのようですね。
＊スクロールが重くなるサンプルページ
（スムーズスクロール有効だとより重くなります）
サンプルHTML
<body> <div> <pre>スクロールが重くなる</pre> <pre>スクロールが重くなる</pre> ...... <pre>スクロールが重くなる</pre> </div> </body>
サンプルCSS
body {
/* fixed: スクロールが重くなる scroll: 通常 */
background: #eee url(./bodybg.gif) fixed;
}
pre {
/* auto または scroll: 描画が乱れやすい hidden: 通常 */
overflow: auto;
}
ウェブを作るときは注意しないと、ですね。
[...] 脳の中の風船 | AutoPagerizeでスクロールが重くなるのを回避する (tags: autopagerize greasemonkey) [...]
AutoPagerize 0.41 mod (userContent.js用)
Firefox 3.6 RC1が出ていたので一足速くアップデートしたが、AutoPagerizeが動かなくなってしまった。私はGreasemonkeyではなく userContent,jsを使っており、バージョンも少し前の0.35 modを使っていた…