3

私はスタイルシート（hi-dpi.css）を持っていて、それには高解像度のアセットがたくさん含まれており、その多くはインライン（データURI）です。ただし、現在はページのレンダリングをブロックしています。

これに対処するための最良の方法は何ですか？

おそらく<link rel=stylesheet>ページの後にタグを書きますloadか？

4

2 に答える 2

0

このスクリプトを head に入れると、ブロックせずに読み込まれます ( test )。

setTimeout(function () {
    var el = document.createElement('link'),
        sc = document.getElementsByTagName('script')[0];
    el.rel = 'stylesheet';
    el.href = 'hi-dpi.css';
    sc.parentNode.insertBefore(el, sc);
}, 30);

サイズが大きすぎる場合は、複数に分割する必要がある場合があるため、ダウンロードは並行して行われます。

于 2012-06-16T03:17:13.390 に答える
0

先に進む前に、これを尋ねなければなりませんが、CSS に多くの「高解像度アセット」が本当に必要なのでしょうか? つまり、私だけかもしれませんが...

だからここに私の提案があります：「元のスタイルシート」のdata-uriを除いてすべてをロードします（ページレンダリングが画像サイズと宣言される可能性のあるものを取得できるように）が、すべてを含むページの最後に2番目のファイルシートがありますそこに実際の data-uri があります。文字通りページの最後の要素

それが機能するかどうかは完全にはわかりませんが、問題の軽減に役立つはずです。

その理由は、レンダリング エンジンが正しくレンダリングするために幅、CSS ボックス モデルなどを知る必要があるためですが、グラフィック エンジンの場合、イメージのレンダリングに時間がかかる傾向があるためです (これは私の理解です)。自体がかなり大きいので、ダウンロードに時間がかかります。そのため、ページにすべての CSS ボックスモデルなどを与えることで、レイアウトを行い、最後に画像を読み込むことができます。

これを読みたいかもしれません: http://developer.yahoo.com/performance/rules.html

そして、ここに私の代替オプションがあります：

現在の CSS に低解像度の画像を読み込み (ページに何かが表示されるように)、フッター CSS に高解像度の画像を読み込み、低解像度の画像を上書きします。

于 2012-06-16T03:17:29.593 に答える