问题标签 [webpage-rendering]
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.
dom - 为什么 Chrome 按块渲染图像
这更像是一个理论问题。我目前正在一个网站上工作，所有图像都需要一段时间才能加载，浏览器会按块呈现它们。我的问题是为什么会发生这种情况？
该站点具有与我所面临的完全相同的行为：http: //lab2.ravelrumba.com/cssimages/test1/index5.html
asp.net - 为什么我的 CrystalReportViewer 不显示结果？
我正在尝试在ASP.net和中开发一个简单的水晶报表C#。我CrystalReportViewer用来加载我的报告。这是 C# 代码：
问题是我的，CrystalReportViewer不是render我在浏览器上的报告，它是一个blank page. 虽然没有错误，但可能有什么问题？
html - 在 rMBP 上使用 Chrome 出现在网站上的 1px 垂直线
在 Retina Macbook Pro 上浏览我在 Chrome 上开发的网站时，这些垂直线出现在页面上。我的网站使用了一些很酷的视差技术，这些垂直线使背景透明，所以你可以看到它们下面的背景层，这很烦人。即使我关闭这个背景，你仍然可以看到线条，只是它们现在是白色的，而不是背景颜色。该网站是www.1000days.me，下面我附上了一张截图（来自 Chrome Emulator，因为我没有 rMBP）。
每个里面都有一个容器<section>（每次背景颜色改变时，它都是一个新的<section>）但是这些线在容器的边界线之外。另外，我无法确认这一点，但在不同的分辨率下，线条似乎在不同的地方。
编辑：也出现在 Opera 上（我假设是因为它现在使用 Blink），但没有出现在 Safari、Firefox 或 Internet Explorer 上。
html - svg 图像比位图更难为浏览器呈现吗？
所以我正在制作这个有大量图像的水平滚动网站。我计划在整个网站上使用 svg，但是页面中只使用了 20-30 个中到高复杂度的 svg 图片，而且 chrome 似乎已经显示出 som jank 和高绘制时间（而 Firefox 更糟糕，虽然野生动物园似乎做得更好）。
滚动时间线
查看站点（滚动仅适用于 mac，windows 用户可以使用箭头键）
我的问题是，如果我使用 pngs 而不是 svgs，它会减少绘画时间并因此减少卡顿吗？为什么浏览器只能处理大约 20 张 svg 图像？
php - 为什么执行网页的第一行需要一些时间？
我只需要知道为什么在执行网页顶部的第一行代码之前会有这么多的延迟。我有一个具有以下结构的网站。PHP 标头中此 echo 语句上方没有一行。我的 header.php 是这样的：
这是我的footer.php。页脚中的回声下方没有线。：
为了清楚起见，网页在大约 3/100 秒内快速呈现。问题是在我用 PHP 完成任何处理或输出任何其他内容之前的初始滞后。现在，标题中从顶部开始的行回显类似：0.292453.. 或 0.78583..，而底行回显类似：0.29687... 或 0.789939.. 所以，如您所见，PHP 处理网页的时间约为 0.004秒。我的问题是为什么一开始要花这么多时间？如果可能，我该如何减少它？开始时间是否包括从请求网页（如解析 DNS、连接到接收）的所有时间？
谁能告诉我为什么这个问题被否决了？我将尝试重新表述这个问题，以使其更有意义。
javascript - 为什么 jQuery 会阻止页面渲染？
我对页面渲染有一些疑问。这是我的html代码：
我doSomething.js的执行需要 5 秒：
我将<script>标签放在末尾，<body>以便其他元素在doSomething.js加载之前显示。但是我的页面在doSomething.js完成执行之前没有任何结果。
如果我删除 jQuery 脚本，其他 DOM 元素（h1和images）将在doSomething.js加载之前成功显示。
以下是我的问题：
- 为什么在我的示例中 jQuery 会阻止 DOM 渲染？
- 如果我删除 jQuery，并且一切都按我的预期工作，那么我会得到另一个问题。在我的理解中，
<script>是 DOM 树的一部分，如果没有加载，DOM 树就不会构建完成，那么整个渲染树就不会构建。如果没有构建渲染树，为什么像这样的元素<h1>可以绘制到页面上？简而言之，为什么移动<script>到末尾<body>会使之前的元素呈现在页面上？
angularjs - 有时以原始格式呈现角度表达式
我正在使用 Angular.js 构建一个简单的网页。在浏览器（Chrome）中打开网页时，页面以原始角度表达式呈现，如下所示
在重新加载页面（有时 2 - 3 次）时，Angular 表达式被评估并正确呈现，如下所示
当两种情况中的任何一种发生时，都没有特定的模式。可能的原因是什么？
控制器文件
index.js 文件
.html 文件
c# - 如何让我保存的 html 文件被渲染而不是显示原始 html？
我在 Web API 应用程序的 App_Data 文件夹中保存了 html 文件。配套客户端 (Winforms) 应用程序会发送一封电子邮件，其中包含一个链接，允许用户单击该链接并在浏览器中查看这些 html 文件，如下所示：
Web API 应用程序中的 Get 代码运行良好；这是单击链接时调用的内容：
我希望返回的 html 会以正常方式在浏览器中呈现，而不是只显示原始 html（包括所有尖括号和 html 关键字等）。IOW，如果我在记事本中而不是在浏览器中查看 HTML，它就会出现。
如何确保 GET 方法返回的 HTML 按预期显示？
非常清楚，我不希望用户看到这样的东西：
...而是像这样呈现的 HTML：
jquery - 隐藏“显示：无”时如何渲染传单地图 父母
在我的页面上显示传单地图时，我遇到了奇怪的行为。通常地图会按预期渲染并且运行良好。但是，我只想在我在 javascript 中检测到的表单中出现错误时才显示地图。因此，如果我将父级设置<div id="map">为display: none;并稍后根据需要显示，则不会加载图块（或仅部分加载并且不继续）并且地图奇怪地“错位”（未按照 js 中的定义居中）。
我的想法是浏览器可能不会在display: none;父级中呈现元素？
我尝试使用该$(document).ready(...)功能隐藏地图，但没有任何区别。一旦我隐藏并显示地图，同样的行为就会重复。我在 Firefox 44.0 和 Chromium 48.0 上对此进行了测试，并且行为是一致的。
任何提示都会有所帮助。这是远程加载元素（ajax）的一般行为吗？
编辑1：
现在我知道了解决方案和解决方法（见下面的答案），但我仍然不确定这是否是远程加载元素的全局行为？感谢您的任何解释。
编辑2：
请参阅接受的答案以获取解释。