移动端开发优化总结

简介: 首屏数据请求提前,避免 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渲染
相关文章
|
9天前
|
Web App开发 缓存 前端开发
前端性能优化方案有哪些?
前端性能优化方案有哪些?
82 1
|
9天前
|
缓存 前端开发 JavaScript
|
9天前
|
缓存 前端开发 JavaScript
如何优化前端性能:7个实用技巧
在当今互联网高速发展的时代,前端性能优化成为了每个开发者必须面对的挑战之一。本文将介绍7个实用的技巧,帮助前端开发者提升网站性能,提升用户体验。
|
3天前
|
缓存 监控 前端开发
前端性能优化以及解决方案
前端性能优化关乎用户体验和网站竞争力,包括减少HTTP请求、使用CDN、压缩资源、延迟加载、利用浏览器缓存等策略。制定优化计划,使用监控工具,遵循最佳实践并持续学习,能提升网站速度和稳定性。
22 0
|
8天前
|
缓存 JavaScript 前端开发
首屏性能优化:提升用户体验的秘籍
首屏性能优化:提升用户体验的秘籍
|
9天前
|
缓存 前端开发 JavaScript
如何优化前端性能:最佳实践与工具推荐
在当今互联网时代,用户对网页加载速度和性能的要求越来越高。本文将介绍一些优化前端性能的最佳实践,包括代码压缩、资源合并、懒加载等技术,并推荐一些实用的工具,帮助开发者提升网页加载速度和用户体验。
|
9天前
|
缓存 前端开发 JavaScript
优化前端性能的10个实用技巧
提高网站或应用程序的性能是前端开发中至关重要的一部分。本文将介绍10个实用的技巧,帮助前端开发人员优化其项目的性能,包括减少HTTP请求、使用CDN加速、压缩和合并文件、优化图片等方面的技术手段,以提升用户体验和网站加载速度。
|
9天前
|
缓存 测试技术 Android开发
构建高效Android应用:从性能优化到用户体验
在移动开发领域,创建一个流畅的Android应用并非易事。本文将深入探讨如何通过性能优化和提升用户界面(UI)设计,以增强整体应用性能和用户体验。我们将讨论内存管理、多线程处理、网络请求优化以及Material Design的应用,这些策略和技术的综合运用能够显著提高应用的响应速度和用户满意度。
|
9天前
|
前端开发
前端性能优化:掌握解决方案
我们常说性能永远是第一需求,作为一个前端工程师,不管使用什么框架,不管从事什么类型的网站或应用开发,只要是项目被用户使用,性能优化就永远是你需要关注的问题。通常情况下,工程师们在深入了解前端技术的原理后,才能总结出性能优化的方案,需要多年经验的积累。前端技术日新月异,优秀的性能优化方案在近几年也层出不穷。本课程带你使用当今行业中非常前沿&专业的方案,解决前端性能优化问题。无论是为了解决工作中的实际问题,还是为了提升能力,这门课都能帮到你。
18 2
前端性能优化:掌握解决方案
|
10月前
|
移动开发 前端开发 JavaScript
前端工程化的前端性能的性能优化方案的渲染层面优化之DOM优化
DOM 优化是一种非常重要的前端性能优化方案,因为它可以在不同的环境中提高网页的响应速度和可接受性。
72 0