性能优化之-------少用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请求的次数,这是提高网页速 ...
随机推荐
- noip的一些模板(参考了神牛的博客)
一.图论 1.单源最短路 洛谷P3371 (1)spfa 已加SLF优化 419ms #include <iostream> #include <cstdio> #includ ...
- hibernate学习手记(2)
1.javax.persistence.TransactionRequiredException: no transaction is in progress 出现该问题是我没有开启事务,我是在保存之 ...
- JSP 入门
request是请求,即客服端发来的请求. response是响应,是服务器做出的响应 redirect页面重定向 forward页面跳转 不改变url 四个作用域 如果把变量放到pageContex ...
- 机器学习之numpy库中常用的函数介绍(一)
1. mat() mat()与array的区别: mat是矩阵,数据必须是2维的,是array的子集,包含array的所有特性,所做的运算都是针对矩阵来进行的. array是数组,数据可以是多维的,所 ...
- 记2017问鼎杯预赛的wp---来自一个小菜鸡的感想
这次准备写一下几个misc和密码题目..很坑. 打了一整天的比赛,越来越觉得自己很菜了. 有一道题目叫做"真真假假",这道题目只有一个提示--Xor.第一眼知道是异或,也就知道这一 ...
- Python数据分析(二): Numpy技巧 (1/4)
In [1]: import numpy numpy.__version__ Out[1]: '1.13.1' In [2]: import numpy as np
- JavaWeb(一)Servlet中乱码解决与转发和重定向的区别
前言 前面其实已经把Servlet中所有的内容都介绍完了,这篇讲补充一点乱码和重定向与转发之间的区别! 一.request请求参数出现乱码问题 1.1.get请求 1)乱码示例 get请求的参数是在u ...
- 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...
- 简单Elixir游戏服务器开篇
以前的Elixir游戏服设计系列种种原因没有完成. 后来虽然用Elixir + riak 完成了一个麻将的初始版本,可惜公司也挂了. 现在到新公司,比较空闲,想着像完成一个心愿一样,还是重启下吧(希望 ...
- Laravel框架使用查询构造器实现CURD
一.什么是查询构造器? ①Laravel 查询构造器(query Builder)提供方便,流畅的接口,用来建立及执行数据库查找语法 ②使用PDO参数绑定,以保护应用程序免于SQL注入因此传入的参数不 ...