Javascript 元素放置不正确导致的等待状态？NSFW_Javascript_Html_Dom

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

javascript html dom

Javascript 元素放置不正确导致的等待状态？NSFW,javascript,html,dom,Javascript,Html,Dom,NSFW：请注意该网站出售大麻籽，因此链接为NSFW 我有几个网站运行在相同或非常相似的系统上，除了一个之外，它们都运行得非常快，我不知道为什么，我确信这主要是因为我缺乏经验，但我查看了Firebug的网络选项卡，我不确定我是否完全理解它我可以看到，其中一个快速网站的产品页面大小和内容为80.33kb，需要1.28秒的等待和598毫秒的加载才能显示，而慢速网站的大小为22.87kb，内容为158kb，延迟为4.75秒，等待时间为4.55秒我真的很想知道如何减少等待时间，以及为什么大小和内容

NSFW：请注意该网站出售大麻籽，因此链接为NSFW

我有几个网站运行在相同或非常相似的系统上，除了一个之外，它们都运行得非常快，我不知道为什么，我确信这主要是因为我缺乏经验，但我查看了Firebug的网络选项卡，我不确定我是否完全理解它

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

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

您在整个页面上都有大量的JavaScript

目标是在不使用JS的情况下尽可能多地加载，然后在最底层进行所有JS加载

您还拥有许多不同的JS脚本。喜欢真的很多

你可以考虑找出它们需要出现的顺序，然后按顺序将它们粘贴到一个文件中（或半打，或者任何东西，但是谷歌建议在一个页面上有几十个JS文件），然后在页面底部加载。< /P> 这可能意味着您需要更多地了解如何延迟页面上的加载，也可能意味着您需要更多地了解如何分离关注点（我只看了一下您的标志，就知道每个标志都有一个onclick处理程序，这无疑是一个巨大的功能——最好在包含所有标志的容器中添加一个侦听器，然后确定它是哪一个并从那里运行）

但是当JS文件下载时，浏览器会暂停并编译所有文件。这通常是几分之一秒。但是如果你有几十个文件，一个接一个地排列在一起，那就是暂停加载文件，暂停访问文件内容，暂停编译文件中的JS，然后运行JS，然后再显示站点的下一部分

所有这些小小的停顿都在累积

这就是为什么你应该只提供你所需要的JS，并且你应该在页面底部提供，然后在那之后再加载一些好东西。甚至，编译一个包含数百行代码的文件比编译10个只有几十行代码的文件花费的时间更少

归根结底，这取决于用户看到了什么，而不是下载速度的基准。

整个页面上都有大量的JavaScript

目标是在不使用JS的情况下尽可能多地加载，然后在最底层进行所有JS加载

您还拥有许多不同的JS脚本。就像…真的很多

所有这些小小的停顿都在累积

最后，这取决于用户看到了什么，而不是下载速度的基准。

使用开发者工具中的Chrome网络选项卡查看页面加载，我在以下链接收到以下计时信息：

现在，进行一个（）更改：

以下是从当前页面的“网络”选项卡输出的内容：

重要的一点是要意识到，浏览器要做任何事情都要等将近五秒钟（剪掉的只是为了显示相关的行）：

这是

4677ms

44ms

。以下是该更新页面的典型HAR日志：

那么，我做了什么来实现这些（非常真实和切实的）改进呢？我将Javascript移动到

主体的底部

标记：

这有两个方面的改进。首先，您允许浏览器继续运行并在开始与阻止进程（脚本调用）交互之前加载内容。因此，您的客户将“注意到”一个速度更快的站点，这仅仅是因为页面似乎加载得更快（实际上，您只是允许它按原样加载）。其次，您要等到

主体

标记基本上已完全加载，然后才能开始篡改其内容

看起来您的头文件中没有使用缓存指令来告诉浏览器不要检查更新

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)

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)

{
  "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
  }
}

{
  "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"
}

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