Commit graph

5 commits

Author SHA1 Message Date
Gilles Dubuc 28b8f5095e Use cross-origin img attribute instead of data URI
After lots of experimenting with Wireshark and
current Chrome + Firefox on Ubuntu 13.10, this is my
current understanding of the caching when preloading images
with AJAX requests:

* on Chrome, the image request always comes from browser cache
* Firefox makes two separate requests by default
* Firefox with img.crossOrigin = 'anonymous' makes two separate
  requests, but the second one is a 304 (does not load the
  image twice)
* when the image has already been cached by the browser (but not in
  this session), Chrome skips both requests; Firefox skips the AJAX
  request, but sends the normal one, and it returns with 304.

"wish I knew this when I started" things:
* the Chrome DevTools has an option to disable cache. When this is
  enabled, requests in the same document context still come from
  cache (so if I load the page, fire an AJAX request, then without
  reloading the page, fire an AJAX request to the same URL, then the
  second request will be cached), but an AJAX request - image request
  pair is an exception from this.
* when using Ctrl-F5 in Firefox, requests on that page will never hit
  the cache (even AJAX request fired after user activity; even if
  two identical requests follow each other). When using clear cache
  + normal reload, this is not the case.
* if the image does not have an Allow-Origin header and is loaded
  with crossOrigin=true, Firefox will refuse to load it. Chrome will
  log an error in the console saying it refused to load it, but will
  actually load it.
* Wireshark rocks.

Pushed some tech debt (browser + domain whitelist) into other tickets:
https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/232
https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/233

Reverted commits:
    8a8d74f01d.
    63021d0b0e.

Change-Id: I84ab2f3ac0a9706926adf7fe8726ecd9e9f843e0
Bug: 61542
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/207
2014-02-24 07:56:40 +00:00
Mark Holmquist 5df979bd65 Grand Unifying Documentation Patch
Change-Id: Id0def78beb0231270557037a9c530c770b100ce2
2014-02-18 18:27:30 -08:00
Gilles Dubuc 8a8d74f01d Avoid double requests when measuring performance of image load
Change-Id: Ib5ec4c3e4e4a410a6ee520b11bf025d7447cb542
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/207
2014-02-18 16:45:03 -08:00
Gergő Tisza 7afbc5ce92 Use provider XHR information in performance metrics + several fixes
* more robust method of obtaining URL
* decouple performance logging from providers (mostly)
* ignore fake XHR object which jQuery returns for JSONP requests
* guard for CORS requests - apparently Chrome refuses to return
  certain information even with an Allow-Origin: * response header.
* Resource Timing is limited to 150 results, which causes fake
  misses in debug mode. There is an API to increase the limit
  but it is not implemented in Chrome. I am calling it nevertheless,
  maybe IE understands it (it is present in the MSDN docs at least).

This seems to work for AJAX, CORS, JSONP, image AJAX; CORS requests
return 0 for a lot of values, per spec a Timing-Allow-Origin: *
header might help that.

Change-Id: I8353858022f51a7e70774e65513d0fa2554a5064
2014-02-19 00:38:27 +00:00
Gilles Dubuc e74fc33e89 Track detailed content loading network performance
Leverages the W3C Navigation Timing API when available

Change-Id: Ief1d327d1bd8928bf5f2bf0bd4c7141a0a608a53
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/126
2014-02-07 19:37:22 +00:00