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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3211 天前的主题，其中的信息可能已经有所发展或是发生改变。

今天在玩 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 都不对啊

script

JavaScript

文本

tti

16 条回复 • 2016-02-01 19:33:28 +08:00

imn1

2016-02-01 17:11:20 +08:00

js echo 跟网速啥关系？

lifanxi

2016-02-01 17:14:16 +08:00

服务器压缩了？

whahuzhihao

2016-02-01 17:14:49 +08:00

@imn1 是 php 的 echo 啊， js 哪有 echo 。关键我后来把文本提取出来了，还是瞬间加载完毕。

decken

2016-02-01 17:18:23 +08:00 via Android

压缩了吧文本重复率很高

odirus

2016-02-01 17:19:25 +08:00

JavaScript 是下载到浏览器后才执行， PHP 部分是请求返回之前已经在服务端处理好。

So ，无论你 php 中间执行啥，你这段代码计算出来的时间都可以忽略不计。

liprais

2016-02-01 17:19:31 +08:00

开了压缩了吧

FrankFang128

2016-02-01 17:22:58 +08:00 via Android

抓包才知道大小

ljbha007

2016-02-01 17:24:34 +08:00

chrome dev-tools 可以看到压缩后的大小

imn1

2016-02-01 17:26:53 +08:00

@whahuzhihao
呃，扔下 PHP 多年，一下子眼花了

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

2016-02-01 17:28:54 +08:00

之前 vr.org 的测速文件而是 gzip 压缩过的，下载速度看上去超快，都突破网速了

whahuzhihao

2016-02-01 17:41:22 +08:00

@decken @liprais @FrankFang128 @ljbha007 @imlonghao
恩目测文件内容是压缩了一个 100M 大小的文本请求大小只有 300 多 K
后来每次随机多吐出来一个随机字符，速度明显下降了一些

odirus

2016-02-01 17:50:54 +08:00

认真请教个问题，上面的代码段假设为 scriptA 、 text 、 scriptB

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

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

前端渣水平，忘赐教。

Slienc7

2016-02-01 18:00:58 +08:00

GZIP

whahuzhihao

2016-02-01 18:33:49 +08:00

@odirus 首先这段代码不全，在整个代码里面肯定不会导致自动刷新，当然单独放进页面里肯定会刷新的
为什么会刷新之后停下来本人猜测一下：
1. scriptA text scriptB 这样的顺序,因为 text 这段花的时间每次不太可能相同，所以每次跳的 url 不太可能相同，就会一直刷新，直到有两次 url 一样才停止
2. text scriptA scriptB 这样的顺序,每次 location 到 url 是相同的,这样浏览器就主动不刷新了

刚才试验了下，如果要跳的 url 和本页面 url 相同 chrome 就不跳了

odirus

2016-02-01 19:33:28 +08:00

@whahuzhihao 恩，谢谢，理解了。