問題タブ [rendering-engine]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - CSSはブラウザによってどのように適用され、再描画はブラウザの影響を受けますか？
単一のスタイルシートを持つHTMLページがあるとしましょう<link>。ブラウザはこのスタイルシートのルールをどのように取得してHTMLに適用しますか？私はそれをより速くする方法について尋ねていません、私はレンダリング自体がどのように扱われるか知りたいです。
スタイルシートを解析して結果を段階的にレンダリングするときに、各ルールを1つずつ適用しますか？または、CSSファイルのコンテンツが完全にダウンロードされ、完全に評価されてから、HTMLに一度に適用されますか？または、他の何か？
レンダリング速度に影響するCSSルールの順序に関する質問に先に回答を投稿した後、スタイルシートがロードされたときにスタイルがレンダリングされることを前提として、これを尋ねます。したがって、最初のルールは最後のルールの前に適用され、一度にすべてではありません。どこでアイデアを思いついたのかわかりませんが、それは私がいつも考えていたものです。
サーバーで次のようなデモを試しました。
test.cssコンテンツ：
Firefox 5でテストすると、最初は緑になり、次に赤に変わると思っていました。それは起こりませんでした。ルールが競合する2つの別々のスタイルシートを試してみたところ、同じ結果が得られました。多くの組み合わせの後、私がそれを機能させる唯一の方法は、のインライン<style>ブロックであり<head>、競合するルールはから来ています<link>（<body>リンクタグを除いて本体自体は完全に空でした）。タグにインラインstyle属性を使用し、<html>このスタイルシートをロードしても、期待したちらつきは発生しませんでした。
再描画はCSSの影響を受けますか、それともスタイルシート全体がダウンロードされ、最終出力がどうあるべきかについてルールが計算された後、最終出力が一度に適用されますか？CSSファイルはHTML自体と並行してダウンロードしますか、それとも（スクリプトタグのように）ブロックしますか？これは実際にどのように機能しますか？
私は最適化のヒントを探していません。将来それらを引用できるように、この主題に関する信頼できる参考文献を探しています。関係のない大量の資料を見つけずにこの情報を検索することは非常に困難でした。概要：
- すべてのCSSコンテンツは、適用される前にダウンロードされますか？（参考にしてください）
@importこれは、複数<link>のs、インラインスタイル属性、<style>ヘッド内のブロック、さまざまなレンダリングエンジンなどの影響を受けますか？- CSSコンテンツのダウンロードは、HTMLドキュメント自体のダウンロードをブロックしますか？
javascript - javascript から chrome pdf レンダリング機能にアクセスする方法
Chromeのjavascriptからchrome pdfレンダリング機能にアクセスする方法を知る必要があります（ただし、firefoxなども同様です。今はchromeから始めます）。単一のページを管理できるようにしたいと考えており、パフォーマンスに関心があります。クロムはレンダリングが速いことがわかります。ありがとう
opengl - OpenGL _2D_ プログラミングを予約しますか?
数百 (おそらく数千!) の画像を画面に描画する必要があります。作業の大部分は 2 次元になります。カメラ、変換、シーンの回転に 3D を使用しますが、主に 2D のパフォーマンスに関係します。この特定のテーマに関する本はありますか?
1) 2D OpenGL プログラミングのベスト プラクティスを学ぶ
2) シェーダーと派手なエフェクト
3) 2D レンダリング操作の最適化。
html - prestoエンジンのcssプレフィックス
ウィキペディアによると、prestoのプレフィックスは-XV-
-O-prestoブラウザのプレフィックスがまたはであるかどうかを知りたいと思いました-XV-。ウィキペディアは間違っていますか？
asp.net-mvc-3 - ページを作成している cshtml ファイルを表示するにはどうすればよいですか?
シナリオ
私のチームは、かなり複雑な MVC3/C# サイトを構築しています。最近、いくつかのリファクタリングが行われ、多くのビュー、部分ビュー、およびテンプレートが移動しました。ページの 1 つを見ると、どの cshtml ファイルがページのどの部分を担当しているかを判断するのは困難です。作業中のファイルをすばやく確認する方法が欲しいです。
なぜ問題なのか
- プレゼンテーション層には多くのファイルがあり、フォルダー構造は複雑です。
- 一部の cshtml ファイルは同じ名前ですが、ファイル パスが異なります。
- ルーティング テーブルも同様に複雑です。
- レイアウト、共有ビュー、部分ビュー、およびテンプレートを大幅に活用しました。1 つのページには、それを構築する 10 個以上の cshtml ファイルを含めることができます。
- クライアント側のテキストのほとんどはリソース文字列に由来するため、ページ上のテキストに対して Ctrl-F だけを使用することはできません。
- デバッガーをステップ実行しても、多くの時間を節約できません。
これらのことはどれもショーストッパーではありませんが、これには時間がかかります.
私が欲しいもの
ローカルホスト (のみ) で実行すると、レンダリングされた HTML が次のようになります。
サードパーティのツールを含め、必要な情報を取得する他の方法を受け入れます。
これまでのアイデア
私の考えは、私たちが使用している基本クラスを微調整することでしたpageBaseTypeが、私はMVCに少し慣れていないため（1年未満）、まだ頭に残っています。どのメソッドをオーバーライドするか、またはビューのファイル名を取得してレンダリングする方法がわかりません。
internet-explorer - IE8互換性ビュー
開発の観点から、IE8の互換性ビューと通常のビューの基本的な違いは何ですか？IE8の通常のビューで正しく機能しないもののいくつかは、互換表示で機能することがわかります。技術的な違いや、IE8が別のビューで実行されているアプリケーションスクリプトを処理する方法に違いはありますか？
performance - 実際のフロントエンドのレイアウトやレンダリングのパフォーマンスに大きな影響を与える可能性のある CSS セレクターまたはルールはどれですか?
CSS レンダリングのパフォーマンスについて心配する価値はありますか? それとも、CSS の効率性についてまったく心配する必要はなく、代わりに洗練された保守可能な CSS を書くことに専念するべきでしょうか?
この質問は、CSS のどの部分が実際にデバイスのパフォーマンスに重大な影響を与える可能性があるか、どのデバイス/ブラウザーまたはエンジンが影響を受ける可能性があるかについて、フロントエンド開発者にとって役立つリソースになることを目的としています。これは、洗練された、または保守可能な CSS の書き方に関する問題ではなく、純粋にパフォーマンスに関する問題です (ただし、ここに書かれている内容が、ベスト プラクティスに関するより一般的な記事に役立つことを願っています)。
既存の証拠
GoogleとMozillaは、効率的な CSS を記述するためのガイドラインを作成しており、CSSLint の一連のルールには次のものが含まれます。
正規表現のように見えるセレクターは避けてください。パフォーマンスの低下を避けるために、複雑な等値演算子を使用しないでください。
しかし、それらのどれも、これらが持つ影響の証拠を (私が見つけた限り) 提供していません。
効率的な CSSに関するcss-tricks.com の記事では、(大量の効率のベスト プラクティスを概説した後) 最近はすべきだと主張していnot .. sacrifice semantics or maintainability for efficient CSSます。
完全性を殺すブログ投稿は、単純な CSS ルールよりもレンダリングが桁違いに遅くなることborder-radiusを示唆していました。box-shadowこれは、Opera のエンジンでは非常に重要でしたが、Webkit では重要ではありませんでした。さらに、大ヒット雑誌の CSS ベンチマークでは、CSS3 表示ルールのレンダリング時間はわずかであり、画像を使用して同等の効果をレンダリングするよりも大幅に高速であることがわかりました。
Know your mobileがさまざまなモバイル ブラウザーをテストした結果、CSS3 のレンダリング速度はどれも同等であることがわかりました (12 ミリ秒)。全般的。
効率的な CSS の書き方については、インターネット上に多くの記事があります。 しかし、よく考えられていない CSS が実際にサイトのレンダリング時間やスナッピングに重大な影響を与えるという包括的な証拠をまだ見つけていません。
バックグラウンド
SO のコミュニティの力を利用して、十分に研究された有用なリソースを作成するために、この質問に報奨金を提供しました。
3d - 空間内の3Dオブジェクトの2D位置を計算するのに役立つC＃3Dグラフィックライブラリはありますか？
私の目標は、いくつかのオブジェクトを3D空間に配置し、Render（）を呼び出すことです。これにより、このライブラリは、各オブジェクトの2D画面上のレンダリング位置を教えてくれます。
または、3Dゲームエンジンのようですが、レンダリング部分を引き継ぎたいので、これらのオブジェクトを自分でレンダリングしたいと思います。
誰か助けてもらえますか？
html - ブラウザ ウィンドウのサイズを変更しない限り、AJAX を使用して読み込まれた画像は非表示になります
http://new.damir.com.auをご覧ください。ポートフォリオ セクションの下に表示されている 2 つのポートフォリオ アイテムのいずれかをクリックします。
AJAX を使用して、1 つのファイルから HTML (イメージ タグを含む) を読み込み、それを親ファイルに挿入しています。画像がレンダリングされていないことを除いて、すべてが意図したとおりに機能します。HTML イメージ タグはありますが、ブラウザ ウィンドウのサイズを変更しない限り、画面に表示されません。ウィンドウのサイズを変更すると、画面に表示されるものが更新され、画像が適切に表示されます。これが私のコードです：
opengl - フラスタムカリングへの「レーダーアプローチ」：最初の簡単なテストで失敗？
少なくとも、Lighthouse3D Radar Frustum Culling チュートリアルの非常に単純な パート 1 を機能させようとしています...そして、その部分を自分のレンダラーで機能させることさえできないことに完全に困惑しています。
したがって、最初のステップは次のとおりです。ポイントがニアプレーンの前にあるかファープレーンの後ろにあるかをテストし、そうであれば早期カリングします。（そうでない場合は、さらにテストを実行しますが、最初の部分だけで行き詰まっています。）
2x2 の立方体のワールド空間の中心 (x1y2z3) を使用し、自由に移動および回転できるカメラを持っています。レンダラーはそれ以外の場合は問題なく動作するため、すべてのベクターとマトリックスのものはかなりしっかりしている必要があります。したがって、この最初の部分である単純な「Z vs Near-or-far」テストの (Go での) 私の見解は次のとおりです。
では、なぜ ref の Z を逆にするのでしょうか? チュートリアルでは、彼らは次のように書いているからです。もちろんこれは逆効果ですが…
上記のように Z を反転すると、約 50% の確率で必要以上にカリングされます。そうしないと、約 98% の確率で「過剰選別」されます。
何が欠けていますか？