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. webservice部署到服务器报错

    System.Net.WebException: 基础连接已经关闭: 发送时发生错误. ---> System.IO.IOException: 从传输流收到意外的 EOF 或 0 个字节. 在 ...

  2. H5音频处理的一些小知识

      前  言 LiuDaP 十一过后,小编要做一个关于音乐播放器的项目,要用到大量H5音频处理的内容,于是在十月一日国庆黄金周闲暇之际,自己学习了一下H5音频的相关内容.虽然自学的没有那么深入,但是对 ...

  3. Ubuntu Docker 版本的更新与安装

    突然发现自己的docker 版本特别的低,目前是1.9.1 属于古董级别的了,想更新一下最新版本,这样最新的一下命令就可以被支持.研究了半天都没有更新成功,更新后的版本始终都是1.9.1 :蒙圈了,找 ...

  4. python的urlparse

    urlparse主要是URL的分解和拼接,分析出URL中的各项参数,可以被其他的URL使用. 主要的函数有: 1.urlparse 将URL分解为6个片段,返回一个元组,包括协议.基地址.相对地址等等 ...

  5. 手动打包MVC项目成Web Deploy包,发布至服务器

    ①确保服务器上安装了Web Deploy,可以使用微软Web Paltform Installer安装.https://www.microsoft.com/web/downloads/platform ...

  6. Echarts数据可视化series-radar雷达图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  7. 张高兴的 Xamarin.Android 学习笔记:(一)环境配置

    最近在自学 Xamarin 和 Android ,同时发现国内在做 Xamarin 的不多.我在自学中间遇到了很多问题,而且百度到的很多教程也有些过时,现在打算写点东西稍微总结下,顺便帮后人指指路了. ...

  8. Gradle sync failed 异常

    今天开发过程中出现如下异常 Gradle sync failed: Connection timed out: connect. If you are behind an HTTP proxy, pl ...

  9. PLSQL Developer oracle导入导出表及数据

    1.进入PLSQL Developer 2.创建新用户(如需要新表空间则需先创建新表空间再创建用户) 3.打开菜单Tools->Export User Objects 导出表及视图等创建SQL ...

  10. 容器与Docker简介(一)——微软微服务电子书翻译系列

    前不久参加了深圳的Azure开源者峰会,会上张善友张老师推荐了微软的一个架构网站:.NET Application Architecture 这几天正好工作比较闲,看了下里面关于微服务架构的介绍,非常 ...