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. OpenJudge_1321:棋盘问题

    题目描述 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子的所有可行的摆 ...

  2. Conscription poj3723(最大生成树)

    Conscription Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6870   Accepted: 2361 Desc ...

  3. 在CentOS6上配置MHA过程全记录

    在CentOS6上配置MHA过程全记录 MHA(Master High Availability)是一款开源的MariaDB or MySQL高可用程序,为MariaDB or MySQL主从复制架构 ...

  4. 在Ubuntu上安装Docker

    原文链接:https://docs.docker.com/engine/installation/linux/ubuntu/   这里记录的是社区版安装方式,由于平时只做开发使用所以不需要安装企业版, ...

  5. Android 双击退出程序实现(有侧滑界面)

    大家好,今天带来双击退出程序实现方法,我知道,网上也是有许多关于双击退出程序实现的方法,所以,听见当然是给大家带来不一样的双击退出的实现方法. 首先带来的便是关于onKeyDown和onKeyPres ...

  6. 聊聊VUE中的nextTick

    在谈nextTick之前,先要说明一件事,可能在我们平时使用vue时并没有关注到,事实上,vue执行的DOM更新是异步的. 举个栗子: <template> <div class=& ...

  7. 【机器学习实战】第7章 集成方法 ensemble method

    第7章 集成方法 ensemble method 集成方法: ensemble method(元算法: meta algorithm) 概述 概念:是对其他算法进行组合的一种形式. 通俗来说: 当做重 ...

  8. mysql分表场景分析与简单分表操作

    为什么要分表 首先要知道什么情况下,才需要分表个人觉得单表记录条数达到百万到千万级别时就要使用分表了,分表的目的就在于此,减小数据库的负担,缩短查询时间. 表分割有两种方式: 1水平分割:根据一列或多 ...

  9. Java 线程基本知识

    线程 线程和进程 进程 : 进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一定独立功能. 线程 : 线程是进程中的一个执行单元(执行路径 ...

  10. BZOJ-3709-[PA2014]Bohater(贪心)

    Description 在一款电脑游戏中,你需要打败n只怪物(从1到n编号).为了打败第i只怪物,你需要消耗d[i]点生命值,但怪物死后会掉落血药,使你恢复a[i]点生命值.任何时候你的生命值都不能降 ...