（翻译）将样式表放在脚本前的原因

最新推荐文章于 2022-05-04 18:02:45 发布

gc_2299

最新推荐文章于 2022-05-04 18:02:45 发布

阅读量108

点赞数

分类专栏： UX Movement网站文章翻译文章标签：样式表脚本

原文链接：https://uxmovement.com/content/why-you-should-place-style-sheets-before-scripts/

版权

UX Movement网站文章翻译专栏收录该内容

176 篇文章 7 订阅

订阅专栏

网站设计最佳实践不仅存在于用户界面中，也存在于代码所在的后端。样式表和脚本的放置位置会影响站点加载的方式。
如果想让网站加载的快一点，可以将CSS样式表放在<head>标签前面，同时将脚本放在网页最后。这样会使浏览器首先加载CSS样式表，以便用户可以看到网站加载的内容，不用盯着空白的页面。[1]
这种做法会让用户觉得页面加载得比实际要快。所有这些都发生在浏览器执行页面底部的JavaScript 脚本之前。[2]

在这里插入图片描述
如果将JavaScript脚本放在页面顶部，由于<script>标签阻塞了并行下载操作，在JavaScript脚本完成加载前，用户只能对着空白页面干瞪眼。这意味着页面中的可视化元素不会在JavaScript脚本完成下载前出现。脚本完成下载后，用户会看到无样式内容一闪而过，同时页面元素在屏幕上移动。[3]
让用户等待网站内容出现以及看到无样式内容算不上好的用户体验。将上述最佳实践应用到后端代码中，用户就不会抱怨网站的加载速度了。

PS：2012年的文章，不知道现在还管不管用，仅供参考。

原文地址：https://uxmovement.com/content/why-you-should-place-style-sheets-before-scripts/

[1]原文：If you want your site to load faster, place your CSS at the top in the section and JavaScript at the bottom. This allows the browser to load your CSS first, so that users can see the content on your site load. Users won’t find themselves staring at a blank white page.
[2]原文：This works as visual feedback to make users feel like the page has loaded quicker than it really has. All of this happens before executing the JavaScript at the bottom of the page.
[3]原文：If you put your JavaScript at the top of the page and CSS at the bottom, users will have to stare at a blank white page until the JavaScript finishes loading because