为啥 script 标签的 document.write 会有时间差？为啥脚本标签执行延迟？

Posted 2023-02-19

【中文标题】为啥 script 标签的 document.write 会有时间差？为啥脚本标签执行延迟？

【英文标题】：Why is there a time lag for document.write of script tag ? And why is the script tag execution delayed?为什么 script 标签的 document.write 会有时间差？为什么脚本标签执行延迟？

【发布时间】：2011-09-01 11:19:14

【问题描述】：

在我的代码中，我创建了 5 个带有脚本标签的 iframe，以从服务器获取响应。 我们需要并行执行此操作。也是因为跨域的问题，我们没有选择Ajax技术，只是同时创建iframe来进行异步请求。

<script type="text/javascript" href="http://www.example1.com/json.js"></script> 
<!-- //---------------------------------------------------------------------(1)-->
<script type="text/javascript">
    var url = "http://www.example2.com/getResponse/";
    var count = 5;
    var callback = "callback";

    function iframeCallback(index) 
        var iframe = document.createElement('iframe');
        iframe.style.border='0px';
        iframe.style.width ='0px';
        iframe.style.height='0px';
        document.body.appendChild(iframe);
        var content = "<script type='text/javascript'>";
        content += "var begin = new Date();";           //------------------(2)
        content += "var jsText = \"<script type='text/javascript' src='" + url + "'></\" + \"script>\";";
        content += "document.write(jsText);";
        content += "</"+"script>";
        content += "<script type='text/javascript'>";
        content += "var data = eval('"+callback+"');";  //------------------(3)
        content += "window.parent.getRepsonse(data);";
        content += "</"+"script>";
    

    function getRepsonse(data) 
        //Deal with the responses here
        //------------------------------------------------------------------(4)
    

    function doMainProcess() 
        for (i=0; i<count; i++) 
            iframeCallback(i);
        

        //pause the main thread here to wait until calls are finished
        //------------------------------------------------------------------(5)
        //go on to do something else
    
</script>

我的问题在这里：

为什么script标签的document.write会有时间延迟？

当我调试上面的代码时，我发现（1）和（2）之间有一个时间差。有什么办法可以让两者同时发生？或者尽可能缩短延迟。

为什么脚本标签执行延迟？

（2）和（3）之间的时间延迟也很奇怪。当我们尝试直接去 URL 进行调用时，只需要 150ms，但是如果我们使用 script 标签进行调用，则需要 400ms+。 需要让通话时间尽可能接近直接通话。

在收到 iframe 的响应之前，我们如何暂停页面其余部分的加载？

由于某种原因，我们不能简单地使用“setTimeout”函数在 (5) 处创建时间延迟。

当最后一次调用响应时，我尝试在 (4) 处设置一个标志，然后在 (5) 处使用 while-loop 来暂停那里的页面加载。但似乎没有效果。如果是这样，iframe 中的调用也将被阻塞，直到 while-loop 完成。

有没有什么好办法让主线程在(5)处暂停，等到所有调用都完成？

【问题讨论】：

Egad.. 为什么不在后端（php、Python 等）执行此操作？使用curl 或类似的库会简单得多..

我们在客户端这样做是因为我们将通过这种方式处理超过 50 亿个请求。

对于同时加载考虑使用lab.js labjs.com

要处理 50 亿条记录？你正在使用客户端javascript？ :o

每个客户端只会进行 5 次并行调用，而不是从同一客户端调用的所有 50 亿个请求。

【参考方案1】：

您无法控制浏览器何时呈现 DOMElement 或加载资源，您只能对它们做出反应。

如果有延迟，为什么不写一个同步函数来等待所有异步进程完成（比如收集数据）？

你不能暂停它，你只需要不渲染它或者渲染它但是隐藏它。

我最担心的是，您正在考虑在您似乎不掌握的技术上构建高流量服务。您正在尝试使用不支持计时的语言进行计时。

另外，您的脚本中有一个错误，content 实际上并没有被写入。

而eval 是邪恶的。必须有更好的方法。