我在W3CTech北京站第30期的分享，主要是解决了工作中遇到的一些问题，并没有对问题做深入的讨论。有不足之处请大家指正。

1. 移动端Web 发性能优化实践

2. About me
张明
小米-米聊 前端工程师
Miliao: 500520
QQ: 19360348
@mingelz

3. 米世界构想

4. 米世界构想
• 米聊客户端提供WebView

5. 米世界构想
• 米聊客户端提供WebView
• 使用HTML/CSS/JS构建App

6. 米世界构想
• 米聊客户端提供WebView
• 使用HTML/CSS/JS构建App
• 随时升级App，不用等客户端更新

7. 米世界构想
• 米聊客户端提供WebView
• 使用HTML/CSS/JS构建App
• 随时升级App，不用等客户端更新
• 不占用客户端体积，却提供无限可能

8. 遇到的问题

9. 遇到的问题
2G基站连接时间长

10. 遇到的问题
2G环境数据下载缓慢
2G基站连接时间长

11. 遇到的问题
2G环境数据下载缓慢
2G基站连接时间长
已经缓存的数据仍然需要检验

12. 遇到的问题
2G环境数据下载缓慢
2G基站连接时间长
已经缓存的数据仍然需要检验
大量资源，HTTP请求过多

13. 遇到的问题
2G环境数据下载缓慢
2G基站连接时间长
已经缓存的数据仍然需要检验
大量资源，HTTP请求过多
......

14. 优化！
• 图片Sprites
• 使用CSS3模拟图片
• 使用BASE64
• 使用“#模式”
• 本地存储 & 离线存储

15. 图片Sprites

16. 图片Sprites
• 使用::before和::after伪元素，Sprites中的
图片排版可以更紧 ，图片体积更小，
HTML更简洁

17. 图片Sprites

18. 图片Sprites
li::before{
content:’20’;display:block;
position:absolute;z-index:2;left:2px;top:5px;
width:40px;height:40px;overflow:hidden;
background:url(sprites.png) no-repeat -30px -60px;
}

19. 使用CSS3模拟图片

20. 使用CSS3模拟图片
• 一些格纹背景图片
• 锯齿图
• 进度条
• 投影、光晕
• ……

21. 格纹背景

22. 格纹背景

23. 格纹背景

24. 锯齿

25. 锯齿
先将单元图形分解：

26. 锯齿

27. 锯齿

28. 进度条

29. 进度条

30. 进度条
增加CSS动画

31. 进度条
增加CSS动画

32. 进度条

33. 进度条

34. 进度条

35. 投影、光晕

36. 投影、光晕
.halo{
position:absolute;z-index:-1;left:0;top:-2000px;
width:200px;height:160px;
border-radius:100px;
box-shadow:200px 2250px 50px rgba(255, 100, 0, .3);
}

37. 使用BASE64

38. 使用BASE64
<img src="data:image/gif;base64,R0lGODdhaQBwAPcAAKW1hK21hK21jK29hLW9hK21lK29jLW9jLXG
+hL21lMa9hLW9lMa9jLW9nL3GjLXGlL29lM69hMa9lM69jL3GlL29nL3GnMbGlL29pc7GjM7GlNbGjL3Gpc
bOlMbGpc7GnNbGlL3GtdbGnMbOpcbGrc7GpdbOnN7OlMbOrc7Grc7OpcbGtcbOtd7OnNbOpc7Ord
QQU2EGRlhBpDVDacFAQsKRMRGiUnvTTS4Ll3fqEVwRclNRvwtiBMnbJGS8BcnmTsiufZiCXISpaTAQZ4l
JgrgzuXFAmxNnLFx4XGwVGYhej95BZitkFPjjdhtpnnQgY6hm0sqAEXI7EANouufTxnUSW2agTxM4ZkiJA
YUcPqsDw31pknJTQEAwgjiZ8IvfZIAeHt6oT29dlAvYQgjwGv8TOolg0CA5zVXe9R3jKS3j3giFImmhMibllz
ve2IL2gRAhAFRhsLhYCvOHZrtSCy5x9dALAWCI6RIjfO+IQvE6oNA8qGyzb8xIH/eWP7Sg6DdHeqS/
55+MzANnHHvah/84CbJ/7mDf2iau3/O+VS3zWB38pXk988veuN6I7X+/Ljz7foT/9rVNe+s2nfvat3/
XqH575k+/+aPa/j/3wK9/7lDf+8NUP/PULv/3wL/775e/7+LOf/qp3f/3xz/vj59/+83d/AhiABLh/A7h/5Zd33Hd
+43d96Cd+5gd+Ckh+D8iAEZiAQ6d9F1iBEpiBC9iBQheCz/eBGCiCGjiBdBEQADs=" />
*因编码后文本太长，我手动删除了一部分内容，以上编码无法解码为真实图片

39. 使用BASE64
• BASE64就是将二进制数据重新编码为文
本数据
• BASE64只使用[a-z]、[A-Z]、[0-9]、+、/
共64个字符（另外可能有1到2个 = ）
• BASE64后文件体积至少增大1/3

40. BASE64原理简析

41. BASE64原理简析
w3c

42. BASE64原理简析
w3c
01110111 00110011 01100011

43. BASE64原理简析
w3c
01110111 00110011 01100011
011101 110011 001101 100011

44. BASE64原理简析
w3c
01110111 00110011 01100011
011101 110011 001101 100011
00011101 00110011 00001101 00100011

45. BASE64原理简析
w3c
01110111 00110011 01100011
011101 110011 001101 100011
00011101 00110011 00001101 00100011
29 51 13 35

46. BASE64原理简析
w3c
01110111 00110011 01100011
011101 110011 001101 100011
00011101 00110011 00001101 00100011
29 51 13 35
dzNj

47. 使用BASE64
• 每个HTTP最小传输单位是包，每个包最大约为
1500B，在这个范围内使用BASE64是最好的
• 面端浏览器，支持对图片、字体、音频等文件
BASE64后，嵌入页面中使用（视频暂未测试）
• 移动端浏览器，暂不支持音频的BASE64（字体、
视频暂未测试）
ref: http://oldj.net/article/a-gzipping-exception/

48. #(sharp)模式

49. #(sharp)模式
host
http://www.xiaomi.com:8080/search.php?w=abc#footer
protocol port pathname search hash
hostname
href
*本图参考自《ppk on javascript》一书

50. #(sharp)模式
host
http://www.xiaomi.com:8080/search.php?w=abc#footer
protocol port pathname search hash
hostname
href
*本图参考自《ppk on javascript》一书

51. #(sharp)模式
• url hash不会被发送至服务端
• url hash的变更不会发起网络请求
• google 与 twitter 定义 #! 之后的内容可以
被索引
http://twitter.com/#!/mingelz

52. #(sharp)模式

53. #(sharp)模式
之前的URL形式：
http://appurl.com/appname?locale=zh_CN&appid=123&uid=456&param=789

54. #(sharp)模式
之前的URL形式：
http://appurl.com/appname?locale=zh_CN&appid=123&uid=456&param=789
现在的URL形式：
http://appurl.com/appname?locale=zh_CN#appid=123&uid=456&param=789

55. #(sharp)模式
• HTML5中新增了 onhashchange 事件，用
于监听hash变化
• hash的变化支持前进后退按钮
• 对应的还有CSS伪类 :target

56. 本地存储

57. 本地存储

58. 本地存储
• localStorage 针对域的永久存储方案
• sessionStorage 针对会话的临时存储方案
• 在无域的情况下，仍然可以保证 个不
同页面无法读取对方数据

59. 本地存储
• 均只支持存储字符串
★ JSON.parse( string )
★ JSON.stringify( json )

60. 本地存储

61. 本地存储
• 存储：localStorage.setItem(“key”, “value”)

62. 本地存储
• 存储：localStorage.setItem(“key”, “value”)
• 读取：localStorage.getItem(“key”)

63. 本地存储
• 存储：localStorage.setItem(“key”, “value”)
• 读取：localStorage.getItem(“key”)
• 删除：localStorage.removeItem(“key”)

64. 本地存储
• 存储：localStorage.setItem(“key”, “value”)
• 读取：localStorage.getItem(“key”)
• 删除：localStorage.removeItem(“key”)
• 清空：localStorage.clear()

65. 本地存储
• 存储：localStorage.setItem(“key”, “value”)
• 读取：localStorage.getItem(“key”)
• 删除：localStorage.removeItem(“key”)
• 清空：localStorage.clear()
• 获取存储数据数量：localStorage.length

66. 本地存储
• 存储：localStorage.setItem(“key”, “value”)
• 读取：localStorage.getItem(“key”)
• 删除：localStorage.removeItem(“key”)
• 清空：localStorage.clear()
• 获取存储数据数量：localStorage.length
• 遍历：localStorage.key(i)

67. 本地存储
• 当键值改变或者被删除时，会触发
onstorage 事件

68. 离线存储

69. 离线存储

70. 离线存储
• MIME：text/cache-manifest
• <html manifest=“cache.manifest”>
• CACHE
• NETWORK
• FALLBACK

71. 离线存储
• applicationCache 事件
★ applicationCache.status
★ applicationCache.update()
★ applicationCache.swapCache()

72. 我们仍在探索
• 这只是我们正在使用的一部分优化方案
• 仍有同学在Web前端、服务器端、客户
端对无线性能优化做出各 尝试
• 是的，我们仍在探索

73. 更多交流
• 无限前端QQ群：24495692

74. 谢谢