Enviar búsqueda
Cargar
广告投放代码和创意代码持续优化
•
Descargar como PPTX, PDF
•
2 recomendaciones
•
1,472 vistas
taobao.com
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 53
Descargar ahora
Recomendados
第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Welefen Lee
淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
Berserk js
Berserk js
taobao.com
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
编辑器设计U editor
编辑器设计U editor
taobao.com
Kind editor设计思路
Kind editor设计思路
taobao.com
Recomendados
第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Welefen Lee
淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
Berserk js
Berserk js
taobao.com
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
编辑器设计U editor
编辑器设计U editor
taobao.com
Kind editor设计思路
Kind editor设计思路
taobao.com
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
kumawu
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
luolonghao
美团前端架构简介
美团前端架构简介
pan weizeng
Real World ASP.NET MVC
Real World ASP.NET MVC
jeffz
KISSY Editor Design 2
KISSY Editor Design 2
yiming he
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
非常靠谱 Html 5
非常靠谱 Html 5
Tony Deng
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Mingel Zhang
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Joseph Chiang
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
Will Huang
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
Blazor 與 Radzen 同行
Blazor 與 Radzen 同行
Jimmy Ho
Responsive Web UI Design
Responsive Web UI Design
jay li
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
jay li
Class 20170126
Class 20170126
Ivan Wei
前端跨域总结
前端跨域总结
zhangsuoyong
深入剖析浏览器
深入剖析浏览器
jay li
工作坊總結
工作坊總結
Shengyou Fan
高力:19楼现有前端架构
高力:19楼现有前端架构
taobao.com
李成银:前端编译平台
李成银:前端编译平台
taobao.com
Más contenido relacionado
La actualidad más candente
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
kumawu
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
luolonghao
美团前端架构简介
美团前端架构简介
pan weizeng
Real World ASP.NET MVC
Real World ASP.NET MVC
jeffz
KISSY Editor Design 2
KISSY Editor Design 2
yiming he
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
非常靠谱 Html 5
非常靠谱 Html 5
Tony Deng
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Mingel Zhang
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Joseph Chiang
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
Will Huang
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
Blazor 與 Radzen 同行
Blazor 與 Radzen 同行
Jimmy Ho
Responsive Web UI Design
Responsive Web UI Design
jay li
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
jay li
Class 20170126
Class 20170126
Ivan Wei
前端跨域总结
前端跨域总结
zhangsuoyong
深入剖析浏览器
深入剖析浏览器
jay li
工作坊總結
工作坊總結
Shengyou Fan
La actualidad más candente
(20)
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
美团前端架构简介
美团前端架构简介
Real World ASP.NET MVC
Real World ASP.NET MVC
KISSY Editor Design 2
KISSY Editor Design 2
浅析浏览器解析和渲染
浅析浏览器解析和渲染
非常靠谱 Html 5
非常靠谱 Html 5
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Blazor 與 Radzen 同行
Blazor 與 Radzen 同行
Responsive Web UI Design
Responsive Web UI Design
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
Class 20170126
Class 20170126
前端跨域总结
前端跨域总结
深入剖析浏览器
深入剖析浏览器
工作坊總結
工作坊總結
Destacado
高力:19楼现有前端架构
高力:19楼现有前端架构
taobao.com
李成银:前端编译平台
李成银:前端编译平台
taobao.com
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
taobao.com
Linux 系列分享[1] 概览
Linux 系列分享[1] 概览
rainoxu
Steve Jobs Announces iTown - Douban Special Event, Jan 2012
Steve Jobs Announces iTown - Douban Special Event, Jan 2012
Dexter Yang
浅谈 Javascript 性能优化
浅谈 Javascript 性能优化
rainoxu
Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)
Dexter Yang
通用JS时代的模块机制和编译工具
通用JS时代的模块机制和编译工具
Dexter Yang
Git 零基础介绍
Git 零基础介绍
Ethan Zhang
新版阿尔法城背后的前端MVC实践
新版阿尔法城背后的前端MVC实践
Dexter Yang
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Joseph Chiang
Web前端性能优化 2014
Web前端性能优化 2014
Yubei Li
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程
zhangdaiping
Node way
Node way
Ethan Zhang
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
Tim (文昌)
CardKit & DOMO UI - 移动时代技术与设计的十字路口
CardKit & DOMO UI - 移动时代技术与设计的十字路口
Dexter Yang
LinkedIn For Car Dealers
LinkedIn For Car Dealers
Stephen Murphy
Doctrine Of The Dead
Doctrine Of The Dead
karlynmeyer
Webdistilled API
Webdistilled API
Vieri Emiliani
Destacado
(19)
高力:19楼现有前端架构
高力:19楼现有前端架构
李成银:前端编译平台
李成银:前端编译平台
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
Linux 系列分享[1] 概览
Linux 系列分享[1] 概览
Steve Jobs Announces iTown - Douban Special Event, Jan 2012
Steve Jobs Announces iTown - Douban Special Event, Jan 2012
浅谈 Javascript 性能优化
浅谈 Javascript 性能优化
Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)
通用JS时代的模块机制和编译工具
通用JS时代的模块机制和编译工具
Git 零基础介绍
Git 零基础介绍
新版阿尔法城背后的前端MVC实践
新版阿尔法城背后的前端MVC实践
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Web前端性能优化 2014
Web前端性能优化 2014
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程
Node way
Node way
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
CardKit & DOMO UI - 移动时代技术与设计的十字路口
CardKit & DOMO UI - 移动时代技术与设计的十字路口
LinkedIn For Car Dealers
LinkedIn For Car Dealers
Doctrine Of The Dead
Doctrine Of The Dead
Webdistilled API
Webdistilled API
Similar a 广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
leneli
价值中国网站开发、管理经验探讨、分享、交流
价值中国网站开发、管理经验探讨、分享、交流
hizhubo
Kissy design
Kissy design
yiming he
前端杂谈
前端杂谈
salinet
轻量级Flash服务器开发框架(刘恒)
轻量级Flash服务器开发框架(刘恒)
FLASH开发者交流会
信息系统开发平台OpenExpressApp
信息系统开发平台OpenExpressApp
zhoujg
ASP.Net MVC2 简介
ASP.Net MVC2 简介
Allen Lsy
大規模微服務導入 - #1, 從零開始的系統架構設計概觀
大規模微服務導入 - #1, 從零開始的系統架構設計概觀
Andrew Wu
淘宝网前端应用与发展
淘宝网前端应用与发展
taobao.com
Vcon90 Final
Vcon90 Final
xobo
常用Js框架比较
常用Js框架比较
Adam Lu
开源应用日志收集系统
开源应用日志收集系统
klandor
Top100summit前端的云时代支付宝前端平台架构 王保平
Top100summit前端的云时代支付宝前端平台架构 王保平
drewz lin
客户端存储与计算
客户端存储与计算
xiaotao ning
Top100summit automan x之框架介绍 王超
Top100summit automan x之框架介绍 王超
drewz lin
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Gelis Wu
腾讯大讲堂58 拍拍app platform中间件解决方案简介
腾讯大讲堂58 拍拍app platform中间件解决方案简介
areyouok
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
leneli
淘宝网架构变迁和挑战(Oracle架构师日)
淘宝网架构变迁和挑战(Oracle架构师日)
vanadies10
Jobforcompal
Jobforcompal
Chiwei Tseng
Similar a 广告投放代码和创意代码持续优化
(20)
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
价值中国网站开发、管理经验探讨、分享、交流
价值中国网站开发、管理经验探讨、分享、交流
Kissy design
Kissy design
前端杂谈
前端杂谈
轻量级Flash服务器开发框架(刘恒)
轻量级Flash服务器开发框架(刘恒)
信息系统开发平台OpenExpressApp
信息系统开发平台OpenExpressApp
ASP.Net MVC2 简介
ASP.Net MVC2 简介
大規模微服務導入 - #1, 從零開始的系統架構設計概觀
大規模微服務導入 - #1, 從零開始的系統架構設計概觀
淘宝网前端应用与发展
淘宝网前端应用与发展
Vcon90 Final
Vcon90 Final
常用Js框架比较
常用Js框架比较
开源应用日志收集系统
开源应用日志收集系统
Top100summit前端的云时代支付宝前端平台架构 王保平
Top100summit前端的云时代支付宝前端平台架构 王保平
客户端存储与计算
客户端存储与计算
Top100summit automan x之框架介绍 王超
Top100summit automan x之框架介绍 王超
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
腾讯大讲堂58 拍拍app platform中间件解决方案简介
腾讯大讲堂58 拍拍app platform中间件解决方案简介
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
淘宝网架构变迁和挑战(Oracle架构师日)
淘宝网架构变迁和挑战(Oracle架构师日)
Jobforcompal
Jobforcompal
Más de taobao.com
百度前端性能监控与优化实践
百度前端性能监控与优化实践
taobao.com
Java script physical engine
Java script physical engine
taobao.com
Html5环保小游戏
Html5环保小游戏
taobao.com
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
taobao.com
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
taobao.com
张平:JavaScript引擎实现
张平:JavaScript引擎实现
taobao.com
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
taobao.com
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
taobao.com
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
taobao.com
前端Mvc探讨及实践
前端Mvc探讨及实践
taobao.com
黄希彤:【无障碍访问】Margin
黄希彤:【无障碍访问】Margin
taobao.com
何一鸣:【无障碍访问】Aria in taobao
何一鸣:【无障碍访问】Aria in taobao
taobao.com
西乔:理性的设计
西乔:理性的设计
taobao.com
杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲
杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲
taobao.com
More weapons, more power
More weapons, more power
taobao.com
无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3
taobao.com
【前端Mvc】之豆瓣说实践
【前端Mvc】之豆瓣说实践
taobao.com
【前端Mvc】mvc behind-alphatown
【前端Mvc】mvc behind-alphatown
taobao.com
【前端测试】淘宝前端测试实践
【前端测试】淘宝前端测试实践
taobao.com
开放时代:从Web page到web app
开放时代:从Web page到web app
taobao.com
Más de taobao.com
(20)
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Java script physical engine
Java script physical engine
Html5环保小游戏
Html5环保小游戏
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
张平:JavaScript引擎实现
张平:JavaScript引擎实现
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
前端Mvc探讨及实践
前端Mvc探讨及实践
黄希彤:【无障碍访问】Margin
黄希彤:【无障碍访问】Margin
何一鸣:【无障碍访问】Aria in taobao
何一鸣:【无障碍访问】Aria in taobao
西乔:理性的设计
西乔:理性的设计
杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲
杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲
More weapons, more power
More weapons, more power
无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3
【前端Mvc】之豆瓣说实践
【前端Mvc】之豆瓣说实践
【前端Mvc】mvc behind-alphatown
【前端Mvc】mvc behind-alphatown
【前端测试】淘宝前端测试实践
【前端测试】淘宝前端测试实践
开放时代:从Web page到web app
开放时代:从Web page到web app
广告投放代码和创意代码持续优化
1.
广告投放代码和创意代码持续优化 一淘UX - 李牧 2012-7-7
2.
关于我 李穆 花名: 李牧 邮箱: limu@taobao.com 博客:
http://limu.iteye.com 微博: @lenel 进入阿里系一直在广告线做前端 2007.01 雅虎 广告引擎团队 2007.05 阿里妈妈 广告引擎团队 2008.09 淘宝 广告技术部架构组 2011.06 一淘 UX北京团队 Velocity北京2010的分享:第三方广告代码稳定性和性能优化
3.
淘宝广告前端
4.
淘宝广告 是一个完备的商业生态系统
5.
前端 是整个广告系统中的一环
6.
在一个完备的系统里前端如何自处如何与后台互动 前端改进往往需要后台配合完成 选准改进的时机,切入点
资源是永恒的话题 找到核心问题,集中精力办大事
7.
核心问题在哪里
8.
广告展现流程 <script>
alimama_pid="mm_1_2_3"; alimama_width=270;alimama_height=390; </script> <script src="http://a.alimama.cn/inf.js"></script> inf.js document.write: <iframe(script) src="http://t.alimama.com/a?i=mm_1_2_3 &fv=10.1&rd=xyz&u=a.com%2Fa.html"></iframe(script)>
9.
WPO是什么 渲染流畅
展现迅速
10.
3PO的核心是去除脚本阻滞
脚本阻滞 调用document.write的代码必须以阻滞的形式加载
11.
第三方内容可能影响网站稳定性 多数第三方代码会调用doc.write即刻输出展现,这限制了接口 JS代码位置不能按照一般的优化方法移至页面底部,从而为 系统引入不可控的单一故障点. 单一故障点:Single Point of
Failure(SPoF)是指一个系统的这 样一个部件,如果它失效或停止运转,将会导致整个系统不 能工作。 Steve Souders :Frontend SPoF
12.
3PO@Velocity Social
Button BFFs by Stoyan Stefanov @ Velocity 2012
13.
核心问题 去除投放代码中的脚本阻滞情况 动态引擎输出内容逻辑多且分散,性能不佳
广告创意缺乏统一规划,大量创意性能失控
14.
顺势而为的优化进程
15.
改变的时机 -- 2010年淘宝广告新产品
16.
Tanx广告埋点代码 1.普通埋点 <script src="http://{host}/{path}?i={pid}"></script> 2.无阻埋点 <script> document.write('<a style="display:none
!important" id="t-a-{id}"></a>'); t_h = document.getElementsByTagName('head')[0]; t_s = document.createElement('script'); t_s.async = true; t_s.src = 'http://{host}/{path}?i={pid}'; if(t_h)t_h.insertBefore(t_s,t_h.firstChild); </script>
17.
2010Velocity北京的分享集中在这个改变上 前提:第三方代码 速度<稳定<安全 问题:去除单点故障 方案:无阻加载 defer
domScriptElement iframedJS 验证:兼容性 稳定性 速度 解决附带新问题:广告所在位置,dom安全操作,html插入,css 冲突,埋点代码可读性 http://www.slideshare.net/leneli/ss-6084804
18.
为什么还有阻滞的代码 Tanx首先是一个管理广告位的工具: 用户需要可以通过Tanx广告埋点投放其他广告联盟的广告比 如设置Google AdSense为广告位资源未售出时的抄底
19.
真的无解么? function iframedJS(s){
document.write("<iframe id= 'i'></iframe>"); var d = document.getElementById("i").contentWindow.document; d.write(‘<!doctype html><html><body>代码</body></html>'); window.setTimeout((function(){d.close();}),0); } 没有src的iframe的location和父页面相同,所以不存在跨域问题. iframe内的脚本下载对父页面其他内容而言是无阻滞的.
20.
无奈。。
-- Adsense 合作规范
21.
淘宝首页焦点图广告投放
22.
动态广告引擎输出内容重构 展现相关方法颗粒化(模块化雏形),简化后端引擎的业务逻辑,配合后台 引擎优化(如使用Tengine,Php转C++等),提高整体广告内容输出的性能
23.
迂回解决旧发布代码中的阻滞问题 最小化的inf.js将会成为淘宝广告投放平台的固定API. 有明确的版本号和固定的内容,这样可以发布在合作伙伴的服务 器上,或直接写成网页中的in-line脚本内. 这样在任何位置加入淘宝代码,整体页面的稳定性都不再依赖淘 宝的CDN, 达到了去掉SPoF(单一故障点)的目的,对稳定性要求 高的合作伙伴完全可以这样做.
24.
迂回解决旧发布代码中的阻滞问题 <script> alimama_pid="mm_1_2_3”;
alimama_width=270; alimama_height=390; </script> <script src=“http://anydomain/inf.js”></script>
25.
迂回解决旧发布代码中的阻滞问题 // 使用任何方式从任何位置引入inf.js之后 <script>
alimama_pid="mm_1_2_3”; alimama_width=270; alimama_height=390; window.alimama_show && alimama_show(); </script>
26.
重新思考类库能带给第三方什么 第三方代码的要求: 小.原生.基本上所有类库都用不上...... 类库提供什么: • 对JS对DOM功能的补强(oo,modules,domready,jsonload…) •
对写法的简化和优化(lang,selector…) 补强部分是第三方代码亟需的: OOP 面向对象特性 Modules 统一模块管理
27.
当Loader遇到第三方内容开发 KsLite //声明模块和依赖 function add/define/declare(modname,factory,requires) //使用模块 function
use/provide(modnames,callback)
28.
KsLite只有一种基于包前缀的模块命名规则 包内无限可扩展 => 模块名由包名,路径,文件名.三部分构成. {packagename}
- [ {path_0} - ... - {path_n} - ] {filename} S.Config.lt_pkgs={ inf:"http://a.alimama.cn/kslite/", test:"http://demo.taobao.com/tbad/kslite/" } 模块"inf-a“: http://a.alimama.cn/kslite/inf/a.js 模块"test-t-1“: http://demo.taobao.com/tbad/kslite/test/t/1.js
29.
KsLite对于包的无限扩展支持 可扩展无限包 => package
root router 在一个地址记录所有可用的包以及对应的class root. S.Config.lt_pkgrouter = http://a.alimama.cn/kslite/router.js S.mix(S.Config.lt_pkgs,{ pkg1:"http://a.alimama.cn/pkg1/", pkg2:"http://demo.taobao.com/tbad/pkg2/" }); 当自带S.Config.lt_pkgs没有相关配置时询问pkgrouter.
30.
当Loader遇到第三方内容开发 简化功能,求得Loader体积最小化 模块名至文件路径解析方法固定与Loader位置无关,
支持在一个文件中定义多个模块 Loader可以载入多次,首次载入之后的每次载入仅 做包路径配置扩展 Loader本身支持异步载入,提供onload事件 Loader代码可以永不改变 KsLite@Github: https://github.com/etaoux/kslite 当前版本的SeaJS同样满足这些要求 SeaJS@Github:https://github.com/seajs/seajs
31.
充分利用KsLite的预编译时间窗口 相对于编译型语言,JavaScript缺少了编译这个环节.传统编译器 把代码转换为可执行的机器指令的动作交由浏览器中的JS引擎 在运行时执行.但现代的编译器除了代码翻译还有哪些功能?而 JS引擎能在运行时Cover住这些任务么? 在预编译阶段: 细粒度颗粒化的性能问题 辅助优化打包策略
辅助安排延迟加载和预加载策略 如果给JS代码发布正式使用前增加一个编译步骤,能做些什么.
32.
小结一下
在新产品中解决了广告投放代码阻滞的问题 为老产品解决阻滞问题提供了替换代码及方案 动态展现代码颗粒化改造减少了引擎逻辑,提升后台性能 实现了小型基于异步支持依赖关系的模块化Loader:KsLite
33.
高性能广告创意平台
34.
富交互类广告创意逐步增加带来的问题
35.
关于创意展现的一份古老的设计文档
TB-AD-WidgetPlatform设计 --2008年10月 多数据源数据归一化 数据请求参数无损传递 统一展现定制 多种代码获取方式
36.
选择Widget 生成样式配置面板定义展现样式 选取数据源,接入动静态数据 获取合适的投放代码 读取数据源和样式配置参数 获得数据 输出展现
37.
Widget Platform两次实现之BannerMaker BannerMaker:基于Flash技术的广告牌设计工具
38.
BannerMaker基本实现、性能优化 BannerMaker核心是一个swf文件(相当于浏览器),每个具体 的banner都是一份描述xml文件(相当于HTML)。 我们做了相当多的性能改进,其中成效显著的包括模块化 重构、使用Flash本地存储为swf瘦身、CDN存储调优等
39.
BannerMaker的问题 BM展现核心依然过大,首次加载60k。 Flash平台兼容性变差。
BM依赖统一的Flash展现核心,因为需要更新不能 充分利用缓存,而且更新容易引起线上问题。 使用JavaScript技术实现WidgetPlatform
40.
创意中心
基于JavaScript HTML CSS技术 简单直接的创意编辑、生成、管理平台 灵活的数据源、动态效果、展示方式支持 功能强大而不臃肿的创意产出 优秀的展示性能
41.
一个创意的内涵
42.
创意配置平台
43.
灵活数据接入
44.
效果分析反馈
45.
高性能的创意 “JavaScript’s new life
is as a compilation target.(JavaScript将作为编译目 标语言获得新生)”—JavaScript的死与生 创意中心既是一个创意编译器,集成需要的类产出性能最佳的创意
46.
高性能的创意轻盈稳定如一张静态图片 基础类库: Loader:SeaJS 模板引擎:Mustache 高复用:
一个模块来自创意定制平台定制产生 其余模块皆可重用 性能: 只有一个纯静态http请求(动态数据源的 创意多一个动态数据请求) 整体加载量<10k,小于任一张商品图片 稳定性: 创意不依赖统一展现核心,稳定性如CDN 上一张普通商品图片
47.
创意中心 – 稳定高速发展产品线下的精细运作 一条稳定高速发展的产品线,给我们三年、五年甚至更长时间 将一个小点做扎实做通透。 高速稳定体验优秀的创意给产品线带来更大的回报。(今年上 线的一个结合数据分析,算法,引擎优化的一个动态创意展现 产品,在淘宝站外拿到了1%的点击率。) 创意中心的灵活定制功能已经和淘宝多条广告产品线十余种广 告产品深入结合成为淘宝广告生态的重要一环。
48.
每日数十亿创意PV -- 大淘宝技术体系的直接受益者
49.
回顾
50.
这些年我们做的不多 解决第三方广告代码中的脚本阻滞问题 减化动态引擎中的业务逻辑,配合后台引擎
优化 高性能的创意平台
51.
产品生态当中的前端
前端要有自己的判断力 与后端良性互动共同推进产品发展和性能优化 淘宝广告前端与大淘宝技术在一条路上共同成长 在一个稳定高速发展的系统里,有更多的机会更 多资源做精细化运作
52.
Q&A 提问环节标题
53.
谢谢大家 Thank You
Notas del editor
淘宝直通车、钻石展位+、Tanx、淘宝联盟
冰山一角
千丝万缕的关系资源有限互动着力推动关键的改进时机牵一发动全身今天讲的是完备系统里改进的推进与时机选择
好处接口简单位置明确展现迅速http://strip.taobaocdn.com/tfscom/T1iHzeXe4hXXbMsGbX.html
稳定是核心问题SPOF不能有稳定>速度WPO实质
Velocity 说doc.writehttps://perf-metrics-velocity2012.appspot.com/#1
两个去除SPOF的Chrome插件:https://chrome.google.com/webstore/detail/plikhggfbplemddobondkeogomgoodeghttps://chrome.google.com/webstore/detail/flodkodajoabgkfcgcengpkojhejfkfg
上一次分享
期待google提供解决方案
一个广告请求的性能消耗相当于一张小图片,都没有必要combine多个请求
提高广告投放前端系统的性能。改造前端系统,将原来的Apache+PHP+KFC+C++(ACMP+Addisp)改造成Tengine+C++。http://tengine.taobao.org/前端系统可以承担的QPS从原来的1500提升到9000,比原来提高了6倍。同时,响应时间从原来的16ms降低到10ms以下,降低了50%。
Kslite取名的原因是,用很小的代码把kissy的loader独立出来,且kslite的模块可以被kissy兼容,随着kissy的多次更新,以及kslite的代码固化,被兼容这个目标已经被放弃
创意不能很好的重用,特别是在淘宝广告多个产品线内
09年我们为bm增加了商品模块,widget plateform在bm第一次落地实现
http://peter.michaux.ca/articles/javascript-is-dead-long-live-javascript
能用上这么多不是巧合,因为我们在往一个方向努力SeaJS: http://seajs.orgSeaJS是一个适用于 Web 浏览器端的模块加载器。使用 SeaJS,可以更好地组织 JavaScript 代码。TFS:http://tfs.taobao.org/TFS是淘宝针对海量非结构化数据存储设计的分布式系统,构筑在普通的Linux机器集群上,可为外部提供高可靠和高并发的存储访问。高可扩展、高可用、高性能、面向互联网服务。Tair:http://code.taobao.org/p/tair/wiki/intro/tair是淘宝自己开发的一个分布式 key/value 存储引擎. tair分为持久化和非持久化两种使用方式. 非持久化的 tair可以看成是一个分布式缓存. 持久化的 tair将数据存放于磁盘中. 为了解决磁盘损坏导致数据丢失, tair可以配置数据的备份数目, tair自动将一份数据的不同备份放到不同的主机上, 当有主机发生异常, 无法正常提供服务的时候, 其于的备份会继续提供服务.Tengine:http://tengine.taobao.org/index_cn.htmlTengine是由淘宝网发起的Web服务器项目。它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性。Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫商城等得到了很好的检验。它的最终目标是打造一个高效、稳定、安全、易用的Web平台。Green Compute:http://www.greencompute.org/淘宝针对自身的需求,在Intel和美超微等厂家的支持下定制了一款绿色低功耗的服务器。在该服务器定制完成并且进行一定规模应用的基础上,联合Intel和超微等硬件厂家共同发起开源“绿色计算”项目。该项目的主要目标是推动互联网整体硬件基础设施(包括服务器、网络设备、IDC机房、机架和电源等)的节能环保;
Descargar ahora