Upgrade to Pro — share decks privately, control downloads, hide ads and more …

拍拍首页2012版前端技术应用

Avatar for kaiye kaiye
November 01, 2012

 拍拍首页2012版前端技术应用

拍首改版动机、语义化、无障碍、性能优化、重构的价值

Avatar for kaiye

kaiye

November 01, 2012
Tweet

More Decks by kaiye

Other Decks in Technology

Transcript

  1. GG

  2. 举手乊劳的无障碍 • landmark • tabindex = “-1” • 模块标题与结构一致性 •

    • 《朋友网无障碍优化实践》 • 《Web内容无障碍指南2.0》
  3. 加载优化 • 延迟加载 – 巨无霸、轮播 back_src – 所有商品分类 • 滚屏加载

    $scroll – 类目楼商品 – 活劢、广告 • 按需加载 – 包邮热卖
  4. 减少请求 举例三:内联样式 28K = 1ReqConect = 0.1s (0.1 + 0.1F/28)*ℎ

    + 0.1*304 + 0*ℎ F < 28New/Old,New > F/(F + 28) 拍首,新用户69%,老用户31%,index.css Gzip 14K F < 62K , New > 33% 0.1F / 28 (0.1 + 0.1F/28)*New + (0 + 0)*Old <
  5. 实时更新下的缓存策略 • 静态资源长缓存 • 劢态服务器Gzip • 反向代理缓存 / CMEM Cache

    • CGI请求缓存 var date = new Date(); $loadScript("http://static.paipaiimg.com/js/pp. noticeBoard.js?t="+date.getMonth()+date.getDate ()+date.getHours());
  6. 用工具 • Super App,dovechen • Npp + NppFTP(编辑器+FTP插件) • FTools,joyma

    • FastStone Capture • CssGaga,ytzong • var express = require("express"); express().use(express.static(__dirname)).listen(80);
  7. Q&A