响应式设计的性能优化

2010年,Ethan Marcotte 提出了「响应式网页设计」(Responsive Web Design),通过 Media Query 和 Fluid Layout 判断屏幕宽度,自行调整布局.

一般,在页面头部加入 viewport 标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  • viewport: 一般指的是浏览器窗口内容区的大小,不包含工具条、选项卡等内容
  • width: 浏览器宽度,输出设备中的页面可见区域宽度
  • device-width: 设备分辨率宽度,输出设备的屏幕可见宽度
  • initial-scale: 初始缩放比例
  • maximum-scale: 最大缩放比例

当将 content 属性设置为 width=device-width 后,浏览器宽度以设备分辨率宽度显示. 所以在接下来的 Media Query 设置断点判断 width ( 浏览器宽度 ). 而不是判断 device-width ( 设备分辨率宽度 ). 因为在 PC 端拉伸屏幕将不会产生响应式( device-width 没有发生变化,仅仅是 width 发生变化 )

这样在移动端设置 width=device-width 后,判断 width (浏览器宽度),同时也是判断 device-width (设备分辨率宽度).

@media (min-width: 768px) {
  .main {
    width: 25%;
    float: left;        
  }
  
  .sidebar {
    width: 75%;
    float: right;
  }
}

断点设置

那么问题来了,普遍的响应式设计一般会要求按照主流设备的屏幕分辨率设置断点. 随着现在手机更新迭代越来越快,屏幕分辨率更是参差多态. 现在设置的断点,可能一年半载就已不适应. 所以与其让「屏幕分辨率」确定断点,不如让「内容」确定断点.

引用 Responsive Design Workflow 作者 Stephe Hay 的话来说:

Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!

大概意思是,从你需要适配的最小屏幕宽度开始测试,慢慢地拉伸,当你发现页面像坨屎的时候,一个新的断点就确定了. 接下来继续反复拉伸,确定新的断点,直到你所需要适配的最大屏幕宽度为止.

最后,你会发现通过 内容确定断点 使用的断点数量远比 屏幕分辨率确定断点 要少.

图片避免使用 display: none;

许多第一次使用 Media Query 进行响应式设计的伙伴们,都喜欢使用 display: none; 来隐藏内容. 可在 http 请求背后,这些被隐藏的内容也会请求下来. 这样就造成移动端浏览网页时,请求许多用不到的资源,造成加载缓慢.

以图片请求为例:

多数浏览器产生请求不产生请求
img设置 src 属性 / display: none;图片地址设置在不存在的属性中,比如 data-img
background-imagedisplay: none;background-image: none;

由上表可知,使用 display: none; 隐藏图片的方式是绝对要避免的. 对于一张内容图片更倾向于使用 Javascript 方案( data-img-jquery 之类的 ). 对于背景图片可以设置 background-image: none; .

更多详情参考:
媒体查询与 http 请求

能否更进一步优化?

后来思考,响应式设计不过是一种妥协. 承载着 PC 端的臃肿,通过 Media Query 和 Fluid Layout 让其表面简化适应移动端,可内在已混杂着移动端本身所不需要的代码和资源,所谓金玉其外,败絮其中.

如果追求更极致的性能,那重新制作一套移动页面或单独的移动 app 会更为合适.

(▰˘◡˘▰) 当然如果你有关于响应式设计的性能优化的想法,请告诉我 :)

    原文作者:阿树
    原文地址: https://www.jianshu.com/p/193911ee72e2
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞