我一直在研究的一个移动网站项目最近由一家绩效咨询公司进行了分析,他们回来时建议我们将所有的.css文件链接移动到HTML的底部,以适应有关的问题。 iPhone .css文件可以阻止并发服务器请求。
我总是在大多数浏览器中都知道这对于.js文件是正确的 - 因此将.js文件链接放在一个HTML底部的常见做法 - 但我从未听说过这个.css文件。
我还没有得到咨询公司的回复,引用的参考资料是关于Mobile Safari的实际问题。有没有其他人听说过这个,如果有的话,知道任何谈论它的具体参考(可能直接来自Apple?)
答案 0 :(得分:1)
这不是您问题的答案,而是作为参考:
来自雅虎的Best Practices for Speeding Up Your Web Site:
将样式表置于顶部
在研究Yahoo!的表现时,我们发现了移动 文件HEAD的样式表使页面看起来正在加载 快点。这是因为将样式表放在HEAD中允许 要逐步渲染的页面。
他们建议将CSS移到最底层是不寻常的 - 如果你能分享为什么他们认为这是一个好主意,我将不胜感激。
编辑:查看apple.com上的一般指南,我找不到任何特别适用于仅适用于Mobile Safari的CSS包含。基本的一般说明仍然指出您应该将CSS放在<head>
中。请参阅this page。
答案 1 :(得分:1)
如果您在桌面和移动浏览器上加载以下网址(http://waynepan.com/s/con/),您会发现一种奇怪的行为;在桌面浏览器(至少是Chrome和Firefox)上,您会看到从左上角到右下角(与源代码的顺序相同)和移动设备(至少iPhone,iPad)上的框。我会看到完全相反的情况。
虽然没有记录,但这一观察结果表明移动浏览器首先读取主html文件,然后继续从下到上呈现页面,从而首先加载后面的hrefs并将其工作到顶部。
您还会发现,在桌面浏览器上,最多可同时填充6个框,并且在移动浏览器上最多填充4个框 - 这说明了浏览器允许的任何一个主机的最大并发连接数
因此,如果页面加载和渲染速度在您的移动Web应用程序中尤其重要,请特别注意相应地加载元素。我认为你的咨询公司的同事已经观察到了类似的行为,并希望强制CSS在所有其他内容之前加载 - 它将从一开始就以正确的样式呈现,给出页面加载速度更快的错觉(或用户体验) 。
唉,我的价值1美分 - 我希望这是值得深思的。 : - )