为什么标准是将css和js文件分别放在页面的顶部和底部
Why is the standard to put the css and js file at the top and bottom of the page (respectively)?
只是想知道,当您在页眉和页面顶部/底部使用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文件,那么缓存也可以在提高性能方面发挥作用。
- 如何将图表放在顶部和底部
- 滚动到顶部或底部后的简单效果
- 如何使一个元素从网页的顶部跳到底部再跳回到顶部
- 垂直与特定边距的顶部和底部对齐
- HTML导航在屏幕底部,并粘贴到顶部
- 粘贴Bootstrap在粘贴底部到达并滚动回顶部后闪烁
- 我们如何在fullPage.js中为不同的部分制作不同的填充顶部和底部值
- 当在堆栈底部添加ImageView时,我想删除RelativeLayout中的顶部ImageView,但它正在删除整个布
- 为什么javascript在页面底部或有时在页面顶部运行
- 使手风琴/可折叠中的 DIV 保持固定在页面的顶部和底部
- 如何使用 jQuery 检测元素的顶部靠近浏览器底部
- 如何在滚动到底部后在页脚上方设置“返回顶部”
- Div 在页眉到达其顶部时开始滚动,当其底部到达页脚时停止滚动
- 在 jquery 中滚动到顶部并滚动到底部
- 当您离开页面底部 100 像素时,淡出“滚动到顶部”按钮
- 用于页面更改的煎茶静态顶部和底部栏
- 当在 Ul 上使用向上/向下箭头到达溢出自动项目的顶部/底部时显示隐藏的项目
- 不是将新列表项推到底部,而是推到顶部
- 检测(事件)尝试在使用JavaScript或AngularJS页面顶部/底部时向上/向下滚动
- 滚动到顶部/底部按钮错误