问题标签 [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 - How is CSS applied by the browser, and are repaints affected by it?
Let's say we have an HTML page with a single stylesheet <link>. How does the browser take the rules in this stylesheet and apply it to the HTML? I'm not asking about how to make it faster, I want to know how the rendering itself is handled.
Does it apply each rule one-by-one as it parses the stylesheet and render the result progressively? Or, are the CSS file's contents completely downloaded, then fully evaluated, and then applied to the HTML all at once? Or something else?
I ask this after posting an answer earlier on a question about CSS rule order affecting rendering speed, with the assumption that the styles were rendered as the stylesheet loaded, so the first rules would be applied before the last ones, and not all at once. I'm not sure where I picked up the idea, it's just something I have always thought.
I tried a demo on my server that looked like this:
test.css contents:
Testing in Firefox 5, I expected to see green at first, then turn to red. It didn't happen. I tried with two separate stylesheets with conflicting rules and got the same results. After many combinations, the only way I got it to work was an inline <style> block in the <head>, with the conflicting rules coming from a <link> in the <body> (the body itself was completely empty except for the link tag). Even using an inline style attribute on the <html> tag, and then loading this stylesheet did not create the flicker that I expected.
Are repaints affected in any way by the CSS, or is the final output applied all at once after the entire stylesheet is downloaded and it's rules computed to what the final output should be? Do CSS files download in paralel with the HTML itself or block it (like script tags do)? How does this actually work?
I am not looking for optimization tips, I'm looking for authoritative references on the subject, so that I can cite them in the future. It's been very difficult to search for this information without turning up tons of unrelated material. Summary:
- Is all CSS content downloaded before any of it is applied? (reference please)
- How is this affected by things like
@import, multiple<link>s, inline style attributes,<style>blocks in the head, and different rendering engines? - Does the download of CSS content block the downloading of the HTML document itself?
javascript - 如何从 javascript 访问 chrome pdf 呈现功能
我需要知道如何从 chrome 中的 javascript 访问 chrome pdf 渲染功能（还有 firefox 等，现在我从 chrome 开始）。我希望能够管理单个页面并且我对性能感兴趣。我看到 chrome 渲染速度很快。谢谢
opengl - 关于 OpenGL _2D_ 编程的书？
我需要在屏幕上绘制数百（也许数千！）图像。大部分工作将在 2d 中进行。它将使用一些 3d 的相机、变换、旋转场景，但主要关注 2d 性能。有没有关于这个特定主题的书？
1) 学习 2d OpenGL 编程的最佳实践
2）着色器和花哨的效果
3) 优化二维渲染操作。
html - presto引擎的css前缀
根据维基百科presto的前缀是-XV-
我想知道 presto 浏览器的前缀是-O-or -XV-。维基百科错了吗？？
asp.net-mvc-3 - 如何显示哪些 cshtml 文件正在构建我的页面？
场景
我的团队正在构建一个相当复杂的 MVC3/C# 站点。最近有一些重构，许多视图、部分视图和模板已经移动。当我查看我们的一个页面时，很难判断哪个 cshtml 文件负责页面的哪个部分。我想要一种更快的方法来查看我应该处理哪个文件。
为什么这是一个问题
- 我们的表现层文件很多，文件夹结构复杂。
- 一些 cshtml 文件具有相同的名称，但不同的文件路径。
- 我们的路由表同样复杂。
- 我们大量使用了布局、共享视图、部分视图和模板。一个页面可能有超过 10 个构建它的 cshtml 文件。
- 大多数客户端文本来自资源字符串，所以我不能只 Ctrl-F 用于页面上的文本。
- 单步调试调试器并没有为我节省太多时间。
这些东西都不是一个炫耀的东西，但它们使这很耗时。
我想要的是
当我（仅）在 localhost 上运行它时，我希望呈现的 HTML 显示如下：
我愿意接受其他获取所需信息的方式，包括第三方工具。
到目前为止的想法
我的想法是调整我们用于pageBaseType. 我不确定要覆盖哪种方法，或者如何获取和呈现视图的文件名。
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这样做。
一篇完美杀死博客文章提出了这一点，border-radius并且box-shadow比简单的 CSS 规则慢了几个数量级。这在 Opera 引擎中非常重要，但在 Webkit 中微不足道。此外，一个轰动一时的 CSS 基准测试发现 CSS3 显示规则的渲染时间是微不足道的，并且比使用图像渲染等效效果要快得多。
知道你的手机测试了各种移动浏览器，发现它们都以同样的速度渲染 CSS3（在 12 毫秒内），但看起来他们在 PC 上进行了测试，所以我们无法推断手持设备在 CSS3 中的表现如何一般的。
互联网上有很多 关于如何编写高效 CSS 的文章。 然而，我还没有找到任何全面的证据表明，糟糕的 CSS 实际上会对网站的呈现时间或快速性产生重大影响。
背景
我为这个问题提供了赏金，试图利用 SO 的社区力量来创建一个有用的、经过充分研究的资源。
3d - 是否有任何 C# 3D 图形库可以帮助我计算 3D 对象在空间中的 2D 位置？
我的目标是我将一些对象放在 3D 空间中并调用 Render()，然后这个库可以告诉我每个对象在 2D 屏幕上的渲染位置。
或者像一个3d游戏引擎，但是我想接管渲染部分，我想自己渲染这些对象。
谁能帮我？
html - 除非调整浏览器窗口大小，否则使用 AJAX 加载的图像将被隐藏
请参阅http://new.damir.com.au。单击投资组合部分下显示的两个投资组合项目之一。
我正在使用 AJAX 从一个文件加载 HTML（包括图像标签）并将其插入到父文件中。一切都按预期工作，只是没有渲染图像。HTML 图像标签在那里，但它不会显示在屏幕上，除非您调整浏览器窗口的大小。调整窗口大小会以某种方式刷新屏幕上呈现的内容，并且图像可以正确显示。这是我的代码：
opengl - Frustum Culling 的“雷达方法”：第一次简单测试失败？
尝试至少让Lighthouse3D 雷达截锥体剔除教程的非常简单 的第 1 部分工作......并且我什至无法在我的渲染器中使该部分工作，这让我感到非常困惑。
所以第一步是：你测试一个点是在近平面前面还是在远平面后面，如果是这样，就提前剔除。（如果没有，您将执行进一步的测试，但我只停留在第一部分。）
我使用 2x2 立方体的世界空间中心 (x1y2z3) 并有一个可以自由移动和旋转的相机。我所有的向量和矩阵的东西都必须相当坚固，否则渲染器工作得很好。所以这是我对第一部分的看法（在 Go 中），简单的“Z vs near-or-far”测试：
现在为什么我要反转 ref 的 Z？因为在教程中他们写道：“请注意，图中的引用不是右手系统（如在 OpenGL 中），因为 Z 的方向已反转以使教程更直观”——嗯，在 GL 教程中当然，这会产生相反的效果......
好吧，如果像上面那样反转 Z，它会在大约 50% 的时间里剔除更多；如果我不这样做，那么它大约有 98% 的时间会“过度剔除”..
我错过了什么？