写在前面
本文首发于公众号:符合预期的CoyPan
内联JavaScript在现在的前端项目中是比较常见的,比如一些全局函数,全局统计逻辑等,我们可能会以内联JavaScript的方式写在HTML里。那么,内联JavaScript最好应该放在哪里呢?
页面渲染流程
首先来看看这个问题:页面是怎么渲染的?大致流程如下:
页面的渲染是一个复杂的过程,这里就不再详细说了。简单总结一下,就是使用HTML构建DOM树,CSS构建CSSOM,两者结合生成Render Tree,然后再进行渲染。
推荐几篇值得收藏,反复阅读的文章:
内联JS的位置
本文仅仅讨论在一般的情况下,内联JS应该放在哪个位置。首先,下面两点可以算是【共识】:
JS尽量放在HTML底部。
CSS尽量放在HTML头部。
JS放在底部是为了防止阻塞DOM的解析,CSS放在头部是为了尽早完成CSSOM的构建,从而尽早paint页面。下面是一个常见的页面的HTML