問題タブ [html-rendering]

問題の HTML 要素のサイズを取得しようとして、問題に直面することがあります。

JavaScript コードをトレースしていると、この要素の幅と高さが 0 として返されることがわかります。

ブラウザのコンソールで同じコードを実行すると、正しいサイズが返されます。

この問題を示すコード例は次のとおりです。

このコードは、アンカーにラップされた画像を取得し、その上に中央に配置する必要がある「再生」ボタンで装飾します。

テーブルセルはセンタリングに使用されます。

Firefox では問題なく動作しますが、Safari 5 では動作しません。

コードをトレースすると、幅と高さを取得する "w" 変数と "h" 変数の値が 0 であることがわかります。

ブラウザのコンソールから言うと

正しいサイズの画像が得られます。

私は何かが欠けていると思います...

「レンダリング完了」のようなイベントをキャッチする必要があると思います...しかし、私の知る限り、それらはDOMに表示されません。

HTML 要素がレンダリングされ、100% 確実に表示されたときに、正しいサイズを扱っていることをどのように知ることができますか?

Safari または Chrome ブラウザを使用して次の URL にアクセスします: http://aspspider.net/sunlight1000/two_col_div_layout_w3valid.htm 緑のボックスの高さが赤のボックスの高さより大きくなるように、ブラウザのウィンドウの幅を設定します。次に、ブラウザのウィンドウの下端をつかみ、緑色のボックスの下端にドラッグして、その周りで遊んでください。ブラウザのウィンドウの下端が緑のボックスの下端より高くなると、赤いボックスが消えます。次に、ブラウザのウィンドウの高さを縮小し続けると、赤いボックスが再び表示されます。ブラウザのウィンドウの下端が赤いボックスの下端に到達した瞬間に、赤いボックスが再び表示されることに気付くでしょう。他のブラウザー (IE、FF、Opera) では赤いボックスが消えることはありません。これは Safari のバグですか、それとも何らかの「機能」ですか? いずれにせよ、Safari で赤いボックスが消えないようにするための回避策を誰かが提案してくれれば、非常にありがたいです。

私はこのページを持っています

http://kornar.co.uk/example.html

ただし、HTMLはレンダリングされません。view sourceHTMLコードがそこにあることを確認すると、ローカルホストで完全に機能するので、そこにあることを知っています。あなたの助けに感謝します!!

私はJavaでWebブラウザを構築することに取り組んでいます。パーサー（JTIDY）を使用して、HTMLページをDOMドキュメントに解析しました。レンダリングとは、DOMドキュメントのグラフィック表現を意味することを私は知っています。しかし、JavaでのHTMLレンダリングのエンジニアリングプロセスが何であるかはわかりません。Javaには、解析およびレンダリングするJEditorkitがありますが、整形式ではありません。だから私はより良い解決策が欲しいのです。

私の質問は、HTMLレンダリングとJavaでの完全なWebページの表示の実際のプロセスは何ですか？

タイトルが説明しているように、CSS3 の一部に問題があります。私のウェブサイトarticleでは、

(さらに、簡潔にするために省略されている 3 つのブラウザー ベンダー プレフィックス)

内部のコンテンツをまっすぐに保つために (背景だけが回転されます)、記事内のすべての要素を回転させて元に戻します。

記事 (ブログの投稿) の内部には、通常、いくつかの がpあり、中には浮動画像が含まれている場合もあります。ただし、次のように画像を右に浮かべると:

2 つ目<p>はイメージの左側に配置されますが (フロートするため)、ブロック レベルの要素であるため、 の幅全体を占め、フローティング イメージarticleと重なり、リンクをクリックできない場所もあります。を無効にすると、transform: rotateこれは起こらないので、回転がレンダリングされる方法に関係していると思います。この問題は Chrome と FireFox で発生します。IE は回転をサポートしておらず、Opera はテストしていません。

誰でも修正方法を知っていますか？

(例: http://www.stephanmuller.nl/portfolio/stephanmuller-nl/ )

ケース 1:

多くの複雑なレイアウトとフォントを含む非常に大きな HTML ページを読み込みます。ページのレンダリングには不明な時間がかかります。

ケース 2:

jquery .html() 関数を使用して、DOM に大幅な変更を加えています。変更された DOM のレンダリングには不明な時間がかかります。

どちらの場合も、ページのレンダリングが完全に完了するまで、画面全体をスピナーでカバーできるようにしたいと考えています。

この質問に対する回答を探していると、同様の質問がされていることがわかりましたが、回答は関連していません。明確にするために：

いつ DOM の準備ができるか知りたくありません。

HTTP データがいつ取得されたか知りたくありません。

DOM 内のすべてが完全に画面に描画されたときを知りたいです。

最悪の場合のタイムアウトを設定することは、受け入れられる解決策ではありません。

WebKit ベースのブラウザー用のソリューションが必要です。

Mobile Safari と iOS を使用して Web ページをブラウズすると、単純ですが予期しないレンダリングの問題が発生します。

基本的に、私のページにはタブがあり、タブは 3 つの div と、タブの中央の div 内にある「a href」で構成されています。両側の div には背景が含まれ、中央のリンクには画像があります。何らかの理由で、a href の背景に Mobile Safari で黄色の横線が表示されます。

http://i.stack.imgur.com/jlKHf.jpg

デスクトップブラウザでは問題なく動作します：

[別のリンクを追加できませんでした。白っぽいはずです]

別の画像で試しましたが、成功しませんでした。背景を中央の div に追加しようとしましたが、成功しませんでした。何が起こっているのか分かりますか？

前もって感謝します。

ウェブサイト (1.3MB) の速度に問題があります。この問題は特に Internet Explorer (7,8) に関連しています。現在、レンダリング時間を測定するツール（HTML、JavaScript、CSS）を探しています。

手伝ってくれてありがとう ！

よろしくお願いします

Web ページのスナップショットを撮りたい。画像には、ブラウザ ウィンドウのコンテンツ全体が表示されます (つまり、スクロール バーは表示されません)。

PHPスクリプトを使用してこれを動的に実行したいと考えています。

HTML レンダリング パフォーマンスのゲーティング ファクターは CPU であるとよく言われます。また、CPU速度、メモリ量、ディスク速度を個別に上げることでこれを見てきました.htmlレンダリングに影響を与える唯一の変更はCPUです.

HTML のレンダリングが CPU を集中的に使用するプロセスであるのはなぜですか (別の言い方をすれば、HTML レンダリングで CPU 速度がゲーティング要因になるのはなぜですか)。