响应式设计与性能优化整合应对移动挑战
作者:网络转载 发布时间:[ 2014/3/10 13:26:50 ] 推荐标签:性能优化 网页设计 移动
接下来关注于RWD应用程序、HTML、图像、JavaScript 和CSS对象的组成要素。为了更快加载页面,重点是:
· 减少请求数量
· 减少字节数量
· 加速渲染
下面我们来详细探讨这些因素。
减少请求数量
快的请求是不发起请求。每个客户端的HTTP请求和服务器相应组合至少代表网络上的一个往返。根据终端用户的情况及其离原始服务器的距离,一个请求往返需要几秒钟来完成。一个网页在渲染内容之前需要几十个HTTP请求,而这些请求往往会因为特定浏览器限制的连接数量而彼此拖延。为了减少往返,需要使用多种技术来消除不必要的请求,如合并多个CSS和JavaScript文件,内联图像,以及利用HTML5中新的缓存功能。
图2:减少请求的一个简单的办法是将多个CSS或JavaScript文件合并到一个文件夹中
减少字节数
原理很简单:网页越大(按字节数衡量),在受限网络上交付网页的时间越长,处理器处理和渲染内容的时间也越长。图像尤其是RWD网站的一个难题,通过调整图片格式、改进缓存管理、压缩文件以及删除注释、空格和图像元数据等数据而将文件尺寸保持在可控范围内。自动化解决方案旨在帮助为合适的设备提供合适的图像分辨率,并避免过大图像,无论是大屏幕还是小屏幕,在用户能够感知到的范围内保持图像质量。例如,有的页面可专为加载当前视窗内可视的图片而优化。随着用户下拉页面,新图像按需加载。按需加载图像有助于改进页面加载时间,还可在用户没有真正下拉页面的情况下减少带宽。特别是对RWD网站来说,这种方式可以避免页面下载隐藏图片,同样适用于显示尺寸或情况。
加速渲染
处理网页是一个复杂的流程。浏览器在加载时采用复杂的逻辑做出决策,例如哪些文件用串行方式下载,哪些用并行方式下载,哪些资源类型会阻止渲染,如何管理其连接。与此同时,浏览器必须解析和执行复杂的HTML、CSS和JavaScript代码,这些代码往往没有被明确定义。不幸的是,浏览器并不能提前识别网站,并会在处理页面时被迫采用通用逻辑。新旧浏览器之间的逻辑变化受限于向后兼容,且不是根据网站定制。延迟打印样式表、避免社交按钮妨碍渲染,以及预取下个页面等技术可引导浏览器做正确的事。因此,用户能获得真正快速的用户体验。
图3:由于字节数和请求数量降低,优化过的RWD网站速度明显提高,且渲染速度更快
结论
制作快速RWD网站未必容易,需要相当多的专业知识和资源。只有在极少数的机构内部拥有足够的开发者或专业知识来采取这一措施。随着RWD的演进,这个为所有用户提供快速优质的网络体验的新模式也变得人所共知。尤其是一种名为RESS(Responsive Web Design + Server Side Components))的方法,似乎融合了当前移动交付技术的所有优点,同时让性能保持。此外,如前所述,对于那些希望交付复杂RWD网站相关的开发者来说,也有多种选择。例如:将内容迁移到内容分发网络(CDN),这种技术可帮助加快网络性能或充分利用SPDY这样的佳交付机制。我们在这里重点介绍的技术也非常有用,一经采用,能显著提高交付快速优质网络体验的能力,同时与你的移动用户进行良好互动。
+++
关于作者:Lorenz Jakober
Lorenz Jakober是Akamai Technologies公司高级产品营销经理,在网络及移动应用程序设计、性能优化、可用性和交付等领域有着丰富的经验。他热衷于移动和网络性能主题发表演讲并撰写博客。
相关推荐
更新发布
功能测试和接口测试的区别
2023/3/23 14:23:39如何写好测试用例文档
2023/3/22 16:17:39常用的选择回归测试的方式有哪些?
2022/6/14 16:14:27测试流程中需要重点把关几个过程?
2021/10/18 15:37:44性能测试的七种方法
2021/9/17 15:19:29全链路压测优化思路
2021/9/14 15:42:25性能测试流程浅谈
2021/5/28 17:25:47常见的APP性能测试指标
2021/5/8 17:01:11