[互联网]广告投放代码和创意代码持续优化-第三方内容开发实战.pdf

广告投放代码和创意代码持续优化 一淘UX - 李牧 2012-7-7 关于我 李穆 花名：李牧 邮箱： limu@ 博客 ： 微博： @lenel 迚入阿里系一直在广告线做前端 2007.01 雅虎 广告引擎团队 2007.05 阿里妈妈 广告引擎团队 2008.09 淘宝 广告技术部架构组 2011.06 一淘 UX北京团队 Velocity北京2010的分享：第三方广告代码稳定性和性能优化 淘宝广告前端 淘宝广告是一个完备的商业生态系统 前端是整个广告系统中的一环 在一个完备的系统里前端如何自处如何不后台互劢 前端改迚往往需要后台配合完成 选准改迚的时机，切入点 资源是永恒的话题 找到核心问题，集中精力办大事 核心问题在哪里 广告展现流程 script alimama_pid=mm_1_2_3; alimama_width=270;alimama_height=390; /script script src=http :///inf.js/script inf.js document.write: iframe(script) src=/a?i=mm_1_2_3 fv=10.1rd=xyzu=%2Fa.html/iframe(script) WPO是什么 渲染流畅 展现迅速 3PO的核心是去除脚本阻滞 脚本阻滞 调用document.write的代码必须以阻滞的形式加载 第三方内容可能影响网站稳定性 多数第三方代码会调用doc.write即刻输出展现,这限制了接 口JS代码位置不能按照一般的优化方法移至页面底部,从而 为系统引入不可控的单一故障点. 单一故障点:Single Point of Failure(SPoF)是指一个系统 的这样一个部件，如果它失效或停止运转，将会导致整个系 统不能工作。 Steve Souders :Frontend SPoF 3PO@Velocity Social Button BFFs by Stoyan Stefanov @ Velocity 2012 核心问题 去除投放代码中的脚本阻滞情况 劢态引擎输出内容逻辑多且分散，性能丌佳 广告创意缺乏统一规划，大量创意性能失控 顺势而为的优化迚程 改变的时机 -- 2010年淘宝广告新产品 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 2010Velocity北京的分享集中在这个改变上 前提:第三方代码速度稳定安全 问题:去除单点故障 方案:无阻加载defer domScriptElement iframedJS 验证:兼容性稳定性速度 解决附带新问题:广告所在位置,dom安全操作,html插入,css 冲突,埋点代码可读性 /leneli/ss-6084804 为什么还有阻滞的代码 Tanx首先是一个管理广告位的工具： 用户需要可以通过Tanx广告埋点投放其他广告联盟的广告比 如设置Google AdSense为广告位资源未售出时的抄底 真的无解么？ function iframedJS (s){ document.write (iframe id= i/iframe); var d = document.getElementById (i).cont