Embed Size (px)
Citation preview
Taobao 移动⺴⽹网⻚页的那些优化 曹仁
摘要
• 一些数据 • 请求优化 • 单页化 • 高清适配 • 一点经验
设备系统占⽐比
android:80.7%
ios:19.3%
⺴⽹网络占⽐比
⾸首⻚页加载问题
• 大小：251 kb • 请求数：28
17s
优化后
0
2
4
6
8
10
12
14
16
18
20
2g(前⾸首次) 2g(后⾸首次) 2g(前⼆二次) 2g(后⼆二次)
domload
onload
⼀一次⺴⽹网络请求
优化⺴⽹网络请求
Application cache
缓存基础资源，保持Manifest简洁
localStorage
跨域请求js⽂文件 <script src=“xx.js”></script> define(function(){ //js内容 })
开启CORS
资源⽂文件也是ajax请求 <script>
$.ajax({ “url” : “xx.js” … });
</script>
缓存ajax请求
• 间隔10分钟
Ios系统下的safari可以禁⽤用localstorage Ios5.1+会强制清空localstorage
图⽚片的优化
datauri ⽂文件增⼤大0.1k; 每次都需要解码，消耗cpu;
建议图⽚片⼤大⼩小<4kb，个数<6 img⽅方式的图⽚片不建议使⽤用这种⽅方式
webp的使⽤用 减⼩小 30%
最佳 page 加载实践
⼀一个DNS查询; ⼀一个TCP连接(3次握⼿手); 服务器响应; 内容传输;
<html> <head>
<style> //内联基础和⾸首屏css </style>
</head> <body>
<div>基础结构+⾸首屏内容</div> <script> //loader(); </script>
</body> </html>
web app的引⼊入
Single page application
app 的复⽤用—插件化
app 的规范
app.definePage(options);
name route ⼀一些⽅方法…
app 的组件
Combo
http://a.tbcdn.cn/g/mw/plugins/item/common_min.js http://a.tbcdn.cn/g/mw/plugins/item/detail_min.js
合 并
http://a.tbcdn.cn/g/mw/??./plugins/item/common_min.js,./plugins/item/detail_min.js
宝⻉贝详情
客户端
⼆二维码 拇指⽃斗价
天猫
万⼈人团
⼆二⼿手交易
聚划算
充值
⻔门票
可定制的 App
view1
view2
view3
view4
….. 可重写
View
获取宝⻉贝类型 extra.js Loader
聚划算 ⻔门票 …..
定制
聚 划 算
详 情
下 单
购 物 ⻋车
详 情
旺 旺
最佳 App 的实践
• 可定制的⼦子app • 模板静态化 — cdn • ⼆二次访问0请求 — native
Web App 的解决⽅方案
Total solution！ 服务到位！
h9ps://github.com/mixteam/mixsln
Mix
⺴⽹网⻚页的⾼高清问题
⾼高清屏的普及
视觉： 我要的 1px呢？
PD： 尼玛，图⽚片这么糊，⽤用户怎么下单？
问题的根源
• width=device-width, initial-scale=1.0,maximum-
scale=1.0
• css pixel和设备dpi不统⼀一
其实也可以这样
devicePixelRatio==2 这样设置viewport initial-scale=0.5,maximum-
scale=0.5
• 借助less把css函数化，⽅方便适应各种设备屏 • 字体容器布局图⽚片放⼤大⼀一倍
– font-size使⽤用rem – line-height使⽤用100%
优点 • 实现css的1px • no background-size • native
缺点 • 适配成本⼤大⼀一点，依赖less • 耗流量，占内存
⼀一点⼼心得
调试利器chrome
层层剥离
使⽤用新特性
没有100%兼容
