移动HTML 5前端性能优化指南(转载)
前端工程师的菜!最近移动Html 5越来越火,想有一个体验流畅的Html 5 应用,这篇优化指南就别放过咯。腾讯的同学将关键的注意点与优化方法都总结出来,全文高能干货,非常值得深度学习 >>>
概述
PC优化手段在Mobile侧同样适用
在Mobile侧我们提出三秒种渲染完成首屏指标
基于第二点,首屏加载3秒完成或使用Loading
基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB
Mobile侧因手机配置原因,除加载外渲染速度也是优化重点
基于第五点,要合理处理代码减少渲染损耗
基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置
加载完成后用户交互使用时也需注意性能
[加载优化]
加载过程是最为耗时的过程,可能会占到总耗时的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可以加速页面的渲染,请使用以下代码:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
减少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渲染,请合理使用。
PS:过渡使用会引发手机过耗电增加。
转至:http://www.3lian.com/edu/2015/01-24/189819.html
移动HTML 5前端性能优化指南(转载)的更多相关文章
- 移动H5前端性能优化指南(转载)
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- 移动H5前端性能优化指南
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- web前端性能优化指南(转)
web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...
- 移动H5前端性能优化指南[转]
移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首 ...
- [转]移动H5前端性能优化指南
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- [推荐]移动H5前端性能优化指南
[推荐]移动H5前端性能优化指南 http://isux.tencent.com/h5-performance.html
- web前端性能优化指南
web前端性能优化指南 web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loadin ...
- 移动 H5(PC Web)前端性能优化指南
原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_me ...
- jQuery性能优化指南(转载)
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, ...
- 移动H5前端性能优化指南[托尼托尼研究所]
概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2. ...
随机推荐
- Ping其他电脑ping不通的解决方法
要想Ping通其他电脑,首先要看被PING的电脑,是否允许PING. 一.在被PING电脑操作系统为XP下分为:1.被PING 电脑关闭了防火墙,就完全可以PING通:2.被PING 电脑开了防火墙, ...
- 持续集成环境Gitlab-CI的官方安装过程解析
持续集成环境是一个非常重要的工具,在分工合作的项目中有着举足轻重的作用.公司最近要用Gitlab,需要配套的持续集成环境.研究了官方的文档,感觉官方的文档不是很明了.各种修改过后终于成功了.为了大家安 ...
- 改善C#公共程序类库质量的10种方法和工具
最近重构一套代码,运用以下几种方法,供参考. 1 公共方法尽可能的使用缓存 public static List<string> GetRegisteredCompany() { Str ...
- c# 在datagridview中添加comboboxcolumn 绑定数据库读取显示数据
datagridview中的comboboxcolumn 从绑定的数据库中读取显示时,只需要注意一点,就是sql语句加个 CStr() 字符串转换函数即可,如下: SELECT CStr(XXX) a ...
- 激活phpstorm10.0.1
注册时选择“License server”输入“http://idea.lanyus.com/”点击“OK”快速激活JetBrains系列产品
- Bitmap的一个简单实现
一.Bitmap简介 Bitmap是一种常用的数据结构,其实就是一个连续的数组,主要是用于映射关系,如映射整数,一位代表一个数,即这里假设Bitmap有100Bytes * 8 这么多的位,那么这里可 ...
- 浅析flannel与docker结合的机制和原理
flannel flannel可以为容器提供网络服务. 其模型为全部的容器使用一个network,然后在每个host上从network中划分一个子网subnet. 为host上的容器创建网络时,从su ...
- java基础知识拾遗(四)
1.Runnable对象 启动线程:(new Thread(new MyRunnable()).start() 2.jsp中<%@ page language="java" ...
- C#中的文件操作1
1. 文件操作常用相关类 a)File //操作文件,静态类,对文件整体操作.拷贝.删除.剪切等. b)Directory //操作目录(文件夹),静态类 c)Di ...
- apns关于APP数字角标的理解
前两天群里有兄弟在吐槽,做远程推送的时候:老板要求APP桌面图标的右上角显示红色未读数字(数字角标)要精准,有多少未读通知就显示数字几:但是后台的弟兄在发送推送通知的时候,每次的角标是1,然后要移动端 ...