移动端页面性能优化方案
移动端页面性能优化方案
- 加载优化
- 使用首屏加载
- 按需加载
- 预加载
- 压缩图片
- 减少Cookie
- 异步加载第三方资源
- 脚本执行优化
- CSS优化
- JavaScript执行优化
- 渲染优化
- SEO(搜索引擎优化)
如何优化HTML5在移动设置上的性能表现,首先我们需要明确以下几个原则:
- PC优化手段在Mobile侧同样适用。
- 在Mobile侧我们提出三秒种渲染完成首屏指标。
- 基于第二点,首屏加载3秒完成或使用Loading。
- 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB。
- Mobile侧因手机配置原因,除加载外渲染速度也是优化重点。
- 基于第五点,要合理处理代码减少渲染损耗。
- 基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置。
- 加载完成后用户交互使用时也需注意性能。
下面有一张图片详解
从上图可以看出,上面基本涵盖所有的优化方案了。在这里,只是针对其中几个代表性方案出来探讨。
加载优化
对于移动端的网页来说,加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点,当然,手机站的其他前端要素优化也是不能忽略的。
减少HTTP请求:
因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个,马海祥建议的优化要点为以下2点:
(1)合并CSS、JavaScript
(2)合并小图片,使用雪碧图缓存
使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)。
(1)缓存一切可缓存的资源;
(2)使用长Cache(使用时间戳更新Cache);
(3)使用外联式引用CSS、JavaScript;
(4)压缩HTML、CSS、JavaScript;
减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip。
(1)压缩(例如,多余的空格、换行符和缩进)
(2)启用GZip;无阻塞
写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾部或使用异步方式加载;
使用首屏加载
首屏的快速显示,可以大大提升用户对页面速度的感知,因此应尽量针对首屏的快速显示做优化。
1、对文件和图片进行压缩
图片的压缩至关重要,将图片做无损压缩,图片大小根据屏幕大小设置好,可以极大减小图片的大小,又不失质量。
2、懒加载
对图片进行懒加载的操作
3、页面缓存
可采取SDN方式
文件发布到服务器之间都必须是压缩版的,这样不止相对安全,还压缩了文件大小。
按需加载
将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量。
(1)LazyLoad
(2)滚屏加载
(3)通过Media Query加载
按需加载会导致大量重绘,影响渲染性能。
预加载
大型重资源页面(如游戏)可使用增加Loading的方法,资源加载完成后再显示页面,但Loading时间过长,会造成用户流失。
(1)可感知Loading(如进入空间游戏的Loading)
(2)不可感知的Loading(如提前加载下一页)
(3)对用户行为分析,可以在当前页加载下一页资源,提升速度。
压缩图片
图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示。
(1)使用智图;
(2)使用其它方式代替图片(使用CSS3;使用SVG;使用IconFont)
(3)使用Srcset
(4)选择合适的图片(webP优于JPG;PNG8优于GIF)
(5)选择合适的大小(首次加载不大于1014KB;基于手机屏幕一般宽度不宽于640)
过度压缩图片大小影响图片显示效果。
减少Cookie
Cookie会影响加载速度,所以静态资源域名不使用Cookie。
- 避免重定向
重定向会影响加载速度,所以在服务器正确设置避免重定向。
异步加载第三方资源
第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源;
脚本执行优化
脚本处理不当会阻塞页面加载、渲染,因此在使用时需要注意以下几点:
1、CSS写在头部,JavaScript写在尾部或异步。
2、避免图片和iFrame等的空Src,空Src会重新加载当前页面,影响速度和效率。
3、尽量避免重设图片大小,重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能。
4、图片尽量避免使用DataURL,DataURL图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长。
CSS优化
1、尽量避免写在HTML标签中写Style属性。
2、避免CSS表达式,CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式。
3、移除空的CSS规则,空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则。
4、正确使用Display的属性,Display属性会影响页面的渲染,因此马海祥建议各位站长要合理使用。
(1)、display:inline后不应该再使用width、height、margin、padding以及float
(2)、display:inline-block后不应该再使用float
(3)、display:block后不应该再使用vertical-align
(4)、display:table-*后不应该再使用margin或者float
5、不滥用Float,Float在渲染时计算量比较大,尽量减少使用。
6、不滥用Web字体,Web字体需要下载,解析,重绘当前页面,尽量减少使用。
7、不声明过多的Font-size,过多的Font-size引发CSS树的效率。
8、值为0时不需要任何单位,为了浏览器的兼容性和性能,值为0时不要带单位。
9、标准化各种浏览器前缀
(1)无前缀应放在最后。
(2)CSS动画只用(-webkit- 无前缀)两种即可。
(3)其它前缀为“-webkit- -moz- -ms-无前缀”四种(-o-Opera浏览器改用blink内核,所以淘汰)。
10、避免让选择符看起来像正则表达式。
高级选择器执行耗时长且不易读懂,避免使用。
JavaScript执行优化
1、减少重绘和回流
(1)避免不必要的Dom操作
(2)尽量改变Class而不是Style,使用classList代替className
(3)避免使用document.write
(4)减少drawImage
2、缓存Dom选择与计算,每次Dom选择都要计算,缓存他。
3、缓存列表.length,每次.length都要计算,用一个变量保存这个值。
4、尽量使用事件代理,避免批量绑定事件。
5、尽量使用ID选择器,ID选择器是最快的。
6、TOUCH事件优化,使用touchstart、touchend代替click,因快影响速度快,但应注意Touch响应过快,易引发误操作。
渲染优化
HTML文档是以包含文档编码信息的数据流方式在网络间传输,页面的编码信息一般会在HTTP响应的头部信息或在文档内的HTML标记中指明,客户端浏览 器只有在确定了页面编码后才能正确的渲染页面,所以在绘制页面或执行任何的javascript代码前,大部分的浏览器(ie6、ie7、ie8除外)都 会缓冲一定字节的数据来从中查找编码信息,不同的浏览器当中预缓冲的字节数是不一样的。
- HTML使用Viewport
Viewport可以加速页面的渲染,请使用以下代码:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
减少Dom节点
Dom节点太多影响页面的渲染,应尽量减少Dom节点。动画优化
(1)、尽量使用CSS3动画。
(2)、合理使用requestAnimationFrame动画代替setTimeout。
(3)、适当使用Canvas动画5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)。
- 高频事件优化
Touchmove、Scroll事件可导致多次渲染。
(1)、使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染。
(2)、增加响应变化的时间间隔,减少重绘次数。
- GPU加速
CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用。
另外,过渡使用会引发手机过耗电增加。
HTML5只是一种方法和手段,并不是万能的,思考怎么符合移动端设备特别是没错,但前提务必要基于PC站框架结构和内容,保证内容的一致性是解决 HTML5痛点的唯一办法,这个时候大家再去理解“凡是适合在移动端展现的网站”就不是站在高点去理解了,就应该站在最低点,怎么展示符合移动界面,同时 满足一部分移动用户的使用体验和需求。
SEO(搜索引擎优化)
百度明确提出,对于首屏加载时间小于2s的网站,百度对于SEO的排名,会明确提权。首屏加载时间大于3s,排名就会被打压。这就意味着,对于加载时间过长的网站,就算你的SEO内容优化再好,也很难获得很好的排名了。
移动端页面性能优化方案相关推荐
- 浅谈移动端页面性能优化方案
众所周知,在互联网行业里,移动端占有的比例越来越高了,尤其实在电商领域,用户购物大部分在移动端.比如淘宝双11,在移动端支付的接近7成.这就要求我们产品质量越来越高,那对于我们前端工程师来说也是一个挑 ...
- 人人都能掌握的Java服务端性能优化方案
转载自 人人都能掌握的Java服务端性能优化方案 作为一个Java后端开发,我们写出的大部分代码都决定着用户的使用体验.如果我们的代码性能不好,那么用户在访问我们的网站时就要浪费一些时间等待服务器的响 ...
- 重度使用Flutter研发模式下的页面性能优化实践
简介: 淘宝特价版是集团内应用Flutter技术场景比较多,且用户量一亿人以上的应用了.目前我们首页.详情.店铺.我的,看看短视频,及评价,设置等二级页面都在用Flutter技术搭建.一旦Flutte ...
- 雅虎网站页面性能优化的34条黄金守则(转)
2019独角兽企业重金招聘Python工程师标准>>> 雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下 ...
- web页面性能优化及SEO优化
web页面性能优化 前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网 ...
- 干货 | 数据思维在携程商旅页面性能优化中的一次实践
作者简介 Graviton,携程研发总监,专注数据思维驱动团队效能与技术发展. 本文旨在通过一个实际的例子,说明如何通过数据思维来解决研发工作中的一些棘手问题.通过此文,希望能够清楚地阐述我对下面几个 ...
- Unity移动端游戏性能优化简谱之 以引擎模块为划分的CPU耗时调优
<Unity移动端游戏性能优化简谱>从Unity移动端游戏优化的一些基础讨论出发,例举和分析了近几年基于Unity开发的移动端游戏项目中最为常见的部分性能问题,并展示了如何使用UWA的性能 ...
- 前端页面性能优化 - 字体加载优化
相比于英文的字库来说,中文字库的体积非常之大,小则1M,动辄几十 M 的体积非常常见.所以在前端页面性能优化中,字体加载的优化就显得尤为重要.阅读了相关的知识和文章,在研究了市面上字体加载方案之后,我 ...
- 网站页面性能优化的34条黄金守则
1. Make fewer HTTP requests 尽可能少的http请求..我们有141个请求(其中15个JS请求,3个CSS请求,47个CSS background images请求),多的可 ...
最新文章
- zookeeper -- 第四章 zookeeper watcher讲解
- stack vs heap:栈区分配内存快还是堆区分配内存快 ?
- 【翻译】ASP.NET 4中的可扩展输出缓存
- 基于JAVA+SpringMVC+Mybatis+MYSQL的同学录管理系统
- 摇一摇根据城市位置推荐酒店
- JVM原理-jvm内存模型
- 【数据库系统工程师复习笔记】0.考试大纲及教程目录
- 机器学习中的数学——激活函数(六):Parametric ReLU(PReLU)函数
- obs源码简析之推流
- 如何去掉firefox启动就是360主页 小白实操记录
- cadence 617工艺库安装以及相关问题解决
- WiFi钥匙管家-免费上网神器
- Seating Arrangement CSU - 1997 (思维题,是否存在n个数的序列,使得相邻啷个数的差绝对值大于d)
- 云服务器搭建深度学习环境
- Linux错误:bash:finger 未找到命令...
- JS手机号身份证验证
- adblockplus简单介绍
- 刷APP任务平台可靠吗?
- 为什么要进行傅立叶变换?如何用Matlab实现快速傅立叶变换?
- kubernetes之ReplicaSet