移动互联网的性能优化

1 .web响应式的挑战在于很容易加载很多不必要的内容,过大的图片,没必要的css和js.
2 .如何避免响应式网站在不同的网站上所传输的页面大小几乎是一样的。在设计响应式网站的时候仔细斟酌网站时所需要的资源加载策略,就能创造出在任何尺寸上的屏幕上都能表现极佳的用户体验
3 .当由桌面版设计改成小屏幕版的设计时更容易突出,那些为桌面版呈现而优化的资源会如何变化,通常是一成不变,图片还是原来的大小,只不过是通过css缩小了视觉尺寸,字体的传输的实现和桌面版也是一样。
4 .从上面的例子也可以看出,为什么bootStrap的设计原则是“移动优先”
5 .图片方面:使用媒体查询来设置background-image,display:none和或者把这个使用到background-image上面图片都是会加载的。在现代浏览器中,最好的方法是使用HTML的提供的picture元素,新标准可以通过匹配媒体属性告诉浏览器应该加载的图片资源。如果不支持这个属性的话,也可以使用img的sizes属性,来配合新标准实现优化

字体

1 .只在大屏下加载自定义字体,让移动用户尽量避免

性能预算示例

1 .页面总加载时间:2s
2 .页面总大小:300kb
3 .speed Index:1000mm

基于“移动优先设计”思考的好处

1 .预先凸显关键问题-这个页面内的核心内容是什么?
2 .为用户提供最重要的功能和内容
3 .建立设计模式以及他们在不同尺寸上的屏幕上如何变化
4 .从无障碍访问的角度考虑网站-即在低网速或者低端设备上的可访问性如何
5 .移动网站并不是桌面的附庸,反之亦然,内容等同并不意味着每个平台的体验是应该一致,在设计开发的时候应该充分考虑用户的需求

面对的问题

1 .厂商机型丰富,开发高级版和简易版
2 .多移动平台:厂商各自订制的系统,ios的不同版本兼容
3 .网络复杂,多变。2G-5G,三大运营商的不同让步,应用性能环境会随着移动信号的改变而变得更不稳定。
4 .

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