0

私のサイトのいくつかのページはIE8で非常に遅くなっています。多くのコンテンツを含むページは、すべてのブラウザーで遅くなりますが、IE8では遅くなります。手続き型のPHPとデータベースのクエリがたくさんあるので、そもそも読み込みが遅いと思います。

しかし、私の主な関心事は、これらのページがie8に読み込まれた後、どれほど遅くなるかということです。いくつかのjQueryスライドダウン効果があり、ie8がそれらをレンダリングするのに苦労するのではないかと思います。

コンテンツがほとんどないページは次のとおりです。http://searchfornutrition.com/?pageid = topic&topicid = acai

ボタンからのスライドダウンは正常に機能し、jQueryは高速/通常です。

今ここにたくさんのコンテンツがあるページがあります:http ://searchfornutrition.com/?pageid = topic&topicid = vitamin_d

ボタンからのスライドダウンが遅いです。

IE8で別のコンピューターをチェックしましたが、同じです。私はこのサイトのためにすべてのユニークなプログラミングをしました、そして私は専門家ではありません。このサイトを利用することで、Web開発について知っていることをすべて学んだので、IE8でない場合は、おそらく私です。

あなたが与えることができるどんな助けにも感謝します。


編集:

Chrome開発ツールの[ネットワーク]タブを試してみたところ、そもそもページの読み込みが非常に遅い理由に関しては非常に役に立ちました。不要な.cssリンクの中には、ロードに数秒かかるものもありますが、ほとんどはドキュメント自体です。場合によっては、単独で最大30秒かかることがあります。これは、私のコードが効率的でないことを意味します。関数とOOPについて学ぶ前にサイトのほとんどを行っていたので、コードが効率的でないことはわかっていました。そのため、手続き型で非常に冗長です。更新を開始する必要があります。

IEの問題については、まだ正確にはわかりません。私はあなたの提案のいくつかを試してみて、IEがページを要求するたびにIEの代わりにFFまたはchromeをインストールするウイルスを作るかもしれません:P


編集2:

誰かがこれがどのようになったか疑問に思っている場合-最初に表示されているものだけをロードし、各ボタンが押されたときに各ボタンのスライドダウンに関連付けられたデータをajax(jQuery経由)でロードすることで、ロード時間を大幅に短縮できました。今でははるかに高速であり、私はまだいくつかの不要なCSSファイルを省略していません。IE8にロードした後もまだ低迷していますが、別の機会に取り組み、提案を考慮に入れます。ご協力ありがとうございます!

4

3 に答える 3

1

Fiddler2を使用して、ページの読み込みを確認します。JSとCSSがたくさんありますが、本当にすべて必要ですか?リソースは縮小および圧縮されていますか?応答が200で、キャッシュされたリソースを使用できる場合でも、作成するすべてのHTTPRequestには時間がかかります。リソースをオンデマンドでロードするか、単一のファイルにバンドルすることを検討してください。

jQueryは一般的にかなり最適化されており、IDまたはセレクターとともに要素を指定しない限り、IE6は低速でした。

あなたのページは、FF4、Chrome、IE9でも同じくらい遅いと感じました。

GET http://searchfornutrition.com/?pageid=topic&topicid=acai
200 OK (text/html)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_important.css?v=386
200 OK (text/css)

GET http://searchfornutrition.com/css/nav_unreg.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.core.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/js/jquery-ui-1.7.2.custom.min.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.dialog.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/buttons_jquery.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.draggable.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_css/style-07445fcb-00006.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/js/jquery-1.3.2.min.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/search_options.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.resizable.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_css/style-07445fcb-00006.css
200 OK (text/css)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_important.css?v=386
200 OK (text/css)

GET http://searchfornutrition.com/css/nav_unreg.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/js/jquery-1.3.2.min.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/js/jquery-ui-1.7.2.custom.min.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.core.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.draggable.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.resizable.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.dialog.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/buttons_jquery.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/alpha_buttons.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/search_options.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/js/custom-buttons.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/js/td-height.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/js/dialog_topics.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/css/custom-theme/jquery-ui-1.7.2.custom.css
200 OK (text/css)

GET http://searchfornutrition.com/css/button.css
200 OK (text/css)

GET http://searchfornutrition.com/nutrition_webrary/css/vert_scroll.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.all.css
200 OK (text/css)

GET http://searchfornutrition.com/nutrition_webrary/css/topics.css
200 OK (text/css)

GET http://searchfornutrition.com/js/star_rating.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.base.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.theme.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.resizable.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.accordion.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.dialog.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.slider.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.progressbar.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.datepicker.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.tabs.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.core.css
200 OK (text/css)

GET http://searchfornutrition.com/ripter-jquery.rating-7133e01/jquery.rating.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/ripter-jquery.rating-7133e01/jquery.rating.pack.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/ripter-jquery.rating-7133e01/jquery.rating.css
200 OK (text/css)

GET http://searchfornutrition.com/nutrition_webrary/js/error_report.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/reposition_tables.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/yui/yahoo-dom-event/yahoo-dom-event.js?v=386
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/yui/connection/connection-min.js?v=386
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_global.js?v=386
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_menu.js?v=386
200 OK (application/x-javascript)

GET http://searchfornutrition.com/clientscript/vbulletin_md5.js?v=386
404 Not Found (text/html)
于 2011-02-10T01:13:40.807 に答える
0

ie8は、他のほとんどの最新のブラウザーよりも要素セレクターの点で間違いなく遅いです。最適化するためにできることはたくさんあります。1つは、可能であればIDで選択する必要があります。私は過去に、つまり大きなページでも遅くなる傾向があることに気づきました。

于 2011-02-10T01:04:45.270 に答える
0

グラデーションを作成するための繰り返しの背景画像として、1ピクセル幅の画像(および2ピクセル幅の画像)がいくつか使用されていることに気付きました。最近、大規模なサイトでパフォーマンスの問題が発生しましたが、背景画像のサイズを大きくすることで解決しました。

私は個人的に原因を調査していませんが、背景画像が繰り返される場合、ブラウザは各繰り返しを個別にレンダリングする必要があることを理解しています。たとえば、1,000ピクセル幅の要素に1ピクセル幅の背景がある場合、その画像は1,000回レンダリングする必要がありますが、50ピクセル幅に引き伸ばされた同じ画像は20回だけレンダリングする必要があります。IEは、最良の場合は他のブラウザよりも低速になる傾向があり、より深刻な影響を受けます。

もちろん、画像の幅を広くすると、画像のサイズは大きくなりますが、期待したほどではありませんPNGとGIFはどちらも、反復データ(特に水平方向に反復データ)の処理に非常に優れており、ファイルサイズへの影響を最小限に抑えます。

個人的には、繰り返しの方向に50px未満の繰り返し画像を作成することはありません。この変更を行うと、私のサイトのアニメーションパフォーマンスが大幅に向上しました。

于 2011-02-10T01:40:28.687 に答える