广告前端代码优化.pptx

广告前端代码优化开发无阻滞、无侵扰、无延迟的广告前端代码淘宝 广告技术部 李牧2010年7月30日1 第三方内容对网站速度的影响第三方内容对网站速度的影响/velocity2010/public/schedule/detail/15412Velocity 2010/velocity2010/public/schedule/detail/15412：/velocity2010/public/schedule/detail/15412Google -- Don’t Let Third Parties Slow You Down 网络是缓慢的:平均加载时间:4.9s 页面是复杂的:44个请求来自7个域名,平均大小320KB 很多加载的内容来自第三方第三方内容对网站速度的影响Third-partyPublisher site% ImpactD14第三方内容对页面加载时间的影响:D?9FriendC10FriendC/Food30FacebookC17FacebookC12TribalF53TribalF31Google Adsencetop 100 publishers12.8Google Analyticstop 100 publishers5Google Doubleclicktop 100 publishers11.5P3PC:第三方内容性能分析/p3pc/Performance of 3rd Party Content (P3PC) Project by Steve /p3pc/Souders 广告(ads),小部件(widgets)和 站点分析工具(analytics) 是导致网站变慢的一个主要原因. P3PC 项目专注于第三方内容的性能分析. 目标是找到让第三方内容更快的关键点,促进第三方的改进性能.P3PC:第三方内容性能分析下表是P3PC 给出的第三方内容主要性能指标,从中我们可以清晰看到P3PC主要关注哪些方面.2 广告埋点分析,优化思路和限制广告埋点是怎样结构?如何运行?script alimama_pid=mm1778064_8320227; alimama_sizecode=910; alimama_width=270; alimama_height=390; alimama_type=i; /script script src=/inf.js/script广告位信息客户端信息PV Session信息所属网页信息inf.jsdocument.write:iframe(script) src=/alimama.php?i=mm_1_1_1t=2h=760w=90cf=10.1ctz=8cg=6bd079cde47u=%2Fa.html /iframe(script)125.Http请求附加信息:IP,Cookie,UA(浏览器标识),Refer等34选择这种埋点技术带来的好处业务要点: 位置明确 +接口简单+速度+安全+客户端信息 方便安排广告展现位置:广告出现在埋点所在处.接口代码简单,而且发布代码可以嵌入HTML,也要能被嵌入到JS通过document.write输出.保障广告展现速度:页面解析到埋点处立即触发广告展现保障按效果计费类广告安全:展现在广告域的iframe中收集足够的客户端信息:inf.js保证了动态展现请求中包含足够的信息.竞价类广告的广告请求中必须包含这些信息.所依赖的技术实现要点: 静态script节点 + document.write(iframe)埋点带来的性能问题inf.js阻滞页面加载inf.js文件较大,Gzip后11k,Gzip前38k.一个页面多条广告时,JS重复加载和执行doc.write引入的Iframe节点性能不佳doc.write引入动态script节点依然阻滞页面inf.js文件缓存时间较短(2小时)代码发布在客户的网页上,无法实现永不过期策略.代码出现位置未知,容易出现无法预知的问题,所以缓存时间仅2小时.埋点引入SPOF(单一故障点)带给合作网站稳定方面的侵扰/wiki/SPOFSPOF: A single point of failure (SPOF) is a part of a system which, if it fails, will stop the entire system from working. (一个会被反复提及的概念)阻滞不仅仅是速度问题还涉及客户网站的稳定!客户网站稳定依赖CDN上inf.js的稳定还可能依赖doc.write(script)指向的动态广告服务的稳定而当严重阻滞发生时,问题主要出现在HTTP建立连接,等待响应等阶段.往往和文件大小关系不大了./blog/slo-js-and-how-