网站前段性能优化-品友互动

第第1212期期《《新一代互联网行为定向广告技术的挑新一代互联网行为定向广告技术的挑

战与优化战与优化--》》--

Copyright@2012 iPinyou All Rights Reserved.

品品友互动友互动专场专场

www.LAMPER.cnQQ群： 83304912

http://weibo.com/lampercn

网站前端性能优化网站前端性能优化


王宁波

互联网广告代码面临的挑战

• 浏览器兼容•性能及体验优化•代码体积


• 代码体积

• 浏览器兼容问题的规避•不同性质页面的优化方式


• 不同性质页面的优化方式•互联网广告加载方式分析

• DTD(doctype) 兼容性问题的规避


• DTD(doctype) • 脚本安全执行

兼容性问题的规避


• DTD(doctype) • 脚本安全执行• GET请求缓存



Window.open



Page1Server

(Local)Page2

• DTD(doctype) • 脚本安全执行• GET请求缓存• 最新浏览器的更新内容



• 最新浏览器的更新内容

• DTD(doctype) • 脚本安全执行• GET请求缓存• 最新浏览器的更新内容



• 最新浏览器的更新内容• CSS伪类以及表达式• 文档流解析规则

文档流规划要点并发线程数脚本阻塞素材延迟加载


素材延迟加载

不同浏览器默认线程数IE6-7: 2线程Safari: 4线程Opera: 4线程


Opera: 4线程IE8-9: 6线程Firefox: 6线程Chrome: 6线程

Async ScriptScript defer

• 按顺序下载• DOMContentLoaded事件之前执行• 老版本的Firefox和Chrome不兼容

ControlJS(http://www.stevesouders.com/controljs/)


ControlJS(http://www.stevesouders.com/controljs/)• DOMContentLoaded之后下载• 下载完之后执行

CommentJS(Google)• 按顺序下载• 按需执行

素材延迟加载ImageLazyLoad

1. <img id='lazy' lasy_src='photo.jpg'/>

2. var lazy = document.getElementById('lazy');


2. var lazy = document.getElementById('lazy');lazy.src=lazy. getAttribute('lazy_src');

基本优化DomContentLoaded

Load


内容优先页面

ControlJS


文字优先ImageLazyLoad


ControlJS

图片主题缩略图预加载


互联网广告加载方式document.write阻塞式加载

• 页面逐步展现• 逻辑简单

媒体：<script src='http://www.xxxx.com/ad.js'>


• 严重影响页面加载• 安全性低

<script src='http://www.xxxx.com/ad.js'></script>Ad.js：document.write('xxx.js');

互联网广告加载方式指定容器Id加载

• 不影响页面加载

• 通用性低

媒体：<div id= 'adv' ></div>


• 通用性低• 安全性低广告代码：

document.getElementById('adv' ).innerHTML=…;

互联网广告加载方式Iframe加载

• 安全性高• 不阻塞• 通用性高

<iframe src='http://otherdomain.com'></iframe>http://otherdomain.com/index.html


• 通用性高• 页面顺序加载

• 影响页面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:


• 通用性高• 不影响页面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……………………


品友互动感谢您的关注，希望继续支持：品友互动感谢您的关注，希望继续支持：官方网站：官方网站：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

网站前段性能优化-品友互动

Technology