桂林网站建设,桂林网站设计,桂林网络公司,桂林手机网站制作,桂林网站优化,桂林网站推广

网站建设,网站优化,微信开发,手机APP开发
首页 > 常见问题 > 客户问答 > 响应式网站的移动性能如何优化?

常见问题

响应式网站的移动性能如何优化?

自2000年开始,设计者和开发者就把移动设备的问题过于简单化,以至于现在仍然有人认为响应式网页设计能解决一切问题。

 

响应式设计是很不错,但不是万能钥匙。如果在移动设备上一味坚持,在转换率后就可能隐藏着性能问题。

 

交互、移动、快速

 

如果能使用一些其他的技术,就可以实现获得响应式设计好处的同时,不影响移动设备的性能。响应式设计从来不是意味着要解决“性能”,这也是为什么不能因此指责它的原因。然而,相信它能解决你所有问题,这大错特错。

 

设计响应式很重要,因为需要解决跨桌面和移动端视窗大小范围的问题。但是只考虑屏幕大小就低估了移动设备。桌面和移动端的界限正在变得模糊,基于不同的设备仍然有多种可能性。但是还不能通过媒体查询来决定响应式设计的功能。一些评论家称之为“可靠的响应式网页设计”,然而另一些人则认为它是伴随现代视觉的响应式网页设计。在没有了解其基本语义的情况下,我们需要搞清楚这个问题。

 

虽然没有可应用于各类文档的万全之策,但是能够运用一些技巧来改善现有响应式的解决办法,并且力求性能最大化。

 

实现每一个文档对所有的设备都使用相同的URL和相同的内容,结构不必要相同。

 

当从零开始,遵循“移动先行”的方法。

 

在一个真实设备上测试当资源加载和显示会发生什么。不要依赖调整你的桌面浏览器。

 

使用优化工具测量和提高性能。

 

通过JavaScript传输响应图片,虽然我们更期盼着浏览器供应商(例如srcset)能解决这个问题

 

当你需要当前设备具备加载条件时,只加载JavaScript,这会在onload事件之后发生。

 

对移动设备,内联文档的原始视图,或者发送一屏显示内容。

 

使用下面一种或几种技术应用智能响应式的解决方案:条件加载、按组响应、服务器端层(如适应性方法)。

 

条件加载

 

不要总是在CSS中依赖media queries,因为浏览器将会为所有设备加载和解析所有选择器和样式(后面详细讨论)。这就意味着手机为了一个大屏要下载和解析CSS。因为CSS块的呈现,你要浪费一些时间等待联接成功。

 

在设备上用JavaScript的matchMedia查询来代替CSS media queries,知道这些内容是不会变化的。例如,大家都知道iPhone不能动态的转换成iPad的规格,所以只在正在需要CSS时才用。

 

可以用特征检测,例如Modernizr,对UI和功能性做出更明智的决定而不是仅仅根据屏幕尺寸。

 

按组响应

 

在处理简单文档、为台式电脑和智能手机提供相同的HTML时,虽然为我们可以让所有屏幕依赖一个单一的HTML基础和响应式设计,但这并不总是最好的解决方案。为什么呢?同样是由于移动设备的性能。

 

即使在服务器端储存相同的文档,但是根据设备组别的不同给用户不同的文档。举个例子,为一个6英寸甚至更大的屏幕提供大的浮动菜单,为一个小屏幕提供汉堡菜单。在每个组群里,使用响应时技术以适应不同的场景,例如肖像模式和风景模式的转换,切换iPhone(320像素宽)、5英寸Android设备(360英寸)和平板(400像素)。

 

服务器端层

 

智能响应策略的最后一个选择是服务器。

 

服务器端功能检测和决策不是移动网络的新鲜玩意。类似WURFL 和Device Atlas的库在市场上有好多年,响应式设计和服务器组件的混合也众所周知。有时被称为是响应式设计和服务器端组件(RESS),有时又叫自适应设计,这提高了响应式设计的速度和可用性,同时每一个服务器端都保持一个代码库。

 

很遗憾的是。这些技术这几年并没有什么突破性的发展。只能在博客和杂志里看到一些开发者对“RESS”、“响应式”、“自适应”做比较。原因就是前端专业人士。任何涉及到服务器的事情看起来都是不太愉快的问题。在一些情况下,前端设计师能把握好服务器的脚本,另一些情况是,服务器由远程开发团队管理,设计师不想每做一次小的UI改变就要和远程团队沟通处理。我能体会这种感觉。

 

这就是在大型项目中要花时间思考新架构层的原因,这样前端工程师对服务器做决定时不会影响到后端架构。

 

在这个新的端层里,前端的工程师可以根据有现实的决定权,这会使得在不触及后端架构的情况下,让所有设备上的体验更为快速、响应、可用。

 


商务黄经理

微信二维码

13025987659

18177335388

客服中心