流媒体测试_媒体查询和资产下载测试

流媒体测试

When you’re building a responsive site, there will undoubtedly be times when you need to change a background image, or when you need to hide an image for a specific resolution range. Unfortunately if you’re not careful, this can lead to multiple images being downloaded even when they aren’t being used. A few people—including Jason Grigsby, Greg Rewis and Aaron Mentele—have done some excellent testing about how images are downloaded when media queries are involved. So far, the tests have been conducted using manual methods. There is absolutely nothing wrong with that, but I wanted to find a way to make the testing more automated so that a wider group of people could contribute to the test results.

当您构建响应式网站时，毫无疑问，有时需要更改背景图像，或者需要隐藏特定分辨率范围的图像。 不幸的是，如果您不小心，即使不使用它们，也可能导致下载多个图像。 包括Jason Grigsby ， Greg Rewis和Aaron Mentele在内的一些人对涉及媒体查询时如何下载图像进行了出色的测试。 到目前为止，已经使用手动方法进行了测试。 绝对没有错，但是我想找到一种使测试自动化的方法，以便更多的人可以为测试结果做出贡献。

To that end, I’ve hacked together a few tests (using Jason’s tests as a starting point) that store their results in Browsercope. The test is fairly simple. For each test case, I check to see if the background image (or content image) has been loaded by checking the image.complete property. The property (which appears to be well supported) returns true if the image has been  requested and downloaded, and false otherwise. So, if I want to see if image2.png has been downloaded, my code looks like this:

为此，我整理了一些测试 (将Jason的测试作为起点)，并将其结果存储在Browsercope中 。 测试非常简单。 对于每个测试用例，我通过检查image.complete属性来检查背景图像(或内容图像)是否已加载。 如果已请求并下载了图像，则该属性(似乎受到很好的支持)将返回true，否则返回false。 因此，如果我想查看是否已下载image2.png ，则我的代码如下所示：

{% gist 3316747 %}

{％要点3316747％}

早期结果 (Early results)

It’s early, but already a few trends (some interesting, some less so) are emerging:

现在还很早，但是已经出现了一些趋势(有些有趣，有些则更少)：

• Setting an image to display:none won’t stop the image from downloading (see test 1). So don’t do it. We already knew this, but the tests are reinforcing it.

  设置要display:none的图像display:none不会停止下载图像(请参阅测试1 )。 所以不要这样做。 我们已经知道这一点，但是测试正在加强它。

• The same goes for setting an element to display:none: the background will still be downloaded by everybody (see test2).

  设置要display:none的元素也是如此display:none ：每个人仍然会下载背景(请参见test2 )。

• Setting the parent object to display:none, however, does work pretty consistently (see test 3). It looks like Fennec still downloads the image, but Android, iOS and Opera won’t.

  但是，将父对象设置为display:none确实可以非常一致地工作(请参见测试3 )。 看起来Fennec仍在下载图片，但Android，iOS和Opera不会下载。

• Downloading behavior for a simple cascade override is pretty inconsistent (see test 4). However, setting background images within a media query and then overriding seems to work pretty well (test 5). Fennec is a little eager again, but Android, iOS, Opera and the Kindle only download what’s needed.

  简单级联覆盖的下载行为是非常不一致的(请参见测试4 )。 但是，在媒体查询中设置背景图像然后进行覆盖似乎效果很好( 测试5 )。 Fennec再次有点渴望，但Android，iOS，Opera和Kindle仅下载所需内容。

Finally, my favorite nugget of information so far pertains to Opera Mobile. Opera, as it turns out, is darn clever. Instead of using the parser to trigger resource downloading, they use layout code. This means that since they have information about viewport size and visibility settings, they can be much more selective about which resources they download. So, for example, if an element is outside the viewport then the background image doesn’t have to be downloaded on page load.

最后，到目前为止，我最喜欢的信息是Opera Mobile。 事实证明，歌剧真是聪明。 他们使用布局代码而不是使用解析器触发资源下载。 这意味着，由于他们拥有有关视口大小和可见性设置的信息，因此他们可以更加选择下载哪些资源。 因此，例如，如果元素在视口之外，则不必在页面加载时下载背景图像。

When I talked to Ola Kleiven of Opera about this optimization, he said that Opera used to implement the same behavior on Opera for desktop prior to 11.60 but had to pull it due to compatibility reasons. Developers were relying on things like the load events of these images, so when they didn’t load in Opera, things would break. It’s too bad: it’s an interesting and effective optimization method. I would love to see this behavior implemented cross-browser, but as an opt-in feature (maybe a meta tag or something could trigger it).

当我与Opera的Ola Kleiven谈论此优化时，他说Opera在11.60之前的Opera桌面上实现了相同的行为，但由于兼容性原因不得不将其取消。 开发人员依靠的是诸如这些图像的加载事件之类的东西，因此，当它们未在Opera中加载时，事情就会中断。 太糟糕了：这是一种有趣且有效的优化方法。 我希望看到这种行为是跨浏览器实现的，但是作为一种选择加入的功能(也许是meta标记或某些东西可以触发它)。

Thanks to everyone who has already been testing—it’s been fun to watch the results come in! If you haven’t run the tests yet and you’ve got a few minutes, please do. Once the number of results gets to a nice level, I’ll post a more detailed follow-up about which browsers behave in what ways. I’ll also include any interesting findings in the book.

感谢已经进行测试的每个人-观看结果很有趣！ 如果您还没有运行测试并且还有几分钟的时间， 请执行 。 一旦结果数量达到一个不错的水平，我将发布更详细的后续报告，说明哪些浏览器以何种方式运行。 我还将在书中包括任何有趣的发现。

In the meantime, feel free to fire up the tests on any and all devices you have. If you think of another test you would like to see added, or see a potential issue with the test, let me know. One of the benefits of automating the test results is that it should be very easy to add new tests and quickly get broad results.

同时，请随时在您拥有的所有设备上启动测试。 如果您想再添加一个测试，或者看到该测试的潜在问题，请告诉我 。 自动化测试结果的好处之一是，添加新测试并Swift获得广泛的结果应该非常容易。

翻译自: https://timkadlec.com/2012/02/media-query-asset-downloading-tests/

流媒体测试