• 网络连接和初始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>

    不登高山,怎知天高;不临深溪,焉知地厚!站在坚实的土地上,做着生命中最真实的事情;像一棵挺拔的大树,认可自己的命运并敢于迎接属于这一方天空的风风雨雨。

  • 相关阅读:
    js实现图片轮播(修改版1)
    动态添加内容到滚动区域
    新闻自动滚动
    多媒体对象(Media Object)
    (Py练习)判断能被几个9整除
    (Py练习)输出乘法口诀表
    (Py练习)输入某年某月判断天数
    文件名称批量修改
    续订Jetbrain学生包
    (Py练习)判断101-200之间的素数个数并输出
  • 原文地址:https://www.cnblogs.com/net2012/p/2823268.html
Copyright © 2020-2023  润新知