加载完成后用户交互使用时也需注意性能 优化指南
[加载优化]
加载过程是最为耗时的过程, 可能会占到总耗时的 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.isux.us/ )
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.jianshu.com/p/fefa973e47b1