Question

我有以下代码：

<!doctype html>
<html>
    <head>

    </head>
    <body>
        <div id="colorfield"></div>
        <script>
            function insertElement(color,nr){
                var html = document.getElementById("colorfield").innerHTML;
                html += "<span style='background-color: "+color+";'>"+nr+"</span>";
                if(nr % 10 == 0) html += "<br>";
                document.getElementById("colorfield").innerHTML = html;
            }

            function getColor(nr){
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                  if (this.readyState == 4 && this.status == 200) {
                      var response = this.responseText; 
                      color = JSON.parse(response).colors[0].value;
                      insertElement(color,nr);
                  }
                };
                xhttp.open("GET", "https://api.noopschallenge.com/hexbot", true);
                xhttp.send(); 
            }
            for(i=1;i<=100;i++){
                getColor(i)
            }
        </script>
    </body>
</html>

这只会打印来自https://api.noopschallenge.com/hexbot的带有随机背景色的请求号。

如果我正常（重新）加载页面（F5），将按照从1到100的正确顺序依次打印元素，这大约需要12秒钟。

如果我按Ctrl + F5，则加载时间会减少很多，并且元素将按照看似随机的顺序打印，大约只需1秒钟。

我认为Ctrl + F5的意思是“从源而不是使用本地缓存加载所有内容”，但是看来ajax请求也以不同的方式处理。这些元素将根据api服务器的回答时间进行打印。

以下是图片的区别：

Ctrl + F5

F5

怎么来？

在加载时间方面，F5与Ctrl + F5有何区别？

0 个答案: