我知道，当浏览器下载远程脚本时，它会等到整个文件下载完成后再执行(显然)。 将文件拆分为多个远程文件会增加加载时间，但也允许更快地执行一些重要代码。
内联脚本的加载/执行工作是否相同？ 假设确实如此，那么分割内联脚本将在所有加载时间上产生如此小的增加，这不会被注意到，并且它将允许一些代码执行更快的结果。(双赢)
示例
<script>
/*
Critical JS Block (Any Initial visual Dom Manipulation or loading critical assets)
*/
function loadCSS(){}; //https://github.com/filamentgroup/loadCSS
document.getElementbyId('textbox1').value(localStorage.textbox1);
</script>
<script>
/*
Non Critical JS Block
ui event listeners
buttons, menus, tabs, etc
*/
</script>
<script>
/*
lazy loading / pre-loading assets
*/
</script>
</body>
这对内联有效吗<scripts>和内联<style> ？
<style>
body{display:none;}
/*
Critical CSS Block
*/
body{display:block;}
</style>
</head>
<body>
...
<style>
/*
Non Critical CSS Block
*/
</style>
</body>
如果这确实有效并且是一个实用的解决方案，那么哪些 block 作为内联会更好，哪些外部脚本更好？
最佳答案
简短的回答是:理论上是的，在实践中，如果您在拆分内联脚本时发现渲染性能有所提高，则很可能存在一些设计问题。
内联脚本/CSS block 像页面上的其他任何内容一样阻止渲染(因此，在加载任何其他视觉元素之后，始终将它们放置在底部)，并且拆分它们将允许部分显示，直到页面的其余部分加载.
也就是说，如果您在 javascript 中进行大量处理，足以导致您的脚本可能导致用户可见的页面延迟，那么您最好不要一开始就将其设为内联脚本。最简单的标准解决方案是将其放入自己的 js 文件中，并从内联脚本异步加载它。
关于javascript - 拆分脚本/CSS 是否会产生更快的执行/绘制时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35225330/