The DOM: Style in the Header, Script in the Footer


也许你已经被告知了,链接样式表(CSS)应包含在网页的头部(head)和脚本(JS)链接应该包含在页脚。你是否问过自己,为什么要这样子做吗?

如果你见过,首先加载页面文本,然后再去加载格式和css样式的网页,那么你就见过那些,没有把样式(style)和脚本(script)放在正确的地方的网页。

这一切都取决于浏览器是如何判定是否加载了足够的信息来显示页面。这就是所谓的“DOMContentLoaded”事件:一旦事件发生,无论是加载完毕都将显示。

DOM 会告诉浏览器,一旦 HTML 被加载,它就已经准备好了,然而有时 CSS 和 JS 还没有进来。但是,如果你在头部放入 CSS 样式和在页脚中放入 JS 脚本,这样你就可以保证在 DOM 触发“DOMContentLoaded”事件之前,所有内容都将被载入,这个事件会把网页展示给用户。

这是一个简单的解释,因为大多数这些视频都是这样解释的。欲了解更多信息,这是我很喜欢的一个资源:ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload