V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
whahuzhihao
V2EX  ›  问与答

为什么一个 10M 的纯文本 html 可以瞬间加载完毕?

  •  1
     
  •   whahuzhihao · 2016-02-01 16:48:34 +08:00 · 3181 次点击
    这是一个创建于 3223 天前的主题,其中的信息可能已经有所发展或是发生改变。

    今天在玩 PHP 探针,看到一个测网速的功能。代码是这样的:

    <script language="javascript" type="text/javascript">
        var acd1;
        acd1 = new Date();
        acd1ok=acd1.getTime();
    </script>
    
    <?php
        for($i=1;$i<=100000;$i++)
        {
            echo "<!--567890#########0#########0#########0#########0#########0#########0#########0#########012345-->";
        }
    ?>
    
    <script language="javascript" type="text/javascript">
        var acd2;
        acd2 = new Date();
        acd2ok=acd2.getTime();
        window.location = '?speed=' +(acd2ok-acd1ok)+'#w_networkspeed';
    </script>
    

    这样居然可以通过 js 的间隔获取客户端接收中间这段长文本的时间,感觉好神奇啊。

    但是后来想想不对啊,这都吐出来 10M 大小的文本了,为毛我的浏览器可以瞬间加载完毕?我的阿里云没这么高带宽啊?

    后来试了下把文本直接放到静态 HTML 里面,两种情况:
    1. 直接裸的纯文本 加载很慢,我没耐心等他加载完,所以也不知道最后文档结构是啥样
    2. 加了标签,比如在开头放一个<script></script>或者<body>之类的 瞬间加载完毕

    请教下各位大大这是什么科学道理?


    PS: 是走 http 服务器访问的,不是本地直接打开网页文件
    PS2: 而且我看雅黑探针的这段代码,命名是 10M 大小为毛官方说是 1000KB 大小,还有最后计算网速的那段也没看懂,不管是按 bit 还是 byte 都不对啊

    16 条回复    2016-02-01 19:33:28 +08:00
    imn1
        1
    imn1  
       2016-02-01 17:11:20 +08:00
    js echo 跟网速啥关系?
    lifanxi
        2
    lifanxi  
       2016-02-01 17:14:16 +08:00
    服务器压缩了?
    whahuzhihao
        3
    whahuzhihao  
    OP
       2016-02-01 17:14:49 +08:00
    @imn1 是 php 的 echo 啊, js 哪有 echo 。关键我后来把文本提取出来了,还是瞬间加载完毕。
    decken
        4
    decken  
       2016-02-01 17:18:23 +08:00 via Android
    压缩了吧 文本重复率很高
    odirus
        5
    odirus  
       2016-02-01 17:19:25 +08:00
    JavaScript 是下载到浏览器后才执行, PHP 部分是请求返回之前已经在服务端处理好。

    So ,无论你 php 中间执行啥,你这段代码计算出来的时间都可以忽略不计。
    liprais
        6
    liprais  
       2016-02-01 17:19:31 +08:00
    开了压缩了吧
    FrankFang128
        7
    FrankFang128  
       2016-02-01 17:22:58 +08:00 via Android
    抓包才知道大小
    ljbha007
        8
    ljbha007  
       2016-02-01 17:24:34 +08:00
    chrome dev-tools 可以看到压缩后的大小
    imn1
        9
    imn1  
       2016-02-01 17:26:53 +08:00
    @whahuzhihao
    呃,扔下 PHP 多年,一下子眼花了
    odirus
        10
    odirus  
       2016-02-01 17:28:47 +08:00
    http://stackoverflow.com/questions/12598232/running-jquery-code-before-the-dom-is-ready

    你把第一部分的 JavaScript 放到 <head></head> 标签里面试试
    imlonghao
        11
    imlonghao  
       2016-02-01 17:28:54 +08:00
    之前 vr.org 的测速文件而是 gzip 压缩过的,下载速度看上去超快,都突破网速了
    whahuzhihao
        12
    whahuzhihao  
    OP
       2016-02-01 17:41:22 +08:00
    @decken @liprais @FrankFang128 @ljbha007 @imlonghao
    恩 目测文件内容是压缩了 一个 100M 大小的文本 请求大小只有 300 多 K
    后来每次随机多吐出来一个随机字符,速度明显下降了一些
    odirus
        13
    odirus  
       2016-02-01 17:50:54 +08:00
    认真请教个问题,上面的代码段假设为 scriptA 、 text 、 scriptB

    当按照 scriptA 、 text 、 scriptB 的方式排列时,浏览器会一直刷新(是不是 window.location 触发的,但是为啥执行十几次之后就会停止,是因为占用浏览器内存过大被浏览器停止的吗?)

    当按照 text 、 scriptA 、 scriptB 的方式排列时,浏览器不会刷新页面,这是为啥, window.location 没起作用吗?

    前端渣水平,忘赐教。
    Slienc7
        14
    Slienc7  
       2016-02-01 18:00:58 +08:00
    GZIP
    whahuzhihao
        15
    whahuzhihao  
    OP
       2016-02-01 18:33:49 +08:00   ❤️ 1
    @odirus 首先这段代码不全,在整个代码里面肯定不会导致自动刷新,当然单独放进页面里肯定会刷新的
    为什么会刷新之后停下来 本人猜测一下:
    1. scriptA text scriptB 这样的顺序,因为 text 这段花的时间每次不太可能相同,所以每次跳的 url 不太可能相同,就会一直刷新,直到有两次 url 一样才停止
    2. text scriptA scriptB 这样的顺序,每次 location 到 url 是相同的,这样浏览器就主动不刷新了

    刚才试验了下,如果要跳的 url 和本页面 url 相同 chrome 就不跳了
    odirus
        16
    odirus  
       2016-02-01 19:33:28 +08:00
    @whahuzhihao 恩,谢谢,理解了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1433 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 17:30 · PVG 01:30 · LAX 09:30 · JFK 12:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.