问题标签 [web-performance]

有没有制作css sprites的好工具？

理想情况下，我想给它一个图像目录和一个引用这些图像的现有 .css 文件，并让它创建一个用所有小图像优化的大图像，并更改我的 .css 文件以引用这些图像。

至少我希望它获取一个图像目录并生成一个大精灵和将每个图像用作背景所需的 .css。

是否有任何好的 Photoshop 插件或完全成熟的应用程序可以做到这一点？

我正在创建一些与 HTTP 服务器（彗星、反向 AJAX 等）的暂停连接。它工作正常，但我看到浏览器只允许同时挂起两个到给定域的连接。因此，如果用户在浏览器的 Tab1 中查看我的网站，然后还尝试在 Tab2 中加载它，他们已经用完了两个允许的与我的网站的连接。

我想我可以做一些通配符域的事情，让我的 HTTP 服务器将任何地址解析到我的站点，例如：

所以：

all 仍然指向 ( www.example.com/webapp) 但浏览器认为它们是不同的域，所以我没有遇到 2 个连接限制。这是真的？

即使这是真的 - 每个浏览器的活动连接数是否有任何限制，跨所有域？假设我使用上面的方案 - 例如，Firefox 在任何给定时间只允许 24 个并行连接吗？就像是：

我刚刚选择了 24 个连接/Firefox 作为示例。

任何人都可以解释网络性能，加载外部css（组合css）加载外部javascript（组合javascript）内联css/内联javascript<-会阻止其他资源下载，建议将javascript放在外部css之前

当我结合 javascript 时，如何将 javascript 放在外部 css 之前？有没有办法不阻止图像的加载而不使内联javascript成为外部脚本？

更新
澄清一下，根据网络性能博客/文章，我们应该先加载外部内容，先加载外部 css，然后再加载 javascript。然后执行内联样式/javascript，但内联 javascript 有一个问题，因为一旦我们在加载外部资源后执行此操作，堆栈下方的其他资源（图像）就会被阻止。

在 Firefox 中说你有 6 个连接（假设），你在外部 css/外部 javascript 上打开 2 个连接，因此你仍然有 4 个连接，现在你想利用那个打开的连接，但问题是有一个内联 javascript会阻止其他资源的下载，并且只有在内联javascript执行后才会继续下载。

有人说您需要将内联 javascript 放在外部资源之前，以便利用打开的连接，但问题是您需要来自外部的一些引用，因此无法将其放在外部资源之前。其他博客/文章说我们应该将内联 javascript 放到外部，并将它们组合成一个外部 javascript（在后端，缓存），但这似乎是我当前站点上的大量工作。

如果您有一个需要/依赖于外部 javascript 的内联 javascript，有什么方法可以利用 Web 性能？谢谢

Is database connection through WCF Service slower than direct database connection by nature? Or it is a question of how to implement it?
Is there something specific that makes it impossible for a WCF service connection to be as fast as a direct one: XML-based format, transmission protocol used or something else?

My question is a rather general one, that's because I'm trying to grasp the essense of the issue. For example to understand: can it be possible, in principle, that there would be no difference (regarding performance of an app) whether a database is located inside a local network or somewhere in the Cloud?

我了解到浏览器只能同时从同一个域加载几个文件。因此，您应该将图像放在不同的域或子域中，以加快页面性能。那样的东西...

是否值得建立这样的网站，或者浏览器会很快改变这个功能？或者也许他们已经有了？

或者更好地问：是否很快就不需要从其他域加载图像以提高页面性能？

我现在正在构建的网站不会将其图像托管在 CDN 上。

我想使用webpagetest通过在文件中编写脚本来测量网页的性能。

但是当我运行时webpagetest test <url>/<script>，我得到以下错误：

我请求了一个 API 密钥并收到了它，但仍然收到错误消息。我究竟做错了什么？

还有什么我可以用来查看网页的页面/动作明智的表现吗

HTTP/2 使多路连接成为可能，从而消除了与服务器建立多个连接的需要。通过单个连接，可以将许多单独的图像向下发送到客户端。这消除了将许多图像组合成一个并使用 CSS 将其分开的旧图像精灵模式。

我很好奇精灵在 HTTP/2 世界中是否真的会更快。如果有，在什么情况下？

在当前的 Chrome 版本 (46) 中，DevTools Timeline 包含一堆新图表。大多数图表的含义对我来说并不明显。不幸的是，我也找不到任何关于它们的文档。有人可以解释这些图表的含义吗？

我正在尝试使用一个变体拆分测试一个网站，该变体可以防止发生产品图像的默认延迟加载，而是显示一个“加载更多”按钮，让用户控制何时加载图像。这是测试页面：http ://www.dunelm.com/category/home-and-furniture/bedding/bedding-sets

问题是该站点似乎没有使用易于访问的插件来进行延迟加载。通过 Chrome 开发工具中的网络选项卡，我可以看到启动 AJAX 调用的代码行，但它是他们主要的缩小 javascript 文件的一部分，而且非常复杂。这甚至可以覆盖吗？

（http://www.dunelm.com/wcsstore/public/js/main.min.js第 3,863 行）：

我在 Chrome 开发者工具 Timeline 中记录了一个场景。我将时间线“保存/导出”到我的计算机，但我看到该文件为 0 字节（意味着没有保存任何内容）。之后，当我尝试导入文件时，我得到一个异常，关于不正确的 JSON 格式。

如何保存时间线，然后将其导入 chrome 开发工具？

谢谢