移动端开发优化总结

  1. 云栖社区>
  2. 博客>
  3. 正文

移动端开发优化总结

烟海之蓝 2019-07-29 18:44:56 浏览212
展开阅读全文
  • 首屏数据请求提前,避免 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渲染

网友评论

登录后评论
0/500
评论
烟海之蓝
+ 关注