开发APP的公司怎样解决异步加载第三方资源?深圳APP开发公司在这里提醒对于APP开发来说好的用户体验从加载开始。第三方资源有的时候不可控,比如说页面统计、地图显示、分享组件等,这些第三方资源使用的时候要慎重选择,充分考察它们对于性能的影响。
为了避免第三方资源在页面加载时成为问题,甚至有可能更严重地阻塞全部页面的加载,应该使用异步的方式加载第三方资源,防止第三方资源的使用影响到页面本身的功能。例如,异步加载第三方JavaScript资源:
01 var url = 'thirdpart. js', // 第三方 JavaScript 资源 地址 02 script = document. createElement(' script'), 03 scripts = document. getElementsByTagName(' script')[ 0]; 04 script. async = true; 05 script. src = url; 06 scripts. parentNode. insertBefore( script, scripts);
在加载时间较长的时候,务必要让用户明确感知到加载完成的提示,通常是在加载过程中显示Loading的进度条,加载完成的时候隐藏它。从心理上,这会让用户有一种“期盼感”,而不至于太过枯燥。对于一些重量级的移动应用,例如游戏,开始前需要加载很多资源才能让后面的游戏过程更为流畅,一个带百分比进度显示的进度条就更加重要了。
APP开发公司提醒关于其他加载优化除了前几小节介绍的加载优化之外,还有Cookie和重定向优化。
开发APP关于优化Cookie
众所周知,HTTP是一个无状态协议,所以客户端每次发出请求时,下一次请求无法得知上一次请求所包含的状态数据,如何能把一个用户的状态数据关联起来呢?Cookie是解决这个问题的方法之一。在服务器与浏览器之间Cookie的处理与传递如图9.21所示。
Cookie核心对象是key-value,除此之外还有max-age、path、domain和httponly属性。httponly属性标识一个客户端JavaScript能否直接操作该Cookie;max-age表示缓存时间,单位为秒;domain代表域名,例如设置为.myblog.com,则i.myblogs.com也可以访问该Cookie,如果设置为i.cnblogs.com,则image.cnblogs.com这个域名下的资源将不能访问这个Cookie;path代表文件路径,默认为/,表示该domain下的所有资源都可以访问这个Cookie。
浏览器对单个Cookie大小限制不超过4KB;对于同一域名下Cookie的数量也有限制,一般不允许超过50个。假如Http请求响应头部Set-Cookie的时候没有给Cookie添加一个过期时间,则它的默认过期时间为当前浏览会话结束,即退出浏览器这个Cookie就无效了,这个Cookie就叫作非持久Cookie,因为是存储在浏览器进程的内存中的。如果给Cookie添加了一个过期时间,则Cookie信息将存储到硬盘上,即使浏览器退出这个Cookie还是存在的。只要Cookie未被清除且还在过期时间以内,这个Cookie就会在访问对应域名的时候发送给服务器。
从图9.21中可以看出,Cookie在访问对应域名下的资源的时候都会通过HTTP请求发送到服务器,所以通过合理地设计Cookie、减少Cookie的体积,能够减少HTTP请求报文的大小、提高响应速度。例如,静态资源域名不使用Cookie。Cookie在访问对应域名下的资源时都会通过HTTP请求发送到服务器,但是在访问一些资源(例如JavaScript脚本、CSS和图片)的时候,大多数情况下这些Cookie是多余的,所以我们可以通过使用不同的主机来存储一些静态资源,例如用专门的主机来存储图片,这样访问这些资源的时候就不会发送多余的Cookie,从而提高响应速度。
例如,访问阿里旅行无线首页 https://h5.m.taobao.com/trip/home/index.html,通过图9.22的network资源列表可以看出,图片均使用gw.alicdn.com域名,而JavaScript资源使用g.alicdn.com域名,ajax请求使用api.m.taobao.com域名。如此,针对不同静态资源的类型,分别使用不同的域名,这样访问这些资源的时候就不会发送多余的Cookie。好了,APP开发公司本文关于“开发APP的公司怎样解决异步加载第三方资源?”的相关经验就分享到这里,谢谢关注,博纳网络编辑整理。