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