开发者社区> 烟海之蓝> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

移动端开发优化总结

简介: 首屏数据请求提前,避免 JavaScript 文件加载后才请求数据 为了进一步提升页面加载速度,可以考虑将页面的数据请求尽可能提前,避免在 JavaScript 加载完成后才去请求数据。通常数据请求是页面内容渲染中关键路径最长的部分,而且不能并行,所以如果能将数据请求提前,可以极大程度上缩短页面内容的渲染完成时间。
+关注继续查看
  • 首屏数据请求提前,避免 JavaScript 文件加载后才请求数据

    为了进一步提升页面加载速度,可以考虑将页面的数据请求尽可能提前,避免在 JavaScript 加载完成后才去请求数据。通常数据请求是页面内容渲染中关键路径最长的部分,而且不能并行,所以如果能将数据请求提前,可以极大程度上缩短页面内容的渲染完成时间。

  • 首屏加载和按需加载,非首屏内容滚屏加载,保证首屏内容最小化

    JavaScript 资源放到 HTML 文档底部可以防止 JavaScript 的加载和解析执行对页面渲染造成阻塞。由于 JavaScript 资源默认是解析阻塞的,除非被标记为异步或者通过其他的异步方式加载,否则会阻塞 HTML DOM 解析和 CSS 渲染的过程。

  • 模块化资源并行下载

    在加载大量的图片元素时,尽量预先限定图片的尺寸大小,否则在图片加载过程中会更新图片的排版信息,产生大量的重排

  • inline 首屏必备的 CSS 和 JavaScript

    在 HTML 中直接缩放图片会导致页面内容的重排重绘,此时可能会使页面中的其他操作产生卡顿,因此要尽量减少在页面中直接进行图片缩放。

  • meta dns prefetch 设置 DNS 预解析

    设置文件资源的 DNS 预解析,让浏览器提前解析获取静态资源的主机 IP,避免等到请求时才发起 DNS 解析请求。通常在移动端 HTML 中可以采用如下方式完成。

<!--cdn域名预解析-->
<meta http-equiv="x-dns-prefetch-control" content="on" >
<link rel="dns-prefetch" href="//cdn.domain.com" >
  • 资源预加载

    对于移动端首屏加载后可能会被使用的资源,需要在首屏完成加载后尽快进行加载,保证在用户需要浏览时已经加载完成,这时候如果再去异步请求就显得很慢。

  • 图片压缩处理

    在移动端,通常要保证页面中一切用到的图片都是经过压缩优化处理的,而不是以原图的形式直接使用的,因为那样很消耗流量,而且加载时间更长。

  • 使用较小的图片,合理使用 base64 内嵌图片

    在页面使用的背景图片不多且较小的情况下,可以将图片转化成 base64 编码嵌入到 HTML 页面或 CSS 文件中,这样可以减少页面的 HTTP 请求数。需要注意的是,要保证图片较小,一般图片大小超过 2KB 就不推荐使用 base64 嵌入显示了。

  • 使用更高压缩比格式的图片

    使用具有较高压缩比格式的图片,如 webp(需要设计降级兼容方案)等。在同等图片画质的情况下,高压缩比格式的图片体积更小,能够更快完成文件传输,节省网络流量。

  • 图片懒加载

<img data-src="//cdn.domain.com/path/photo.jpg" alt="懒加载图片" >
  • 使用 MediaQuery 或 srcset 根据不同屏幕加载不同大小图片

  • 使用 iconfont 代替图片图标

  • 页面元素尽量使用事件代理,避免直接事件绑定

  • 尽量使用 id, 合理缓存 DOM 对象

  • 使用 touchstart 代替 click

  • 避免使用 eval、with,使用 join 代替连接符+,推荐使用 ECMAScript6 的字符串模板

  • 尽量使用 ECMAScript6+的特性来编程

  • 使用 NativeView 代替 DOM 的性能劣势

加载优化

  • 合并css、JavaScript
  • 合并小图片,使用雪碧图
  • 缓存一切可以缓存的资源
  • 使用长cache
  • 使用外联引用css、JavaScript
  • 压缩html、css、JavaScript
  • 启用GZip
  • 使用首屏加载
  • 使用按需加载
  • 使用滚动加载
  • 通过media query加载
  • 增加loading进度条
  • 减少cookie
  • 避免重定向
  • 异步加载第三方资源

css优化

  • 避免图片和iframe等空的src
  • 尽量避免重设图片大小
  • 图片尽量避免使用dataUrl
  • 避免html写style属性
  • 避免css表达式
  • 移除空的css规则
  • 不滥用float
  • 不滥用web字体
  • 不声明过多的font-size
  • 值为0时不需要任何单位
  • 标准化各浏览器前缀
  • 避免使用id选择器
  • 尽量坚持class嵌套

图片优化

  • 使用智图 七牛图片api
  • 使用(css3、svg、iconfont)代替图片

脚本优化

  • 减少重绘和回流
  • 缓存dom选择与计算
  • 缓存列表长度
  • 使用事件代理,避免批量绑定事件
  • 尽量使用id选择器
  • 使用touchstart、touchend代替click

渲染优化

  • html使用viewpoint
  • 减少dom节点
  • 尽量使用css3动画
  • 合理使用requestAnimationFrame动画代替setTimeout
  • 适当使用canvas动画
  • 使用css3 transitions、css3 3d transfroms、opacity、Canvas、webgl、video来触发GPU渲染

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
移动web开发问题和优化小结
移动web开发问题和优化小结
38 0
移动端开发的几条总结
移动端开发的几条总结
55 0
移动端性能优化系列—启动速度
移动端性能对用户体验、留存有着至关重要的影响,作为开发者是不是被这样吐槽过,“这个 APP 怎么这么大?”、“怎么一直在 APP 封面图转悠,点不进去”、“进入详情效果有些卡”、“用 4G 使用你们的 APP,我的流量有点不够啊”等等,这些问题都直观反映出,一个体验良好的应用,只有功能健全还不够。
294 0
移动端首屏优化策略
采用服务器渲染ssr 按需加载配合webpack分块打包 很有必要将script标签异步 有轮播图 最好给个默认 另外要处理图片懒加载 打包线上也要注意去掉map 文件 组件懒加载 路由懒加载 webpack的一切配置 肯定是必须的 这个百度去 做...
1017 0
第118天:移动端开发——视口
移动端视口的分类说明。在开始之前,先看一个典型的例子: 1 2 @media screen and (max-width:480px){ 3 //宽度不超过480px时的样式 4 } 上述代码相信大家在做移动端开发时经常去书写。
1201 0
移动端web总结
viewport 通用模版: DOCTYPE html> 标题 这里开始内容     参考:http://www.qdfuns.com/notes/48206/d69581dd876539fb47ff750cd8cccb00.html
773 0
移动端弹性效果
布局一: 定义页面整体高度为100%,然后使用 position:absolute 布局可解决     header          弹性滚动区域         footer html,body{height:100%;} .
759 0
移动开发的图像优化综述
图片使得Web应用、移动应用的外观变得更漂亮。但是,这些闪闪发光的像素(图片)会占用较大的存储空间和内存。 图片的尺寸有几层含义:意味着网页的载入时间的增加,影响用户的访问体验;甚至会影响Google对你的网页的搜索排名;还可能导致移动App的尺寸变得较大,影响App的下载。
770 0
+关注
烟海之蓝
程序设计之道,无远弗界,御晨风而返
文章
问答
文章排行榜
最热
最新
相关电子书
更多
《网站性能与体验优化实践指北》
立即下载
H5动画在移动平台上的性能优化实践
立即下载
ReactNative实战优化之路
立即下载