一张图看懂移动HTML5前端性能优化

所属分类: 网站运营 / 其它相关 阅读数: 123
收藏 0 赞 0 分享

概述
1. PC优化手段在Mobile侧同样适用
2. 在Mobile侧我们提出三秒种渲染完成首屏指标
3. 基于第二点,首屏加载3秒完成或使用Loading
4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB
5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点
6. 基于第五点,要合理处理代码减少渲染损耗
7. 基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置
8. 加载完成后用户交互使用时也需注意性能
优化指南
[加载优化]
加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点
· 减少HTTP请求
因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个
a) 合并CSS、JavaScript
b) 合并小图片,使用雪碧图
· 缓存
使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)
a) 缓存一切可缓存的资源
b) 使用长Cache(使用时间戳更新Cache)
c) 使用外联式引用CSS、JavaScript
· 压缩HTML、CSS、JavaScript
减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip
a) 压缩(例如,多余的空格、换行符和缩进)
b) 启用GZip
· 无阻塞
写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾
部或使用异步方式加载
· 使用首屏加载
首屏的快速显示,可以大大提升用户对页面速度的感知,因此应尽量针对首屏的快速显示做优化
· 按需加载
将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量
PS:按需加载会导致大量重绘,影响渲染性能
a) LazyLoad
b) 滚屏加载
c) 通过Media Query加载
· 预加载
大型重资源页面(如游戏)可使用增加Loading的方法,资源加载完成后再显示页面。但Loading时间过长,会造成用户流失
对用户行为分析,可以在当前页加载下一页资源,提升速度
a) 可感知Loading(如进入空间游戏的Loading)
b) 不可感知的Loading(如提前加载下一页)
· 压缩图片
图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示
PS:过度压缩图片大小影响图片显示效果
a) 使用智图( http://zhitu.tencent.com/
b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
c) 使用Srcset
d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF)
e) 选择合适的大小(1. 首次加载不大于1014KB 2. 不宽于640(基于手机屏幕一般宽度))
· 减少Cookie
Cookie会影响加载速度,所以静态资源域名不使用Cookie
· 避免重定向
重定向会影响加载速度,所以在服务器正确设置避免重定向
· 异步加载第三方资源
第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源
[脚本执行优化]
脚本处理不当会阻塞页面加载、渲染,因此在使用时需当注意
· CSS写在头部,JavaScript写在尾部或异步
· 避免图片和iFrame等的空Src
空Src会重新加载当前页面,影响速度和效率
· 尽量避免重设图片大小
重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能
· 图片尽量避免使用DataURL
DataURL图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长
[CSS优化]
· 尽量避免写在HTML标签中写Style属性
· 避免CSS表达式
CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式
· 移除空的CSS规则
空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则
· 正确使用Display的属性
Display属性会影响页面的渲染,因此请合理使用
a) display:inline后不应该再使用width、height、margin、padding以及float
b) display:inline-block后不应该再使用float
c) display:block后不应该再使用vertical-align
d) display:table-*后不应该再使用margin或者float
· 不滥用Float
Float在渲染时计算量比较大,尽量减少使用
· 不滥用Web字体
Web字体需要下载,解析,重绘当前页面,尽量减少使用
· 不声明过多的Font-size
过多的Font-size引发CSS树的效率
· 值为0时不需要任何单位
为了浏览器的兼容性和性能,值为0时不要带单位
· 标准化各种浏览器前缀
a) 无前缀应放在最后
b) CSS动画只用 (-webkit- 无前缀)两种即可
c) 其它前缀为 -webkit- -moz- -ms- 无前缀 四种,(-o-Opera浏览器改用blink内核,所以淘汰)
· 避免让选择符看起来像正则表达式
高级选择器执行耗时长且不易读懂,避免使用
[JavaScript执行优化]
· 减少重绘和回流
a) 避免不必要的Dom操作
b) 尽量改变Class而不是Style,使用classList代替className
c) 避免使用document.write
d) 减少drawImage
· 缓存Dom选择与计算
每次Dom选择都要计算,缓存他
· 缓存列表.length
每次.length都要计算,用一个变量保存这个值
· 尽量使用事件代理,避免批量绑定事件
· 尽量使用ID选择器
ID选择器是最快的
· TOUCH事件优化
使用touchstart、touchend代替click,因快影响速度快。但应注意Touch响应过快,易引发误操作
[渲染优化]
· HTML使用Viewport
Viewport可以加速页面的渲染,请使用以下代码
· 减少Dom节点
Dom节点太多影响页面的渲染,应尽量减少Dom节点
· 动画优化
a) 尽量使用CSS3动画
b) 合理使用requestAnimationFrame动画代替setTimeout
c) 适当使用Canvas动画 5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)
· 高频事件优化
Touchmove、Scroll 事件可导致多次渲染
a) 使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染
b) 增加响应变化的时间间隔,减少重绘次数
· GPU加速
CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用

更多精彩内容其他人还在看

全方位解析百度竞价数据分析中的几个疑问

数据分析对于一个合格的竞价员来讲几乎成为必需品和熟知的技巧,数据分析可以看出竞价中很多的问题,包括数据关键词来源、高点击、高展现、高消费、高转化等如何优化与开展,下面针对百度竞价数据分析中几个疑问梳理梳理
收藏 0 赞 0 分享

网站引流不能死抱SEO 多元化才是引流的王道

如何才能够让站长们的未来变得一片光明呢?最为主要的就是要实现网站引流的多元化,如果只注重抱微信这一个大腿,想要提升网站流量就会变得很困难,因为从SEO优化的角度上来看,想要提升网站的排名自身就是一个长期的历程
收藏 0 赞 0 分享

蓝翔营销 到处是挖掘机哪家强,是否为蓝翔品牌挖了个坑?

“挖掘机技术哪家强?”。这句话在近一两个月在网络上可谓看到你都视觉疲劳了。现在挖掘机蓝翔负面新闻越来越多,下面面我们来看看挖掘机哪家强的对于蓝翔的影响
收藏 0 赞 0 分享

中国网站备案制度的弊端:繁琐复杂时间长成本高

网站备案制度繁琐复杂时间长成本高,建网站要备案,转接网站主机要备案,修改备案信息也要备案,新增网站也要备案。网站那好后, 工信部还要抽查核对信息,核对错误要注销备案。周期漫长的网站备案制度,迫使很多网站选择把主机放在国外地区
收藏 0 赞 0 分享

网站推广 你知道什么样的内容更容易获得快速传播吗?

每天人们在网上共享的信息都是不计其数,但当中有多少会引发在线的传播呢?只有很少,绝大部分都被淹没于浩瀚的信息流之中。你知道什么样的内容更容易获得快速传播吗?请看下文
收藏 0 赞 0 分享

网站与搜索引擎是什么关系?这才是网站与搜索引擎的关系

网站与搜索引擎是什么关系?很多做网站优化的人从来都不待见搜索引擎,甚至咬牙切齿,其实我要说的是,你本就是靠搜索引擎生财,完全没必要如此,搜索引擎不是网站的敌人,更不是仇家,相反,你有没有想过,搜索引擎与网站本来就是互利互惠
收藏 0 赞 0 分享

电商行业自己可能先革命 经纪公司该干什么?

一直叫嚣经纪行业将死亡的电商,在经纪公司并未出现问题的时候,自己的经营模式已经被广泛质疑。独立经纪人在目前中国市场里,天然就是鼓励私单。这种模式要是能做大,还有天理吗?电商平台自己开经纪公司,这不是让裁判员和博尔特一起赛跑?博尔特会干吗?
收藏 0 赞 0 分享

外卖O2O开进社区,淘金还是掉入深渊?

日前,叮咚小区资金链断裂的消息一时间引起热议,人们在唏嘘社区O2O烧钱的同时,也看到了这一市场的开发潜力。与生活用品、家庭大宗采购相比,“民以食为天”的餐饮则是刚需,也是消费最频繁、最容易聚集流量的入口。
收藏 0 赞 0 分享

挖掘机哪家强火了蓝翔赔死了:生源枯竭 巨额亏损

挖掘机哪家强火了以后,山东蓝翔高级技工学校及其创办人荣兰祥被接二连三的负面消息缠身。在“蓝翔师生跨省打架”等消息见诸媒体后,蓝翔目前来校新生的人数下降了90%,但是下半年的各项支出等1.8亿元还要正常进行,亏损基本已成定局
收藏 0 赞 0 分享

95后女生用身体旅行引爆事件营销,真的好吗?

“身体旅行”的事件最近很火吗,说白了也就是一个变相的营销,自称一名95后的“萌妹子”,想要通过“一城一爱”的方式实现心中的旅行梦想。简单来讲,就是面向全国不同城市征集不同的临时男朋友,由男朋友完成旅行导游和买单工作,而女孩子付出情感和身体
收藏 0 赞 0 分享
查看更多