使用iframe的好处与坏处详细比拼
一、使用iframe的坏处
1.搜索引擎的蜘蛛不会识别在iframe中被调用的图片、文本、url等内容的,因为该内容不属于该页面,只是访问的时候被临时的调用,而且在SEO建议中也有提到:“frame/frameset/iframee标签,会导致百度spider的抓取困难,建议不要使用”这样更能证明其弊!
2.虽然使用iframe标签有它的好处,但是在页面中不是使用越多就越好,因为使用大量的iframe标签会稀释你该页面的关键词密度并对其产生影;
3. iframe本身是一个比较消耗浏览器资源的组件,可以通过调整js代码让iframe等到页面完成后加载,不过还是会出现繁忙指示器,用户体验不太好。iframe也可以用一个比较别扭的方法实行动态异步加载;这就是大部分动态数据采用ajax返回而不是iframe嵌套动态页面,比如jsp等页面;
4. iframe是不友好元素,可以让引擎看到的东西和网民看到的不一样.你自己做个页面实验一下就很快发现结果了.网站被挂马,很容易掉排名.这个大家都应该知道的吧? 因为被挂马很多时候是因为木马使用的是iframe代码插入.
5.下面是iframe影响性能的简介,摘自其他文章
使用 iframe
可以轻易的调用其他网站的页面,但应谨慎使用。它比创建其他 DOM
元素(包括 style
个不同元素的时间对比显示 iframe
是多么耗费性能:
使用 iframe
的页面通常没有这么多 iframe,所以创建 DOM
的时间不用多虑。更值得关心的是 onload
事件和连接池。
iframe
阻塞 onload
window
的 onload
事件尽快执行非常重要。这会让浏览器的载入进度指示器完成,用户依据此判断页面是否已经加载完。而 onload
事件延迟,会让用户感觉页面变慢。
window
的 onload
事件直到它所包含的所有 iframe,以及所有 iframe
中的资源完全加载完成后才会触发。在 Safari
和 Chrome
中,用 javascritpt
动态的给 iframe
的 src 赋值可以避免这种阻塞行为。
一个连接池
对每个 web
服务器来说,浏览器只打开极少的几个连接数。老的浏览器,包括 IE 6/7
个连接。在新的浏览器中,连接数增加鸟。Safari 3+
和 Opera 9+
个,Chrome 1+
、IE 8
及 Firefox 3
个。
人们可能期望每个 iframe
有单独的连接池,但并非如此。在大多数浏览器中,连接被主页面和它的 iframe
所共享,这意味着有可能 iframe
中的资源占用了可用连接而阻塞了主页面的资源加载。如果 iframe
中的内容同等重要,或比主页面更重要,这很好。然而在通常情况下 iframe
中的内容对页面来说不太重要,iframe
占用连接数是不可取的。一个解决方案是在优先级更高的资源下载完成后再动态的给 iframe
的 src
赋值。
个使用了
iframe。它们多数用来加载广告。这不是很合适,但可以理解,这是一个简便的在内容中插入广告的途径。在很多情况下,使用 iframe
是合理的。但要意识到这对你的页面的性能影响。非必要时,请谨慎使用。
二、使用iframe的好处:
1.从其弊中我们可以联想到例外一个html中常用的标签nofollow,既然使用iframe标签可以让蜘蛛对该部分抓取困难,那我们就可以把我们网站的一些需要给用户看的,而不需要给搜索引擎看到的信息使用iframe标签来设计,这样就可以让iframe变废为宝了,而且有代码瘦身的作用,举一个例子,比如一些大型网站首页的备-案信息,荣誉zhengshu,认证等之类的链接,这些我们不需要给搜索引擎看,因为这样稀释了网站首页的权重,我们就可以搭配iframe来使用,而且只需要在首页被使用,其他页面可以不需要这些信息,是不是很完美呢。
2. 可以使用iframe来调用广告,这样会避免seo的拒收录的情况;各大门户网站新浪、腾讯、网页、搜狐等等......都用了iframe标签调用广告
使用iframe的好处与坏处详细比拼的更多相关文章
- html Frame、Iframe、Frameset 的区别 详细出处参考:http://www.jb51.net/web/22785.html
10.4.1 Frameset与Frame的区别首先讲解Frameset与Frame之间的区别. 用来划分框架,每一个框架由标记.必须在之内使用,代码如下: 在上面的例子当中,把页面分为左右两个部分, ...
- java中什么时候该用static修饰方法?有什么好处或者坏处?
当一个方法或者变量需要初始化加载,或者是经常被调用的时候可以加上static.用static修饰的方法可以用类名直接调用,不用的一定要先实例化一个对象然后才可以调用比如 person这个类里面有一个方 ...
- 用webpack构建一个常规项目,好处和坏处分析
最近项目改版,用webpack重新架构. 些许心得我会写几篇记录一下. 好处如下: 1.ES6语法用起来,babel-loader转义,各种新语法用起来. 2.import 语法写起来,webpack ...
- web单页应用是什么?它的好处与坏处有哪些(如何解决这些缺点)
web单页应用是什么? Web单页应用就是指只有一个Web页面作为入口的应用,在浏览器中运行期间不会重新加载页面.也就是说浏览器一开始会加载它必需的thml.css和Js,之后所有的交互操作都在一个页 ...
- 什么是 "use strict"? 使用它的好处和坏处分别是什么?
ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).顾名思义,这种模式使得Javascript在更严格的条件下运行. 设立"严格模式&q ...
- javascript中“use strict”的好处和坏处
1.为什么使用严格模式? 消除javascript语法的一些不合理.不严谨之处,减少一些怪异行为: 消除代码运行的不安全之处,保证代码的运行: 提高编译效率,增加运行效率: 为未来新版本的javasc ...
- 如何实现跨域获取iframe子页面动态的url
有的时候iframe的子页面会动态的切换页面,我们在父页面通过iframe1.contentWindow.window.location只能获取同源的子页面的信息.获取跨域的子页面信息会报错. 这时可 ...
- JS之闭包详细解读
闭包在红宝书中的解释就是:有权访问另一个函数作用域中的变量的函数. 1.变量作用域 全局变量:所有的函数外部定义的变量,它的作用域是整个script. 局部变量:定义在函数体内部的变量,作用域仅限于函 ...
- 前端开发面试知识点大纲--摘自jackyWHJ
前端开发面试知识点大纲:HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应 Ja ...
随机推荐
- 当初希望自己是如何投入这个专业的学习的?曾经做过什么准备,或者立下过什么FLAG吗?
学习好累,打游戏好爽 我不爱学习 认真勤勉投入学习 精心准备,刻苦学习 我的flag 作为大学生,需要了解今后职场社会,对职业方向有了进一步的认识.社会对于人才的要求在某些方面都是不谋而合的,比 ...
- Linux系统提示无法获得锁
这种情况出现主要是因为软件更新或者安装时出现错误. 删除掉两个临时文件即可 sudo rm /var/lib/dpkg/lock sudo rm /var/cache/apt/archive/lock ...
- 拉格朗日乘子(Lagrange multify)和KKT条件
拉格朗日乘子(Lagrange multify)和KKT条件 无约束问题 无约束问题定义如下: f(x)称为目标函数, 其中x是一个向量,它的维度是任意的. 通过求导, 令导数等于零即可: 如下图所示 ...
- MongoDB_走一波
Mongodb 一.mongodb的介绍 mongodb的优势 易扩展:NoSQL数据库种类繁多,但是一个共同的特定就是去掉关系数据库的关系型特性.数据之间无关系,这样非常容易扩展 大数据,高性能:N ...
- l1 和l2范数的真实意义
很长时间一直没有明白真实的含义,十一期间补充一下这方面的知识. l0 范数是 ||x||0 = xi (xi不等于0)代表非0数字的个数,[1,2,3,4,5] 非0个数为5,[0,1,2,0,3] ...
- oracle误删scott文件如何恢复
找到oracle的路径,一般是 某盘:\app\用户名\product\11.2.0\dbhome_1\RDBMS\ADMIN\scott.sql 这样找到scott.sql ,其中有恢复所有内容的S ...
- Python 中 JSON和dict的转换,json的使用
一. 基础语法 在Python 的 json库中,共有四个方法.分别是: json.load() # 从文件中加载 json.loads() # 数据中加载 json.dump() # 转存到文件 j ...
- 一个理解基本RCNN的简单例子
对于一个最简单的RNN网络https://github.com/Teaonly/beginlearning/ """Minimal character-level Van ...
- 让几个横向排列的浮动子div居中显示的方法
div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...
- Spring Boot原理
Spring 钩子之BeanFactoryPostProcessor和BeanPostProcessor的源码学习 https://www.jianshu.com/p/a90a3e617ba6 spr ...