如何在jquery mobile中加速js加载？

Question

我需要加快jquery mobile的ui加载时间.当我尝试使用head.js方法并行加载js文件时,它会在显示基本的html页面后显示jQuery移动UI仅3-5秒.我也尝试过CDN托管的js文件,它与下载的js文件没有任何区别.

有没有办法缓存jquery mobile js文件,这样会加速ui渲染？

谢谢.

Answer 1

压缩你的Javascript

使用其他插件甚至代码时总是使用压缩的js文件.它们更小,加载速度更快.如果你看看你会看到jQuery和jQuery Mobile提供压缩版本.

您还应该压缩您的js文件.可以轻松找到包装工具.

分析你的js文件加载

通过分析js文件初始化来查找有问题的文件.你可以使用像Firebug这样的插件.它显示了文件的细分 - 只需转到"网络"选项卡即可.您还可以按文件类型进行过滤.

使用正确的js文件源

如果您正在创建Phonegap应用程序,则所有js文件都应存储在本地,但如果您将其用作普通Web应用程序,则使用类似于问题中提到的CDN源.

优化Javascript放置

如果可能,将您的JavaScript放在HTML文件的末尾.请注意Google分析和其他统计跟踪软件在结束标记之前是如何做的.

这允许首先加载和呈现大多数页面内容(如图像,表格,文本).用户看到内容加载,因此页面看起来响应.此时,沉重的javascripts可以在接近结束时开始加载.

基本上在标记之前在HTML端初始化您的javascript.有时这会给jQuery Mobile带来问题.在这种情况下,让jQuery和jQuery Mobile在HEAD和HTML端的其他所有内容中初始化.

加载Javascript On-Demand

在加载主要内容后,应该以programaticaly方式加载所有不必要的js文件.

功能:

$import('http://example.com/myfile.js')

将元素添加到文档的头部,就像直接包含文件一样.

缓存文件:

如果您使用PHP作为服务器技术,则可以使用兑现来提高加载性能.基本上您将设置浏览器的缓存过期时间.为此,您需要访问PHP或Apache的.htaccess,以便您可以发送回某些缓存标头(有关缓存的更多信息).

合并你的文件

最后当其他一切都刹车时,你应该将你的js代码组合成一个单独的文件.您的浏览器一次只能与一个网站建立这么多连接 - 考虑到设置每个连接的开销,将几个小脚本组合成一个较大的脚本是有意义的.

Gzip一切

压缩的好处(通常是文件大小减少75%或更多)太好了,不容忽视:使用HTTP压缩优化您的站点.此方法不适用于较旧的浏览器,但由于您使用的是jQuery Mobile,因此无需担心旧版浏览器.