性能优化之-------少用iframe
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的更多相关文章
- web前端性能优化
性能优化对于用户体验无疑是非常重要的,下面介绍一些性能优化的方法. 1.减少HTTP请求 http请求越多,那么消耗的时间越多,如果在加上网络很糟糕,那么问题就更多了.且如果网页中的图片.css文件. ...
- HTML5性能优化
HTML5性能优化 在看完这两章内容之后,我意犹未尽,于是乎从网上搜索关键字“Java Web高性能”,在IBM社区找到两篇不错的文章,而让人更意外的是我发现那两篇文章的内容跟<高性能HTML5 ...
- 【读书笔记】读《高性能网站建设指南》及《高性能网站建设进阶指南:Web开发者性能优化最佳实践》
这两本书就一块儿搞了,大多数已经理解,简单做个标记.主要对自己不太了解的地方,做一些记录. 一.读<高性能网站建设指南> 0> 黄金性能法则:只有10%~20%的最终用户响应时间 ...
- jQuery性能优化指南(转载)
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, ...
- 网站性能优化(Yahoo 35条)
Yahoo 网站性能优化 35条 一.内容部分 尽量减少 HTTP请求 减少 DNS查找 避免跳转 缓存 Ajxa 推迟加载 提前加载 减少 DOM元素数量 用域名划分页面内容 使 frame数量最少 ...
- [转] 《高性能HTML5》读后整理的Web性能优化内容
读后感 先说说<高性能HTML5>这本书的读后感吧,个人觉得这本书前两章跟书的标题完全搭不上关系,或者说只能算是讲解了“高性能”这三个字,HTML5完全不见踪影.个人觉得作者应该首先把HT ...
- Yahoo团队经验:网站性能优化的34条黄金法则
Yahoo团队总结的关于网站性能优化的经验,非常有参考价值.英文原文:http://developer.yahoo.com/performance/rules.html 1.尽量减少HTTP请求次数 ...
- css,html性能优化
css性能优化 CSS是负责布局和渲染的重要角色,漂亮的页面当然能够吸引用户.本文是自己在开发过程中总结的关于CSS与性能的关系,可能有不对之处,希望能够指出. ? 1.所有的样式尽量放在css文件中 ...
- Yahoo网站性能优化的34条军规
1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数,这是提高网页速 ...
随机推荐
- 前后端分离,接口API,契约
前后端分离了,然后呢? http://icodeit.org/2015/06/whats-next-after-separate-frontend-and-backend/ Swagger - 前后端 ...
- Go语言下载、安装、配置、使用
Go语言 Go语言(Golang,The Go Programming Language),是谷歌2009发布的第二款开源编程语言.2009年7月份,谷歌曾发布了Simple语言,它是用来开发Andr ...
- R语言画曲线图
本文以1950年到2010年期间我国的火灾统计数据为例,数据如下所示: (0)加载数据 data<-read.csv("E:\\MyDocument\\p\\Data\\1950~20 ...
- JQ判断浏览器以及版本
JQuery 使用jQuery.browser 来判断浏览器,返回值可以为: safari(safari) opera(Opera) msie(IE) mozilla(Firefox). if($.b ...
- sqlserver 2005连接超时采用bat命令解决
将以下内容保存为 openSql.bat 双击运行即可 @echo ========= SQL Server Ports =================== @echo Enabling SQLS ...
- PHP windowns安装扩展包
1. php_msgpack.dll php.ini 添加 extension=php_msgpack.dll 下载dll: http://pecl.php.net/package/msgpack ...
- 一份传世典文:十年编程(Teach Yourself Programming in Ten Years)
原文:Teach Yourself Programming in Ten Years作者:郭晓刚翻译:郭晓刚(foosleeper@163.net)最后修订日期:2004-3-192005-01-12 ...
- 用Python来实现列举某个文件夹内所有的文件列表
用Python来实现列举某个文件夹内所有的文件列表.吾八哥我动手写代码之前分析了下,遍历一个文件夹,肯定是需要用到os模块了,查阅模块帮助信息,可知os.listdir()方法可以列举某个文件夹内的所 ...
- Emgu.CV(三)
像素交换 private void btn_Exchange_Click(object sender, EventArgs e) { if (imageBox1.Image != null) { va ...
- 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 ...