• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 为什么要少用Iframe的几个原因分析

为什么要少用Iframe的几个原因分析

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含Iframe等相关知识,佚名 希望在学习及工作中可以帮助到您
下图显示创建 100 个不同的元素中iframe到底有多耗费时间。

创建100个 elements 的耗时

 

使用 iframe 的页面一般不会包含太多 iframe,所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题:onload 事件以及连接池(connection pool)。

 Iframes 阻塞页面加载

及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止,告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后,它给用户的感觉就是这个网页非常慢。

window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里,通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况。

 唯一的连接池

浏览器只能开少量的连接到web服务器。比较老的浏览器,包含 Internet Explorer 6 & 7 和 Firefox 2,只能对一个域名(hostname)同时打开两个连接。这个数量的限制在新版本的浏览器中有所提高。Safari 3+ 和 Opera 9+ 可同时对一个域名打开 4 个连接,Chrome 1+, IE 8 以及 Firefox 3 可以同时打开 6 个。你可以通过这篇文章查看具体的数据表:Roundup on Parallel Connections.

有人可能希望 iframe 会有自己独立的连接池,但不是这样的。绝大部分浏览器,主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接,从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要,这当然是很好的。但通常情况下,iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。一种解决办法是,在主页面上重要的元素加载完毕后,再动态设置 iframe 的 SRC。

美国前 10 大网站都使用了 iframe。大部分情况下,他们用它来加载广告。这是可以理解的,也是一种符合逻辑的解决方案,用一种简单的办法来加载广告服务。但请记住,iframe 会给你的页面性能带来冲击。只要可能,不要使用 iframe。当确实需要时,谨慎的使用他们。 

来源:英文原文   中文编译: IT瘾   

您可能想查找下面的文章:

相关文章

  • 2017-08-06使用Photoshop 制作网页线框图简单实用
  • 2018-08-23热爱写写画画的你,可以用子弹日记激发全部创意
  • 2017-08-0630款免费高质量的英文丝带字体
  • 2018-08-23用PS这个黑科技,轻松搞定视觉设计的团队协作!
  • 2018-08-23电商大招!三步教你搞定情人节活动专题页设计及玩法!
  • 2018-08-23超详细!盘点「注册/登录」产品设计路上爬过的坑
  • 2018-08-23设计师该如何维权?看这篇超详细的流程总结!
  • 2017-08-06base target=""规定基本链接的目标打开框架
  • 2018-08-23字体新玩法!这些流行的缤纷多彩字体正在走向标准化
  • 2018-08-23规范、方法、一致性,真有那么重要吗?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • struts2跳转后css和js失效的问题解决思路及实现步骤
    • 想让你的网页设计脱颖而出,可以从这5个维度入手
    • html5中几个不容错过的api或者tips小结
    • 对于大流量网站的解决方案
    • 掌握这5个方面,让你具备真正的交互设计思维!
    • 简谈精益用研之道:一次完整的调研必经的三个阶段
    • 交互基础小课堂!移动端「搜索功能」设计超全面总结!
    • 这3个趋势,在接下来的9月会影响更多设计作品
    • 语音交互设计中,如何创建角色画像?
    • 天猫App 首页迎来史上最大改版,背后的设计过程是这样的!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有