Why is tableTools making multiple calls to the same SWF file?

Question

I happened to notice in my application that the copy_csv_xls_pdf.swf is getting called three times when datatables/tabletools are invoked. I put together a jsfiddle which (sometimes) illustrates the issue:

The same behavior can be observed from the TableTools documentation:

This behaviour is particularly problematic because the intial load of the file doesn't seem to be cached by the browser for the subsequent loads during that same request.

There seems to be a request to this file for each button that is "powered" by the SWF.

Still, why is this file getting loaded multiple times? Is it necessary? How can it be prevented (while still providing the same functionality)?

Ignore the following unnecessary code....

...which is only provided so that SO will allow me to include the link to the jsfiddle:

$('#browser_data').dataTable({
    "bPaginate": false,
    "bAutoWidth": false,
    "bLengthChange": false,
    "sDom": "<'row-fluid'<'span6'f><'span6'<'pull-right'T>>r>t",
    "oTableTools": {
        "aButtons": [ "copy", "xls", "pdf" ],
        "sSwfPath": "http://datatables.net/release-datatables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"
    }
});

FYI: cross-posted this as a tabletools issue at https://github.com/DataTables/TableTools/issues/72 — Jeromy French, Dec 12 '14 at 17:30
HTTP Status code 304 means `Not modified`. So the SWF file is loaded from cache. > **304 Not Modified** > > Indicates that the resource has not been modified since the version specified by the request headers If-Modified-Since or If-None-Match. This means that there is no need to retransmit the resource, since the client still has a previously-downloaded copy. Source: http://en.wikipedia.org/wiki/List_of_HTTP_status_codes The swf doesn't seem to load in the jsfiddle. — jao, Dec 15 '14 at 15:47
@jao: You're right about the official documentation and the 304 status--that does indicate the file is cached (so this is probably just a server setting on the file's header). Still, I don't know why the same file needs to be loaded to the browser multiple times within the same request. The jsFiddle sometimes shows the file loading, and sometimes doesn't. But that would be a separate question... — Jeromy French, Dec 15 '14 at 16:06
probably it is what the other guy said at GitHub, that it is loading for each button... Weird though — jao, Dec 15 '14 at 16:07
I think so, too--but why? I can't imagine why it's necessary. — Jeromy French, Dec 15 '14 at 16:08
The file is being called each time a component needs it, like this: while the page is rendering the first button needs it --> sends request --> not Found 404, continues loading page... another button needs it --> sends request --> not Found 404, continues loading page... third button needs it --> sends request --> not Found 404 — António Regadas, Dec 17 '14 at 16:54

PeterKA · Accepted Answer · 2015-05-06T20:15:50.113

Google Chrome

Here is a snippet of the request headers -- the headers are the same whether I hard-refresh or just refresh:

:host:datatables.net
:method:GET
:path:/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf
:scheme:https
:version:HTTP/1.1
accept:*/*
accept-encoding:gzip, deflate, sdch
accept-language:en-US,en;q=0.8,sw;q=0.6
cache-control:no-cache
cookie:

Do you see cache-control:no-cache? This seems to suggest that caching is explicitly turned off when making these requests. Every refresh shows status 200 for each request ... never do I see 304.

And as far as the 304 statuses in your screenshot are concerned it's important that they are 304, 304, 304 and not 200, 304, 304. This would suggest that each request is unique in some way other than URL-wise and therefore each has to be explicitly cached. Let's see if that's a correct hypothesis ....

Mozilla Firefox

Here is the procedure I followed to run some tests:

set caching very on by setting cache limit to .34GB
loaded the pages: and refreshed and noted results
reproduced results by hard-refreshing followed by a refresh

Here are the results -- one status for each button:

Initial Loading Statuses: 200, 200, 200, 200
Refresh: 304, 304, 304, 304
Hard Refresh: 200, 200, 200, 200
Refresh after Hard Refresh: 304, 304, 304, 304

Considering the buttons are not exactly the same, even though the .swf URL is the same, wouldn't this make perfect sense? The same URL giving rise to a different button each time! Could there be some sort of signature to differentiate the requests for each button? This is the behavior of dynamic content -- same URL different content.

One final test:

I turned off caching -- set cache limit to 0 and the results are:

Hard Refresh: 200, 200, 200, 200
Refresh: 200, 304, 200, 200

Conclusions

Each button content is cached. That's why even when there's enough disc space allotted to caching initial page load and hard refreshes show 200, 200, 200, 200 and not 200, 304, 304, 304.
Whether these buttons would be cached is a function of your browser settings: if caching is on and how much space is allotted to caching.
Quite likely 200, 304, 200, 200 may suggest that there was not enough disc space to cache Copy button, but was just what CSV button needed, and there was nothing left to cache Excel and PDF buttons.

You assert "...the content returned by the .swf is different for each button...". This is the important piece that I apparently don't understand (I know nothing about Shockwave Flash). How can *the same file* be different for each button? — Jeromy French, Dec 17 '14 at 21:35
"How can the same file be different for each button?". It isn't. Forget about the SWF file. If you request an image in your code 3 times, the browser will try to load it 3 times. It will do the same for SWF files and any other file. If it's being requested more than once, it's just badly written code. — blvz, Dec 18 '14 at 03:29
*How can the same file be different for each button*? The same way dynamic content works; only we would talk of *same URL* rather than *same file*. — PeterKA, Dec 21 '14 at 17:01

akmozo · Answer 2 · 2014-12-20T21:32:45.617

In your case (your jsfiddle), you have used 3 buttons : copy, save as excel and save as pdf. The script (TableTools) is duplicating the swf used (copy_csv_xls_pdf.swf) 3 times, one for each button, because it's used to copy content every time. The swf is a ZeroClipboard instance which known as good idea to copy data because flash can access to system clipboard which is not the case for browsers. Of course, with TableTools documentation the demo is using 4 buttons : copy, save as csv, save as excel and save as pdf, that's why it loaded 4 instances of the swf, take a look in the html code :

<a class="DTTT_button DTTT_button_copy" id="ToolTables_example_0" tabindex="0" aria-controls="example">
    <span>Copy</span>
    <div style="position: absolute; left: 0px; top: 0px; width: 47px; height: 32px; z-index: 99;">
        <embed id="ZeroClipboard_TableToolsMovie_1" src="/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="47" height="32" name="ZeroClipboard_TableToolsMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&amp;width=47&amp;height=32" wmode="transparent">
    </div>
</a>
<a class="DTTT_button DTTT_button_csv" id="ToolTables_example_1" tabindex="0" aria-controls="example">
    <span>CSV</span>
    <div style="position: absolute; left: 0px; top: 0px; width: 43px; height: 32px; z-index: 99;">
        <embed id="ZeroClipboard_TableToolsMovie_2" src="/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="43" height="32" name="ZeroClipboard_TableToolsMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&amp;width=43&amp;height=32" wmode="transparent">
    </div>
</a>

<a class="DTTT_button DTTT_button_xls" id="ToolTables_example_2" tabindex="0" aria-controls="example">
    <span>Excel</span>
    <div style="position: absolute; left: 0px; top: 0px; width: 48px; height: 32px; z-index: 99;">
        <embed id="ZeroClipboard_TableToolsMovie_3" src="/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="48" height="32" name="ZeroClipboard_TableToolsMovie_3" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=3&amp;width=48&amp;height=32" wmode="transparent">
    </div>
</a>

<a class="DTTT_button DTTT_button_pdf" id="ToolTables_example_3" tabindex="0" aria-controls="example">
    <span>PDF</span>
    <div style="position: absolute; left: 0px; top: 0px; width: 43px; height: 32px; z-index: 99;">
        <embed id="ZeroClipboard_TableToolsMovie_4" src="/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="43" height="32" name="ZeroClipboard_TableToolsMovie_4" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=4&amp;width=43&amp;height=32" wmode="transparent">
    </div>
</a>

EDIT :

After re-reading your question and your comments, I didn't know if you wanted to know why the page is loading n instances of the swf or how to avoid that ? If It's the first case, I put what I saw as an explanation for that, else I think that TableTools developers may optimize their code, and I don't know if it's really possible or not, by minimizing the embedded swf objects.

Why is tableTools making multiple calls to the same SWF file?

2 Answers2