新一代前端开发与部署方案—— 跨终端的文件加载及缓存

刘爽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

跨终端的文件加载及缓存

优势：

跨终端的文件加载及缓存