网络连接和初始HTTP请求
浏览器检索网页,先从URL开始,使用DNS确定IP地址,再用基于TCP和HTTP协议连接到服务器,请求相关的内容,得到相应,浏览器解析并呈现到屏幕上。
服务器响应后,浏览器响应不会同时全部到达,会陆续到达,有时候之间还会有时间间隔。
页面解析和新的资源请求浏览器等待数据包时,会解析得到包,并寻找可用新的HTTP请求,并启动,每一个服务器,浏览器一般最多同时打开两个请求连接。
一般一次请求:
1、DNS解析IP地址的时间
2、读取主页面时间:连接服务器,发送HTTP get请求,接受初始的HTTP响应时间,和盛余响应到达时间
3、检查图片等其他资源,连接时间,请求并接受所需要的时间
浏览器接受HTML响应时,就开始一边接受,一边解析,当解析到需要打开其他请求的资源时,会并行打开这个资源的请求,所以像这样的资源放在HTML的顶部比放在底部呈现的速度是不一样的,在顶部更快,一般在HTML中的前500个字节中,放置这样订单请求,是一个很好的加速方法。
页面资源顺序
浏览器呈现HTML中的<body>元素之前,会先请求<head>中内容,在head所以资源下载完成之前,用户不会看到呈现的内容,所以尽可能将一些请求放在body内,这样呈现页面和加载资源并行进行,从而缩短页面的呈现时间。随着html解析,页面中引用的资源,会按照html中的出现的顺序进行排队。同一台服务器,最多打开两个连接,所以多于2个的资源会被压入等待队列里面。
但是有时候我们页面中顶部有大幅banner,哦我们不希望在一开始去请求这样的资源,影响到后面重要的内容的呈现,我们可以使用延迟加载技术:
例如
<img id="myimg" with="50" heigth="50">
...
<script type="text/script">
document.getItemById("myimg").src="myimg.jpg";//会让浏览器请求这个图
</script>
图片标签应该制定宽和高,可以减少呈现时间。
我们还可以提前加载:
<script type="text/script">
var myimg = new img();
myimg="myimg.jpg";//会让浏览器请求这个图
</script>
...
<img src="myimg.jpg" id="myimg" with="50" heigth="50">
分配Image对象,设置src属性,即会开始请求图片,在<img>中只要再次使用相同的文件就可以了,浏览器会缓存这个图片。
浏览器缓存
浏览器缓存是区分大小写的,如果引用相同对象,URL大小写不同,浏览器会多次下载相同的对象。
所以我们强制所以的URL都使用小写。
网络优化:每一个域名最多同时打开两个连接,页面上同时请求同一个域名下的多个资源会进入等待队列中,同时只能打开两个连接,其余等待。改善的方法是,将图片放入不同的子域名中,可以在同一时间并行打开所有连接,但是一个新的连接是有开销的,我们一般从2-4个域名中加载内容。
脚本文件处理浏览器连接请求javascript资源,并会一个一个获取他们,在脚本文件被请求期间,其他的请求进入等待队列,但是在javascript资源请求之前,已经有其他的资源正在请求,script不会打断,只会打断后面的请求。所以我们尽可能的合并脚本。
使用页面onload处理器,和延迟加载来执行后期请求
<body onload="lateImage()">
<img id="myimg" with="50" heigth="50">
...
<script type="text/script">
function lateImage()
{
document.getItemById("myimg").src="myimg.jpg";//会让浏览器请求这个图
}
</script>
网络连接和初始HTTP请求的更多相关文章
- Win10搭建Linux开发环境之网络连接设定
一直想在家自己搭建一个LINUX服务器,好在上面安装个ORACLE数据库玩玩. 上次用了Ubuntu,结果ORACLE没装成功,现在换个思路,采用CentOS 7作为Linux服务器, 之后再进行构建 ...
- MMORPG大型游戏设计与开发(服务器 游戏场景 掉落与网络连接)
时间一点点的消逝,伴着自己空闲日子将要结束的时候我尽量的学习和分享场景和AI的知识给朋友们,不过很遗憾的是这些文章还有不足的地方,就是有的难点没有完全的分析到.掉落在游戏中必不可少的,同时网络连接也是 ...
- Android网络连接判断与处理
博客分类: Android 获取网络信息需要在AndroidManifest.xml文件中加入相应的权限. <uses-permission android:name="android ...
- iOS开发——网络篇——HTTP/NSURLConnection(请求、响应)、http响应状态码大全
一.网络基础 1.基本概念> 为什么要学习网络编程在移动互联网时代,移动应用的特征有几乎所有应用都需要用到网络,比如QQ.微博.网易新闻.优酷.百度地图只有通过网络跟外界进行数据交互.数据更新, ...
- LTE Module User Documentation(翻译10)——网络连接(Network Attachment)
LTE用户文档 (如有不当的地方,欢迎指正!) 16 Network Attachment(网络连接) 正如前面章节 Basic simulation program 所述,连接用户到基站时通过调 ...
- Linux 服务器的网络配置 - 1. 查看 Linux 服务器的网络连接
1. 查看 Linux 服务器的网络连接 1)查看主机名: liuqian@ubuntu:~$ hostname ubuntu 2)查看 ip 地址: 用 ifconfig 即可,这里介绍命令组合用法 ...
- Silverlight项目笔记6:Linq求差集、交集&检查网络连接状态&重载构造函数复用窗口
1.使用Linq求差集.交集 使用场景: 需要从数据中心获得用户数据,并以此为标准,同步系统的用户信息,对系统中多余的用户进行删除操作,缺失的用户进行添加操作,对信息更新了的用户进行编辑操作更新. 所 ...
- Android系列之网络(二)----HTTP请求头与响应头
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
- [转]VMware虚拟机上网络连接(network type)的三种模式--bridged、host-only、NAT
转自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/03/15/1985084.html VMWare提供了三种工作模式,它们是brid ...
随机推荐
- .Net Core .Net Core的学习
.Net Core 学习 一.什么是.net core? 百度百科: https://baike.baidu.com/item/.net%20core/20130686?fr=aladdin 个人总结 ...
- Android app如何加密?
欢迎访问网易云社区,了解更多网易技术产品运营经验. Android App包含的内容有dex文件,so文件,res,assets资源文件.对应的加密按此内容分为三大方面:dex保护.so加密.资源保护 ...
- Kotlin if else判断
Kotlin的if相对与java,有着较为灵活的用法. if是用来判断. if在Kotlin里面可以作为表达式来使用. 如果熟悉C java C#等 A>B:A?B这个判断应该是很熟悉,而Kot ...
- windows下安装newman
1.下载安装node.js,下载地址::https://nodejs.org/en/download/,这里我下载的为v10.15.0-x64.msi,下载后直接安装即可,安装完后可输入node -v ...
- 解决eclipse Building workspace(Sleeping)闪烁
出现这个是因为我,把两个有错的项目.从工程里面删除掉之后,再接着运行新的工程,但是Building workspace一直没有执行完毕,导致新的工程无法运行. 这个时候可以关闭自动编译,就可以运行新的 ...
- linux下 zip解压 tar解压 gz解压 bz2等各种解压文件命令
.tar 解包:tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) ——————————————— .gz 解压 ...
- linux下配置apache多站点访问-小案例
一级域名(baidu.com)也叫作顶级域名,注册一级域名是需要付费的. 而二级域名(image.baidu.com)是一级域名的延伸,所以只要购买了一级域名,二级域名是可以任意配置的. 其实(www ...
- Qt 学习之路 2(60):使用 DOM 处理 XML
Qt 学习之路 2(60):使用 DOM 处理 XML 豆子 2013年8月3日 Qt 学习之路 2 9条评论 DOM 是由 W3C 提出的一种处理 XML 文档的标准接口.Qt 实现了 DO ...
- 数据结构5.4_m元多项式的表示
三元多项式表示如下: P(x,y,z) = x10y3z2 + 2x6y3z2 + 3x5y2z2 + x4y4z + 6x3y4z + 2yz + 15 然后对式子进行变形: P(x,y,z)=(( ...
- BZOJ - 1941 最远估价
题意:求给出的所有点的最远点减最近点的最小差值 KD树的最远估价和最近估价略微不同,直接找最远垂线,反正xjb改一下就过了 #include<bits/stdc++.h> #define ...