#LAMP人#品友互动-网站前端性能优化

第第1212期期《《新一代互联网行为定向广告技术的挑新一代互联网行为定向广告技术的挑战与优化战与优化--》》--Copyright@2012iPinyouAllRightsReserved.品品友互动友互动专场专场群：83304912网站前端性能优化网站前端性能优化Copyright@2012iPinyouAllRightsReserved.王宁波互联网广告代码面临的挑战•浏览器兼容•性能及体验优化•代码体积Copyright@2012iPinyouAllRightsReserved.•代码体积•浏览器兼容问题的规避•不同性质页面的优化方式Copyright@2012iPinyouAllRightsReserved.•不同性质页面的优化方式•互联网广告加载方式分析•浏览器兼容问题的规避•不同性质页面的优化方式Copyright@2012iPinyouAllRightsReserved.•不同性质页面的优化方式•互联网广告加载方式分析•DTD(doctype)兼容性问题的规避Copyright@2012iPinyouAllRightsReserved.•DTD(doctype)兼容性问题的规避Copyright@2012iPinyouAllRightsReserved.•DTD(doctype)•脚本安全执行兼容性问题的规避Copyright@2012iPinyouAllRightsReserved.•DTD(doctype)•脚本安全执行•GET请求缓存兼容性问题的规避[e-mail]兼容性问题的规避[e-mail]1Server(Local)Page2•DTD(doctype)•脚本安全执行•GET请求缓存•最新浏览器的更新内容兼容性问题的规避Copyright@2012iPinyouAllRightsReserved.•最新浏览器的更新内容•DTD(doctype)•脚本安全执行•GET请求缓存•最新浏览器的更新内容兼容性问题的规避Copyright@2012iPinyouAllRightsReserved.•最新浏览器的更新内容•CSS伪类以及表达式•文档流解析规则•浏览器兼容问题的规避•不同性质页面的优化方式Copyright@2012iPinyouAllRightsReserved.•不同性质页面的优化方式•互联网广告加载方式分析文档流规划要点并发线程数脚本阻塞素材延迟加载Copyright@2012iPinyouAllRightsReserved.素材延迟加载不同浏览器默认线程数IE6-7:2线程Safari:4线程Opera:4线程[e-mail]:4线程IE8-9:6线程Firefox:6线程Chrome:6线程AsyncScriptScriptdefer•按顺序下载•DOMContentLoaded事件之前执行•老版本的Firefox和Chrome不兼容ControlJS()[e-mail]()•DOMContentLoaded之后下载•下载完之后执行CommentJS(Google)•按顺序下载•按需执行素材延迟加载ImageLazyLoad1.imgid='lazy'lasy_src='photo.jpg'/2.varlazy=document.getElementById('lazy');[e-mail]=document.getElementById('lazy');lazy.src=lazy.getAttribute('lazy_src');Copyright@2012iPinyouAllRightsReserved.基本优化DomContentLoadedLoadCopyright@2012iPinyouAllRightsReserved.内容优先页面ControlJSCopyright@2012iPinyouAllRightsReserved.文字优先[e-mail]图片主题缩略图预加载Copyright@2012iPinyouAllRightsReserved.•浏览器兼容问题的规避•不同性质页面的优化方式Copyright@2012iPinyouAllRightsReserved.•不同性质页面的优化方式•互联网广告加载方式分析互联网广告加载方式document.write阻塞式加载•页面逐步展现•逻辑简单媒体：scriptsrc='@2012iPinyouAllRightsReserved.•严重影响页面加载•安全性低scriptsrc='：document.write('xxx.js');互联网广告加载方式指定容器Id加载•不影响页面加载•通用性低媒体：divid='adv'/divCopyright@2012iPinyouAllRightsReserved.•通用性低•安全性低广告代码：document.getElementById('adv').innerHTML=…;互联网广告加载方式Iframe加载•安全性高•不阻塞•通用性高iframesrc='://otherdomain.com/index.htmlCopyright@2012iPinyouAllRightsReserved.•通用性高•页面顺序加载•影响页面onload事件='互联网广告加载方式异步Iframe加载•安全性高•不阻塞•通用性高iframesrc=‘’/iframe@2012iPinyouAllRightsReserved.•通用性高•不影响页面onload•广告加载延迟严重bodyonload=‘loadScript’scriptfunctionloadScript(){//loadadjavascriptcode}/script/body我们的技术：我们的技术：海量数据、云计算、分布式、数据挖掘、机器学习、海量数据、云计算、分布式、数据挖掘、机器学习、精准定向、用户行为分析精准定向、用户行为分析海量数据、云计算、分布式、数据挖掘、精准定向、海量数据、云计算、分布式、数据挖掘、精准定向、数据分析、数据分析、HadoopHadoop，，RedisRedis，，HbaseHbase，，HiveHive，，PigPig，，OozieOozie，，GangliaGanglia，，FlumeFlume，，LuceneLucene，，LIBSVMLIBSVM，，MahoutMahout，，ZookeeperZookeeper……………………Copyright@2012iPinyouAllRightsReserved.品友互动感谢您的关注，希望继续支持：品友互动感谢您的关注，希望继续支持：官方网站：官方网站：官方微博：官方微博：://weibo.com/pinyouhudong招聘微博：招聘微博：://weibo.com/pinyouhudonghr尽管每一个词都名声显赫，热的发紫，但这的确就是尽管每一个词都名声显赫，热的发紫，但这的确就是我们每天正在做的和使用着的；我们每天正在做的和使用着的；我知道，你那一本正经的外表下面那颗躁动的心已经我知道，你那一本正经的外表下面那颗躁动的心已经蠢蠢欲动了蠢蠢欲动了!!!!!!!!来吧！这儿的舞台无比广阔，这儿的技术绝对前沿，来吧！这儿的舞台无比广阔，这儿的技术绝对前沿，这儿的事情会让你激动得颤抖这儿的事情会让你激动得颤抖!!!!!!!!加入品友：加入品友：[e-mail]@ipinyou.com我们的产品：我们的产品：OptimusOptimusFolo8Folo8Copyright@2012iPinyouAllRightsReserved.