iframe的WPO优化技巧
来源:互联网 发布:练武术的软件 编辑:程序博客网 时间:2024/06/09 17:02
1. 普通的Iframe
代码:
<iframe src="http://tanyanyun-163-com.iteye.com/blog/”/path/to/file”" rel="nofflow"/>
- iframe 在主页面之前加载
- iframe 要等所有内容下载完,才开始启动
- 主页面在iframe全部完成后,才开始加载。阻塞!阻塞!!
- 当iframe加载的时候,页面一直显示繁忙指示器。
2. iframe在主页面之后加载
代码:
<script>
//doesn’t block the load event
function createIframe(){
var i = document.createElement(“iframe”);
i.src="http://tanyanyun-163-com.iteye.com/blog/“path/to/file”;
i.scrolling = “auto”;
i.frameborder = “0″;
i.width = “200px”;
i.height = “100px”;
document.getElementById(“div-that-holds-the-iframe”).appendChild(i);
};
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener(“load”, createIframe, false);
else if (window.attachEvent)
window.attachEvent(“onload”, createIframe);
else window.onload = createIframe;
</script>
- iframe 在主页面完成加载后,才开始加载
- 主页面加载的时候,没有被iframe干扰
- 繁忙指示器依然存在。这是不好的地方。
3. 使用iframe setTimeout() 方法
因为对IE8无效,实际应用意义不大,在此略去
4. 采用动态异步调用iframe
代码:
<script>
(function(d){
var iframe = d.body.appendChild(d.createElement(‘iframe’)),
doc = iframe.contentWindow.document;
// style the iframe with some CSS
iframe.style.cssText = “position:absolute;width:200px;height:100px;left:0px;”;
doc.open().write(‘<body onload=”‘ +
‘var d = document;d.getElementsByTagName(\’head\’)[0].’ +
‘appendChild(d.createElement(\’script\’)).src’ +
‘=\’\/path\/to\/file\’”>’);
doc.close(); //iframe onload event happens
})(document);
</script>
效果:
- iframe 在主页面之前开始加载
- iframe 在iframe的内容下载完就开始启动
- 主页面加载不受iframe影响
- 当iframe加载时,繁忙指示器消失了!
结论:
1. 因为iframe耗用比较多资源,做优化处理的时候又比较麻烦,尽量别采用。
2. 如果一定要用,推荐采用动态异步调用。无论是主页面加载时间,还是繁忙指示器的用户体验都有较好提升。
以上内容,部分翻译自:Aaron Peters的博客
作者: 谭砚耘@WPO及网站可用性-科研笔记
版权属于: 谭砚耘 (TOTHETOP至尚国际 )
版权所有。转载时必须以链接形式注明作者和原始出处
http://www.wpowhy.com/howto-wpo-for-iframe-460/
- iframe的WPO优化技巧
- 关于前端WPO(网站性能优化)
- iframe的使用技巧
- 网站--wpo
- IFRAME标签的作用及使用技巧
- ASP.NET关于iframe的两个技巧
- 优化的NSLog技巧
- sql优化的技巧
- 过时的优化技巧
- 优化的NSLog技巧
- 优化的NSLog技巧
- UITableView的优化技巧
- 优化SQL的技巧
- UITableView的优化技巧
- UITableView的优化技巧
- ListView的优化技巧
- ListView的优化技巧
- 前端优化的技巧
- iPhone开发者必读:苹果iOS 6固件重点
- 网页应用程序hta-有意思
- Ubuntu 12.04 64位编译android 4.1.1_r3
- 应用python的unit测试工具PyUnit
- JSONObject.fromObject(map)(JSON与JAVA数据的转换)
- iframe的WPO优化技巧
- Android的4.0的camera的调试解析
- Socket开跨平台开发
- Linux中硬链接和软链接的区别和联系
- js获取汉字助记码
- ExtJs-01-简单的Panel
- 2012年终盘点:15家获得巨额融资的科技公司
- ogre的编译及安装
- weblogic查看java进程并查掉进程操作