Skip to content

Instantly share code, notes, and snippets.

@justinvdm

justinvdm/__script-blocks-rendering.js

Last active June 18, 2018 06:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save justinvdm/70c4c70f9faa8e8cc5bd211f717e477e to your computer and use it in GitHub Desktop.
Save justinvdm/70c4c70f9faa8e8cc5bd211f717e477e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
__script-blocks-rendering.js
const http = require('http');
const T_CHUNK2 = 10000;
const T_JS = 0;
const a = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>rarily rar rar</title>
<script src="/script.js"></script>
</head>
<body>
<h1>chunk 1</h1>
`;
const b = `
<h1>chunk 2</h1>
</body>
</html>
`;
const js = `
console.log('js loaded');
`;
const handleIndex = (req, res) => {
res.write(a);
setTimeout(() => {
res.write(b);
res.end();
}, T_CHUNK2);
};
const handleJs = (req, res) => {
setTimeout(() => {
res.write(js);
res.end();
}, T_JS);
};
const handle = (req, res) => {
if (/.js$/.test(req.url)) {
console.log('js requested');
handleJs(req, res);
}
else {
handleIndex(req, res);
}
};
http.createServer(handle).listen(8080);
Raw
_script-blocks-rendering.md

script-blocks-rendering

versions

  • chrome: 67.0.3396.87 (Official Build) (64-bit)
  • firefox: 61.0b14 (64-bit)

test 1.1

conditions

  • chunk 1 immediate
  • chunk 2 at 5s
  • script immediate
  • async attr on script

results

  • chrome

    • chunk 1 displayed immediately
    • script fetched & executed immediately
    • chunk 2 displayed

  • firefox

    • full html rendered at 5s
    • script dled and executed 4ms later

findings

  • chrome renders markup as soon as it can
  • chrome executes script as soon as it can
  • firefox doesnt support rendering of streamed response?

test 1.2

conditions

  • chunk 1 immediate
  • chunk 2 at 5s
  • no script

results

  • chrome

    • chunk 1 displayed immediately
    • script fetched & executed immediately
    • chunk 2 displayed after 5s

  • firefox

    • full html rendered at 5s
    • script dled and executed 4ms later

findings

  • chrome renders markup as soon as it can
  • chrome executes script as soon as it can
  • firefox doesnt support rendering of streamed response?

test 2

conditions

  • chunk 1 immediate
  • chunk 2 at 2s
  • script at 5s
  • async attr on script

results

  • chrome:

    • chunk 1 displayed immediately
    • chunk 2 displayed after 5s

  • firefox:

    • full html rendered at 5s

findings

  • chrome renders markup as soon as it can
  • firefox doesnt support rendering of streamed response

test 3

conditions

  • chunk 1 immediate
  • chunk 2 at 10s
  • script at 5s
  • no async attr on script

results

  • chrome:

    • script dl started immediately
    • chunk 1 rendered at 5s
    • full html rendered at 10s

  • firefox:

    • script dl started at 10s
    • full html rendered at 15s

findings

  • script blocks renders for both browsers, but they differ in details
  • chrome blocks rendering of html downloaded so far, but as soon as js has executed, continues
  • firefox waits for entire html to be downloaded before it starts dling script
    • only once script has dled and executed does it render
Raw
package.json
{
"name": "http-script-blocks-rendering",
"version": "1.0.0",
"description": "",
"main": "__script-blocks-rendering.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node __script-blocks-rendering.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment