拆分 scripts/css 会产生更快的 execution/paint 时间吗

Question

我知道，当浏览器下载远程脚本时，它会等到整个文件下载完成后再执行（很明显）。将文件拆分为多个远程文件会增加加载时间，但也会让一些重要代码更快地执行。

Load/execution 对内联脚本是否同样有效？假设它确实如此，那么拆分内联脚本会在所有加载时间中增加如此小的增加，这不会引起注意，并且它会允许一些代码执行更快的结果。(win win)

例子

<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>

如果这确实有效并且是一个实用的解决方案，哪些块作为内联更好，哪些外部脚本更好？

Answer 1

简短的回答是：理论上是的，在实践中，如果您在拆分内联脚本时看到渲染性能有所提高，则很可能存在一些设计问题。

内联 scripts/css 块像页面上的其他任何内容一样阻止呈现（因此，始终将它们放在底部，在加载任何其他视觉元素之后），拆分它们将允许部分显示，直到其余部分页面加载次数。

就是说，如果您在 javascript 中进行了大量处理，以至于您的脚本很可能会导致页面出现用户可见的延迟，那么您最好还是不要这样做一个内联脚本开始。最简单的标准解决方案是将其放入自己的js文件中，并从内联脚本中异步加载。

拆分 scripts/css 会产生更快的 execution/paint 时间吗

Does splitting scripts/css produce a faster execution/paint time

html

javascript

css

performance

load

例子