新一代前端开发与部署方案 - it168topic.it168.com/factory/adc2013/doc/liushuang.pdfmay 25,...
TRANSCRIPT
新一代前端开发与部署方案—— 跨终端的文件加载及缓存
刘爽aliexpress.com 前端开发
about.me/andrelion
http://goo.gl/Hlspr
现状与问题
文件的加载
文件的缓存
跨终端的文件加载及缓存
跨终端的文件加载
“一站到底”的响应式
跨终端的文件加载
“主站” 和 Mobile Site
跨终端的文件加载与缓存
现状与问题
文件的加载
文件的缓存
跨终端的文件加载
按需输出:
HTML
JavaScript
CSS
跨终端的文件加载
按质输出:
图片
按需输出的关键角色:Tengine
跨终端的文件加载
终 端
CDN
T
Web
Static
在服务器端根据UA判断终端类型
问题:HTTP head中的User-Agent信息会被篡改
解决办法:
1)针对所有用户,进行前后端UA比对,最终以前端UA为准。照顾100%的用户,牺牲99%的性能开销
2)仅在当服务器无法识别UA时,再获取前端UA,不能顾及到伪装UA这样的情况。放弃0.5%的用户,只增加0.5%的性能开销
跨终端的文件加载
跨终端的文件加载与缓存
现状与问题
文件的加载
文件的缓存
App Cache
+
Local Storage
跨终端的文件缓存
Demo
Sea.js + 插件
跨终端的文件缓存
更新机制:
配合独角兽,版本更新全自动化
跨终端的文件缓存
使用App Cahce应该注意的两个问题:
更新文件需要二次刷新
缓存文件应尽可能的小
跨终端的文件缓存
降级策略:
App Cache
Local Storage
跨终端的文件缓存
响应式的开发,mobile site的效果
保持现有开发习惯不变
最大化提升客户端性能
缓存自动化更新
有利于SEO
跨终端的文件加载及缓存
优势:
跨终端的文件加载及缓存