如何确定脚本中的哪些内容阻止了 HTML 渲染?

发布于 2024-08-28 03:12:38 字数 550 浏览 5 评论 0原文

我有一个使用大量 JavaScript 的 Web 应用程序。

当页面加载时,可以非常清楚地看到某些东西正在阻止网站特定部分的呈现。该部分由 Tabber Tabify JavaScript 库生成。

如何确定具体是什么阻止了 HTML 渲染,以便我可以修改代码来防止这种阻止?

我可以使用 Firebug 或其他工具来遍历我的 HTML/JavaScript 以确定 HTML 渲染被阻止的位置吗?如果是,如何阻止?

更新

YSlow 给我的网络应用程序评分为“A”,Page Speed 评分为 94/100。

更新 2:

实时网站链接如下。

http://www.elite.com

我特别指的是实际正在渲染的选项卡本身(而不是选项卡窗格内的面板内容)。我觉得奇怪的是,选项卡标题本身在第一个(空缓存)页面加载时需要很长时间才能生成。

I have a web application that uses quite a bit of JavaScript.

When the page loads, it's very clear visually that something is blocking the rendering of a particular portion of the web site. This portion is generated by a Tabber Tabify JavaScript library.

How can I determine what's blocking the HTML rendering specifically so that I can modify my code to prevent this blocking?

Can I use Firebug, or some other tool, to walk through my HTML/JavaScript to determine where the HTML rendering is being blocked and if so, how?

UPDATE:

YSlow gives my web-application a score of "A" and Page Speed give a score of 94/100.

UPDATE 2:

The live site is linked below.

http://www.elite.com

What I'm specifically referring too is the actual Tabs themselves being rendering (and NOT the panel content inside the tab panes). It seems strange to me that the Tab headings themselves are taking so long to generate on the first (empty cache) page load.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

等待圉鍢 2024-09-04 03:12:38

一些可能性:

  1. 在页面中加载脚本将阻止渲染(唯一的解决办法是将它们放在头部(阻止初始渲染)或放在 之前的末尾 或在页面加载后加载它们(例如 onload)

  2. 无论 Tabber/Tabify 工具是什么,都需要时间来处理内容...看看是否有办法优化它。

无论哪种方式,如果您发布一些代码,我们可能会提供更多帮助

<。更新:

如果我在清除缓存的情况下加载页面,我会看到屏幕上呈现的内容,然后隐藏(因为它变成隐藏的选项卡内容)

将不可见内容更改为 display:none; 加载时,然后仅在 Tabify 内容完成后将其设置回 display:block; 可能有助于 (a) 加快渲染速度并 (b) 删除任何闪烁的内容后来被隐藏。

您内联加载的 RadComboBox(这意味着脚本会阻止渲染)...如果您可以延迟此操作直到 onload 事件触发,它将加快渲染速度。

我也会将 Unica 页面标签(跟踪)移至页面末尾。

您有 8 个外部脚本文件 - 如果有任何方法可以将它们组合起来那就太好了。

大多数脚本文件都没有打开 gzip

所有静态内容(图像、CSS、脚本)都没有过期标头,这意味着它们不会被缓存,这意味着页面无法快速加载在第一页之后。

A few possibilities:

  1. Loading scripts in your page will block rendering (the only fix for this is to put them in the head (blocks initial rendering) or at the end just before the </body> or load them after the page is loaded (e.g. onload)

  2. Whatever the Tabber/Tabify tool is, needs time to process content... see if there is a way to optimize it.

Either way, if you post some code we can likely be of more help

Update:

If I load the page with my cache cleared, I see content rendering on the screen, then hiding (as it becomes hidden tab content)

Changing the non-visible content to display:none; when loading, and then only setting it back to display:block; once the Tabify stuff is done might help (a) speed up the rendering and (b) remove any flash of content that later gets hidden.

The RadComboBox'es you have load inline (which means the scripts block rendering)... if you can delay this until the onload event fires it will speed up rendering.

I would move the Unica Page Tag (tracking) to the end of your page too.

You have 8 external script files - if there is any way you can combine them it would be good.

You don't have gzip turned on for most of those script files

All of your static content (images, css, scripts) don't have an expires header which means they won't get cached, which means pages won't load fast after the first page.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文