本文探讨了内联JavaScript在HTML中的最佳位置，以优化页面渲染流程。实验表明，对于需要提前加载的内联JS，应放置在外链CSS之前，以避免阻塞DOM解析并提高首屏加载速度。
写在前面
本文首发于公众号：符合预期的CoyPan
内联JavaScript在现在的前端项目中是比较常见的，比如一些全局函数，全局统计逻辑等，我们可能会以内联JavaScript的方式写在HTML里。那么，内联JavaScript最好应该放在哪里呢？
页面渲染流程
首先来看看这个问题：页面是怎么渲染的？大致流程如下：
页面的渲染是一个复杂的过程，这里就不再详细说了。简单总结一下，就是使用HTML构建DOM树，CSS构建CSSOM，两者结合生成Render Tree，然后再进行渲染。
推荐几篇值得收藏，反复阅读的文章：
内联JS的位置
本文仅仅讨论在一般的情况下，内联JS应该放在哪个位置。首先，下面两点可以算是【共识】：
JS尽量放在HTML底部。
CSS尽量放在HTML头部。
JS放在底部是为了防止阻塞DOM的解析，CSS放在头部是为了尽早完成CSSOM的构建，从而尽早paint页面。下面是一个常见的页面的HTML
最低0.47元/天 解锁文章
7297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
