1、DOM开销高

使用iframe的开销是很高的,在主页面中加载同等数量的div和iframe(标签内容都是空),iframe的耗时会比div的高1~2个数量级。

2、阻塞onload事件

在典型方式下(<iframe src=url></iframe>)使用iframe时,会阻塞onload事件。

解决方法:1、使用js动态设置iframe的src属性。只对chrome、Safari有效

2、在onload事件后,设置iframe的src

一般情况下,iframe和主页面中的资源并行下载(如使用iframe进行脚本的延迟加载),但是有些情况下,主页面会阻塞iframe的加载。

以下情况:1、外部脚本在iframe之前,脚本会阻塞iframe

2、IE和FF中,主页面中的样式表会阻塞iframe的下载。

3、共享连接数的限制

在每个主机名(不是解析后的ip地址),可理解为域名,浏览器对同服务器的连接数做了限制。在主页面和iframe之间,二者是共享对每个服务器的连接数的,

iframe并不会增加并行下载数量。

注:跨标签页和窗口之间也会共享连接数,造成对连接请求的争夺,导致加载速度变慢。

减少iframe的使用,可用div替代,设置div的innerHTML属性,引入外部html

性能优化之-------少用iframe的更多相关文章

  1. web前端性能优化

    性能优化对于用户体验无疑是非常重要的,下面介绍一些性能优化的方法. 1.减少HTTP请求 http请求越多,那么消耗的时间越多,如果在加上网络很糟糕,那么问题就更多了.且如果网页中的图片.css文件. ...

  2. HTML5性能优化

    HTML5性能优化 在看完这两章内容之后,我意犹未尽,于是乎从网上搜索关键字“Java Web高性能”,在IBM社区找到两篇不错的文章,而让人更意外的是我发现那两篇文章的内容跟<高性能HTML5 ...

  3. 【读书笔记】读《高性能网站建设指南》及《高性能网站建设进阶指南:Web开发者性能优化最佳实践》

    这两本书就一块儿搞了,大多数已经理解,简单做个标记.主要对自己不太了解的地方,做一些记录.   一.读<高性能网站建设指南> 0> 黄金性能法则:只有10%~20%的最终用户响应时间 ...

  4. jQuery性能优化指南(转载)

    现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, ...

  5. 网站性能优化(Yahoo 35条)

    Yahoo 网站性能优化 35条 一.内容部分 尽量减少 HTTP请求 减少 DNS查找 避免跳转 缓存 Ajxa 推迟加载 提前加载 减少 DOM元素数量 用域名划分页面内容 使 frame数量最少 ...

  6. [转] 《高性能HTML5》读后整理的Web性能优化内容

    读后感 先说说<高性能HTML5>这本书的读后感吧,个人觉得这本书前两章跟书的标题完全搭不上关系,或者说只能算是讲解了“高性能”这三个字,HTML5完全不见踪影.个人觉得作者应该首先把HT ...

  7. Yahoo团队经验:网站性能优化的34条黄金法则

    Yahoo团队总结的关于网站性能优化的经验,非常有参考价值.英文原文:http://developer.yahoo.com/performance/rules.html 1.尽量减少HTTP请求次数 ...

  8. css,html性能优化

    css性能优化 CSS是负责布局和渲染的重要角色,漂亮的页面当然能够吸引用户.本文是自己在开发过程中总结的关于CSS与性能的关系,可能有不对之处,希望能够指出. ? 1.所有的样式尽量放在css文件中 ...

  9. Yahoo网站性能优化的34条军规

    1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数,这是提高网页速 ...

随机推荐

  1. 前后端分离,接口API,契约

    前后端分离了,然后呢? http://icodeit.org/2015/06/whats-next-after-separate-frontend-and-backend/ Swagger - 前后端 ...

  2. Go语言下载、安装、配置、使用

    Go语言 Go语言(Golang,The Go Programming Language),是谷歌2009发布的第二款开源编程语言.2009年7月份,谷歌曾发布了Simple语言,它是用来开发Andr ...

  3. R语言画曲线图

    本文以1950年到2010年期间我国的火灾统计数据为例,数据如下所示: (0)加载数据 data<-read.csv("E:\\MyDocument\\p\\Data\\1950~20 ...

  4. JQ判断浏览器以及版本

    JQuery 使用jQuery.browser 来判断浏览器,返回值可以为: safari(safari) opera(Opera) msie(IE) mozilla(Firefox). if($.b ...

  5. sqlserver 2005连接超时采用bat命令解决

    将以下内容保存为 openSql.bat 双击运行即可 @echo ========= SQL Server Ports =================== @echo Enabling SQLS ...

  6. PHP windowns安装扩展包

    1.  php_msgpack.dll php.ini 添加  extension=php_msgpack.dll 下载dll: http://pecl.php.net/package/msgpack ...

  7. 一份传世典文:十年编程(Teach Yourself Programming in Ten Years)

    原文:Teach Yourself Programming in Ten Years作者:郭晓刚翻译:郭晓刚(foosleeper@163.net)最后修订日期:2004-3-192005-01-12 ...

  8. 用Python来实现列举某个文件夹内所有的文件列表

    用Python来实现列举某个文件夹内所有的文件列表.吾八哥我动手写代码之前分析了下,遍历一个文件夹,肯定是需要用到os模块了,查阅模块帮助信息,可知os.listdir()方法可以列举某个文件夹内的所 ...

  9. Emgu.CV(三)

    像素交换 private void btn_Exchange_Click(object sender, EventArgs e) { if (imageBox1.Image != null) { va ...

  10. WiFi万能钥匙4.1.32接口

    做Key4WiFi时提取的接口 部分代码来自于 http://zke1ev3n.me/2016/04/06/WiFi%E4%B8%87%E8%83%BD%E9%92%A5%E5%8C%99%E6%8E ...