为什么标准是将css和js文件分别放在页面的顶部和底部

Why is the standard to put the css and js file at the top and bottom of the page (respectively)?

本文关键字:底部 顶部 标准 css 文件 js 为什么      更新时间:2023-09-26

只是想知道,当您在页眉和页面顶部/底部使用css和js标准化网站时,为什么会有性能增强。

这并不完全正确。简单地说:

  • 样式声明应该尽可能接近顶部,因为浏览器在加载CSS之前不会呈现页面(以避免出现未样式的内容)

  • 脚本标签应该尽可能靠近底部,因为它们会阻止浏览器在标签加载和完成之前对其进行解析(因为脚本可能会使用document.write更改文档)

如果你对前端性能感兴趣,我强烈建议你阅读Steve Souders的《高性能网站:前端工程师的基本知识》。

有很多WHY,但我总是选择Yahoo Developers

高性能网站规则5-将样式表放在首位

高性能网站的规则6–将脚本移到的底部

把js文件放在头中不是标准的,大多数时候最好把它们放在页面的底部,因为加载html之后就会加载js。这允许直接使用html元素(例如,向某些div添加处理程序等);link>标签,在标题中使用它是标准的。这使得样式可用于<车身>。css/js的位置与性能关系不大。

将CSS放在顶部的原因是在渲染页面之前加载它,因此页面将使用其样式进行渲染。否则,它将在没有设计的情况下进行渲染,然后重新渲染。JS通常在底部加载,而不是在顶部加载。在标题中加载一些JS的原因是为了让它在页面中可用(否则,如果页面主体中有JS,则可以调用未定义的对象/函数,该函数使用外部库)

AFAIK-CSS实际上只在标头中有效,而且,对于CSS和JS来说,它们都应该在标头中,这样当页面中的任何东西需要它们时,它们肯定是可用的。

例如,如果您在页面的正文中有一个JS函数调用,但该函数尚未事先声明,那么当然,您会得到一个脚本错误。

就性能而言,我不知道有任何性能的提高,但我可能错了。有时,您可以通过将某些脚本放在页面底部来提高性能,但这只是因为其他内容是提前渲染的(而不是浏览器在加载外部资源时暂停渲染)

CSS应该在顶部,这样浏览器就可以立即开始布局。

Javascript应该在底部。Javascript可以包含document.write(),因此浏览器在运行Javascript之前不能在Javascript之后呈现任何内容。

如果您将javascript移动到页面的底部,我可以提高性能。。。

我认为您所说的好处可以更容易地归因于将代码放置在单独的文件中,而不是将文件包含在页面上的特定点上。

当然,使用JavaScript,如果将它们放在一个单独的文件中,您可以更容易地利用诸如缩小和压缩之类的方面。

如果在多个页面上使用JS或CSS文件,那么缓存也可以在提高性能方面发挥作用。