内联JavaScript应该放在HTML的哪一个位置

<html>
    <head>
        <link href="xxx.css" rel="stylesheet">
    </head>
    <body>
          <main>....</main>
        <script src="xxx.js"></script>
    </body>
</html>

假如咱们有一段内联的、须要提早加载的、JS统计逻辑代码，很天然的，会把内联JS放在head里。那么是放在css前面，仍是后面呢？这是本文将要阐述的问题。我作了两个实验来看看两个位置下的页面渲染流程。为了突出实验效果，我模拟的是3g下的网速。

内联JS在CSS以前

代码：

<html>
    <head>
          <script type="text/javascript">
            for (var i = 0; i < 100000000; i++) {}
        </script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-grid.css" rel="stylesheet">
    </head>
    <body>
        <p>hello word_1</p>
        <p>hello word_2</p>
        <p>hello word_3</p>
        <p>hello word_4</p>
        <p>hello word_5</p>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    </body>
</html>

timeline以下：

eventlog以下：

从上面两个图能够看到，开始解析HTML后，会开始执行内联JS，而且发起网络请求下载CSS和JS文件，当CSS下载完成后，便开始进入渲染。

内联JS在CSS后

代码：

<html>
    <head>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-grid.css" rel="stylesheet">
        <script type="text/javascript">
            console.log(document.getElementById, window);
            for (var i = 0; i < 100000000; i++) {}
        </script>
    </head>
    <body>
        <p>hello word_1</p>
        <p>hello word_2</p>
        <p>hello word_3</p>
        <p>hello word_4</p>
        <p>hello word_5</p>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    </body>
</html>

timeline以下：

eventlog以下：

从上面两个图能够看到，浏览器开始解析HTML后，会发起网络请求下载JS和CSS，当CSS下载完成后，才会继续执行内联JS，页面的渲染被推迟了，推迟的时间就是内联JS的执行时间。

实验小结

浏览器解析HTML的时候，会对整个HTML进行『preload scanner』，提早发起网络请求，下载外链资源，并非解析到对应标签才会进行下载。而外链下载这个过程是由浏览器进程的网络线程完成的，不会阻塞当前渲染器进程的主线程逻辑。
JS会阻塞HTML的解析。内联JS在CSS前面的时候，执行内联JS能够和网络请求并行执行，执行完内联JS后会继续解析HTML，而且在CSS文件下载完成后，选择合适的时机进行渲染。而内联JS在CSS后面的时候，因为考虑到内联JS可能会修改CSSOM，因此主线程会暂停，直到CSS下载完成，生成CSSOM后，才会继续执行内联JS、解析HTML。

结论

对于一些全局函数，全局统计逻辑等，咱们每每会之内联JS的形式放在HTML内的head里。此时，最好把内联JS放在外链CSS以前，以提升首屏速度，至少不会拖慢首屏速度。

写在后面

本文聚焦探索了内联JS在HTML内的最佳位置。网上关于页面渲染流程的文章不少，而本身去亲自实践后，才能更好的理解整个渲染流程。符合预期。