不正确放置元素导致等待状态？ NSFW

NSFW：请注意，该网站出售大麻种子，所以链接是NSFW。不正确放置元素导致等待状态？ NSFW

我有相同或非常相似的系统上运行的几个网站，它们都从一个运行非常迅速分开，我无法找出原因，我相信这主要是记在我的经验不足，但我已经浏览了Firebug的Net标签，我不确定我是否理解它。

我可以看到，其中一个快速网站的产品页面的大小和内容为80.33kb，这需要1.28s的等待和598ms的加载才能显示，而慢速网站的大小为22.87kb，内容为158kb，延迟时间为4.75s，4.55s为等待时间。

我真的很想知道如何减少这种等待时间，以及为什么大小和内容数字如此不同。您可以在this page处看到问题。

来源

2012-09-29 Natastna2

在其上运行的网页性能分析器。 http://sixrevisions.com/tools/free-website-speed-testing/ –

您是否使用YSlow插件等工具检查过您的网站？这会让你对你正在等待的东西有很多的了解。 – ThatSteveGuy

那么，我会从这里开始：http://developer.yahoo.com/performance/rules.html感谢NSFW的单挑。 –

在整个页面中，您都有一对真正的JavaScript脚本。

目标是在不使用JS的情况下加载尽可能多的物理内存，然后在底部完成所有的JS加载。

你也得到了很多不同的JS脚本。真的很多。

你可能会考虑搞清楚他们需要出现什么样的顺序，然后把它们按照这个顺序粘贴到一个单独的文件中（或者半打，或者其他的东西），但是Google建议有几十个JS文件在那一页上），然后将其加载到页面的底部。

这可能意味着您需要了解更多有关推迟页面加载事件的信息，这可能意味着您需要了解如何分离关注点（我没有看得更远标志看到每个人都有一个onclick处理程序，这无疑会做一些巨大的事情 - 最好是将一个监听程序添加到容纳所有标志的容器中，然后确定它是哪一个并从那里运行）。

但是当JS文件下载时，浏览器会暂停并编译它。这通常是几分之一秒。但是，如果你有几十个文件一个接一个地排队，那就是加载文件，暂停访问文件内容，暂停编译文件中的JS，然后运行JS，在继续展示网站的下一部分之前......

所以所有这些小小的停顿都会加起来。

这就是为什么你应该成为只是JS你需要，你应该在页面的底部为它服务，然后在可有可无的东西有后了一点加载。使用数百行代码编译单个文件即使比编译只有几十行的10个文件花费的时间也少。

最终，它归结为用户SEES发生，且下载并不多快的速度在基准。

来源

2012-09-29 04:22:01 Norguard

纵观使用开发工具中的Chrome网络选项卡页面加载时，我收到在以下链接下面的时序：

http://www.seed-city.com/barneys-farm-seeds/liberty-haze

102 requests | 131.24KB | 8.41s (onload: 8.50s, DOMContentLoaded: 6.61s) 
102 requests | 131.47KB | 8.47s (onload: 8.56s, DOMContentLoaded: 6.82s) 
102 requests | 131.45KB | 8.71s (onload: 8.79s, DOMContentLoaded: 7.06s)

现在，让一个（somewhat simple）变化：

103 requests | 110.16KB | 3.77s (onload: 3.86s, DOMContentLoaded: 2.03s) 
103 requests | 110.17KB | 3.85s (onload: 3.94s, DOMContentLoaded: 2.21s) 
103 requests | 110.16KB | 4.20s (onload: 3.50s, DOMContentLoaded: 2.28s)

这是从您当前页面的网络选项卡输出的typical HAR log：

http://pastebin.com/pM5Dd1Fw

的重要组成部分，是实现正等待将近五秒钟，甚至做任何浏览器（仅剪断，显示相关线路）：

{ 
    "startedDateTime": "2012-09-29T04:58:07.861Z", 
    "time": 4831, 
    "request": { 
    "method": "GET", 
    "url": "http://www.seed-city.com/barneys-farm-seeds/liberty-haze", 
    "httpVersion": "HTTP/1.1", 
    ... 
    }, 
    "cache": {}, 
    "timings": { 
    "blocked": 0, 
    "dns": 16, 
    "connect": 129, 
    "send": 0, 
    "wait": 4677,  // <<< Right here 
    "receive": 8, 
    "ssl": -1 
    } 
}

而对于slow.html页时机：

{ 
    "startedDateTime": "2012-09-29T05:04:51.624Z", 
    "time": 92, 
    "request": { 
    "method": "GET", 
    "url": "http://example.com/t/slow.html", 
    "httpVersion": "HTTP/1.1", 
    ... 
    }, 
    "timings": { 
    "blocked": 0, 
    "dns": 7, 
    "connect": 38, 
    "send": 0, 
    "wait": 44,   // <<< Right here 
    "receive": 1, 
    "ssl": -1 
    }, 
    "pageref": "page_3" 
}

这是4677ms VS 44ms。下面是一个典型HAR日志，以更新的页面：

http://pastebin.com/Jgm1YyU3

所以我做了什么来实现这些（非常真实和具体的）改进？我搬到了Javascript将body标签的底部：

http://pastebin.com/H9ajG99H

这使得提高两倍。首先，您允许浏览器继续并在开始与阻止进程（script调用）进行交互之前加载内容。所以你的客户会“注意”一个更快的网站，只是因为网页似乎加载得更快（当你真的只是让它加载时）。其次，您需要等到body标签基本上完全加载，然后才开始篡改内容。

它也看起来像你没有在你的头文件中使用缓存指令，告诉浏览器不要检查文件的更新很长时间。因此，您的Twitter和Facebook图标看起来像浏览器认为需要与服务器一起重新检查，从理论上来说，这是一种往返旅程，除非经常这样做。但花费在“等待”的时间：

twitter_aqu_64.png 1.32s 
ajax-loader.gif 1.31s 
ssl-icon.jpg  1.31s

现在，我不是缓存控制方面的专家;这是一种黑暗艺术。但是，这些时机让我觉得有可能会发生一些事情。

试试这个答案高速缓存控制的更多信息：

HTML Cache control

来源

2012-09-29 05:20:23

感谢您的意见。我想知道通过购物车功能和其他需要JavaScript的东西。是否有可能在页面的底部有JavaScript，但仍有像购物车一样的功能？感谢您的时间。 – Natastna2

我不知道，你只需要检查一下。当我将它们全部移动到底部时，该页面似乎可以正常工作，但我没有浏览并单击所有内容。如果不是全部，我可能会认为大多数人至少可以移到底部。 –

不正确放置元素导致等待状态？ NSFW

回答

相关问题