移动互联网的性能优化

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 .

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 179,855评论 25 708
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,268评论 1 92
  • 本以为,那些尘封的记忆 连同岁月和你 都一起留在荒芜的时光里 埋在层层的黄沙中 从此,日子一片风轻云淡 各自为安 ...
    又见依依阅读 464评论 13 22
  • 大家喜欢的我也应该会喜欢,不是这样的,大多数时候我只喜欢我喜欢的
    江江不入海阅读 99评论 0 0
  • 曾经海誓山盟,曾经天作之合,曾经海枯石烂,然后怎么了?当你走过一段人生旅程的时候,你回过头来会发现,很多事情都很抽...
    肖哲XZ阅读 831评论 6 37

友情链接更多精彩内容