Why is Firefox MUCH faster than Chrome when loading 'big' documents?

问题

I'm trying to troubleshoot an issue with bad acceptance of custom html build-reports that require a very long time to load on googlechrome, whereas load time is much better on firefox.

talking about ~5 sec. vs ~110 sec. (measured with firefox & googlechrome profiler)
the file is about 10MB in size

imo there is nothing 'special' about the html file.

the reports are usually loaded with anchor suffix, so the browser should jump to the very end of the file (='summary section') when it's loaded.

I have put a couple of example files on a github repo => browser bongo test

回答1:

Turns out, you can have TO FEW JAVASCRIPT in your html :-/

If you take a closer look at the Chrome profiler tool, you realize the "initial rendering" of any page is really quick, often less than 100 msec, no matter if the requested page is a "big" or "small" html / plaintext file.

After the initial rendering, Chromium seems to prefer receiving small junks of data, performing a additional rendering after each and every junk/part of the full content it receives. - and that's what causes Chromium based browsers to be MUCH slower in processing large amounts of data.

You can easily bypass this weird "performance flaw" by rubbing a little JavaScript on it: Simply create a wrapper-page, which loads the actual content by performing a XMLHttpRequest request and updates the DOM only once. 1 initial + 1 rendering after the content is loaded and set into the dom = 2 renderings, instead of 100.000ish.

By using the following code, I've been able to get the load time of a 20 MB plaintext file from ~280 secs down to approx 4 seconds in Google Chrome, current version.

<body>
    <div id="file-content">loading, please wait</div>
    <script type="text/javascript">
        function delayLoad(path, callback) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        callback(xhr.responseText);
                    } else {
                        callback(null);
                    }
                }
            };
            xhr.open("GET", path);
            xhr.send();
        }

        function setFileContent(fileData) {
            var element = document.getElementById('file-content');
            if (!fileData) {
                element.innerHTML = "error loading data";
                return;
            }

            element.innerHTML = fileData;
        }

        delayLoad("bongo_files/bongo_20M.txt", setFileContent);
    </script>
</body>

来源：https://stackoverflow.com/questions/59308105/why-is-firefox-much-faster-than-chrome-when-loading-big-documents

标签

html

google-chrome

firefox

page-load-time

load-time