iPhone/mobile safari = .css files block concurrent server requests?
A mobile web site project I've been working on has been recently been analyzed by a performance consulting firm and they came back recommending that we move all of our .css file links to the BOTTOM of the HTML to accommodate issues on the iPhone where .css f开发者_开发问答iles can block concurrent server requests.
I've always known this to be true on most browsers when it comes to .js files--hence the common practice of putting .js file links at the bottom of one's HTML--but I've never heard this about .css files.
I have yet to get a response from the consulting firm with cited references as to this being an actual issue on Mobile Safari. Has anyone else heard of this and, if so, know of any specific references that talk about it (perhaps from Apple directly?)
This is not intended to be an answer to your question, but as a reference:
Best Practices for Speeding Up Your Web Site from Yahoo:
Put Stylesheets at the Top
While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.
Their recommendation to move CSS to the bottom is unusual - would appreciate it if you could share why they found this to be a good idea.
edit: Looking at the general guidelines on apple.com, I couldn't find any particular reference to CSS inclusion applicable only to Mobile Safari. The basic, general instructions still state that you should place CSS in the <head>. See this page.
If you load up the following URL (http://waynepan.com/s/con/) on your desktop and then your mobile browser you'll observe a curious behaviour; On a desktop browser (Chrome & Firefox at least) you'll see the boxes populating from top left to bottom right (in the same order as on the source code) and on a mobile device (iPhone, iPad at least) you'll see the exact opposite occurring.
Albeit undocumented, this observation would suggest that the mobile browser reads the main html file first and then proceeds to render the page bottom-to-top thus loading latter hrefs first and working it's way up to the top.
You'll also observe that on the desktop browser up to 6 boxes are populated concurrently and on the mobile browser up to 4 are populated - this accounts for the maximum concurrent connections that are allowed by the browser in question to any one host.
Therefore, if page load and render speed is especially important in your mobile web app, take special care to order the loading of elements accordingly. I think your consultancy firm colleagues had observed a similar behaviour and wanted to force the CSS to load before all the other content - it would all render with the correct styles from the outset, giving the illusion (or user experience) that the page loads faster.
Alas, my 1 cents worth - I hope it is food for thought. :-)
加载中,请稍侯......
精彩评论