iframes

iframes提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级。

使用 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。当确实需要时,谨慎的使用他们。

时间: 2024-10-22 11:47:31

iframes的相关文章

每日阅读记录 - 20170913

A. Responsive_Navigation_Patterns(响应式导航模式) https://developer.mozilla.org/zh-CN/Apps/Design/Responsive_Navigation_Patterns Top toggle menu Pros(优势): one button in header maximizes space for content on a small screen important items stay visiblein most

搜索引擎讨厌的一些SEO操作

SEO顾名思义就是要按搜索引擎的喜好来做网站,那些搜索引擎不喜欢的我们可千万别作,今天就为大家总结一下哪些操作方法是它讨厌的,我们了解了之后就可以更好的避开这些不利于网站优化的因素. 第一.频繁改动标题.云鼎娱乐城 通常情况下,如果网站权重不高,建议不要随便修改标题,因为你改一次标题,它就会对你再一次进行重新的认识你一次,增加它的判断成本.那么什么情况属于权重不高,比如,快照慢,收录少,收录慢,PR低.如果改了标题,几天快照更新不了,严重者就会导致快照片倒退,关键词排名下降.如果你的百度快照每天

Web前端之iframe详解

iframe基本内涵 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_iframe_sandbox.htm"></iframe> 但是,有追求的我们,并不是想要这么low的iframe. 我们来看看在iframe中还可以设置些什么属性 iframe常用属性: 1.frameborder:是否显示边框,1(yes),0(no) 2.height:框架作为一个普通元素的高度,建议在使用css设置.

js-权威指南学习笔记14

第十四章 Window对象 1.Document对象有一个URL属性,是文档首次载入后保存该文档的URL的静态字符串.如果定位到文档中的片段标识符,Location对象会做对应的更新,而document.URL属性却不会改变. 2.window对象的location属性引用的是Location对象,它表示该窗口中当前显示的文档的URL. 3.纯粹的片段标识符是相对URL的一种类型,它不会让浏览器载入新文档,但只会使它滚动到文档的某个位置.如果文档中没有元素的ID是top,他会是浏览器跳到文档开始

15 个最佳 jQuery 翻书效果插件

本文为你带来15个非常实用的.实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验. 1.  BookBlock BookBlock可以将任何内容(如图像.文本)创建为翻页效果,带有一个翻页导航,可用于创建小册子等组件. 阅读更多 / 演示 2.  imBookFlip 该插件允许你在iframe或页面中加载电子书,可以设置为在页面加载时开始翻书效果,也可以设置为手动点击时开始.还可以通过Sound Manager添加声音效果. 阅读更多 / 演示 3.  jF

AJAX简介

基本介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML). 国内翻译常为“阿贾克斯”和阿贾克斯足球队同音.Web应用的交互如Flickr,Backpack和Google在这方面已经有质的飞跃.这个术语源自描述从基于Web的应用到基于数据的应用的转换.在基于数据的应用中,用户需求的数据如联系人列表,可以从独立于实际网页的服务端取得并且可以被动态地写入网页中,给缓慢的Web应用体验着色使之像桌面应用一样. Ajax的核心是Java

php 安全过滤函数代码

php 安全过滤函数代码,防止用户恶意输入内容. //安全过滤输入[jb] function check_str($string, $isurl = false) { $string = preg_replace('/[\\x00-\\x08\\x0B\\x0C\\x0E-\\x1F]/','',$string); $string = str_replace(array("\0","%00","\r"),'',$string); empty($i

The OAuth 2.0 Authorization Framework-摘自https://tools.ietf.org/html/rfc6749

Internet Engineering Task Force (IETF) D. Hardt, Ed. Request for Comments: 6749 Microsoft Obsoletes: 5849 October 2012 Category: Standards Track ISSN: 2070-1721 The OAuth 2.0 Authorization Framework Abstract The OAuth 2.0 authorization framework enab

iOS开发——图形编程OC篇&amp;OpenGL ES2.0编程步骤

OpenGL ES2.0编程步骤 OpenGL ES (OpenGL for Embedded Systems) 是 OpenGL 三维图形 API 的子集,针对手机.PDA和游戏主机等嵌入式设备而设计.该API由Khronos集团定义推广,Khronos是一个图形软硬件行业协会,该协会主要关注图形和多媒体方面的开放标准. 1. 保存全局变量的数据结构 以下例子程序均基于Linux平台. 1 typedef struct _escontext 2 { 3 void* userData; // P