移动端实用性能优化
移动端优化,老生常谈的问题了。面试题问,实际应用中(在开发时间充裕的情况下,也会用)。
但是,在移动端中,实用的优化方式,用户体验方式都是尤为关键的
第一点: 我认为是页面加载速度
首先,我觉得移动端加载速度一般最长不能超过5s。一般保持在3秒左右(作为体验最佳)。那么问题来了,一般页面都会调用很多后端接口,用数据来渲染页面,3秒实在有些困难。那么解决方法就来了
1,按模块请求接口。将页面多个接口分成多个小模块,保证每个接口加载内容不用太多。
2,运用骨架屏。首先加载骨架屏,也就是占位符。使页面不至于初始加载是空白(基本每一个框架都有骨架屏)
【移动端实用性能优化】3,cdn 加载。(如有疑问请自己查看cdn缓存机制)
4,图片尽量要小,(能用图片精灵就用图片精灵,能用icon 就用icon)。如果上述不能用的话,那么可以让后端返回给你(效率相对高一些),还有就是上传一些公共的服务器,利用返回的图片网址进行加载。对了,还可以进行图片
懒加载(但是我感觉加载速度还是慢)。
第二点: 从代码方面
1,setTimeOut ,setInterval 等这种宏任务 能少用就少用。很是影响加载速度,如果不能及时消除掉,一直缓存在内容冲,可能就会出现页面崩溃的情况。
2,要遵守编写代码规范,少用 多循环,例如 多次for 循环,等(具体还要看用什么 语言来编写的代码规范来)
3,从页面布局来看,不能嵌套 很多层 ,现在大部分前端都是 div >div > div > div ......根据html语义化来定义。而且嵌套很多层,导致html 加载速度过慢,当修改页面内容的时候,影响回流和重绘的加载速度,刷新页面会导致页面崩溃。
4,css方面,从清晰度上来说,less ,sass 一些高端用法,例如:&- ,这样的语法,看起来很高端,但是可能会影响后人的维护页面的效率(根据个人喜好,这个没什么好炫耀的)。
5,css 动画,一个页面最多不要超过3个动画,transtions (瞬时动画),animates(非瞬时动画),都会影响页面加载的速度
推荐阅读
- 从零开始学WEB前端|从零开始学WEB前端——网页的行为——JavaScript基础(1)
- 【从实战带你认识gulp】打包前端项目并实现防缓存
- 后端|大名鼎鼎的 Linux —— 进程,线程,协程
- linux-驱动|NXP LS1046A及飞腾新四核 FT2004 PCIE EP端LINUX设备驱动开发
- 为什么服务器端都使用Linux系统
- SpringBoot基于redis自定义注解实现后端接口防重复提交校验
- 网络互联|互联网发展阶段的三阶段是什么(从门户到搜索,到移动互联网)
- vue移动端判断手指在屏幕滑动方向
- 前端开发工程师知识体系|H5画布 canvas 入门到精通 _ 第三部分(canvas 库 Konva.js 的使用)
- 前端开发工程师知识体系|H5画布 canvas 入门到精通 _ 第二部分(绘制文字、图片、坐标系,canvas颜色和样式,canvas绘制环境)