HTML 中 CSS 应该始终位于 JavaScript 之前吗？

应该始终让 CSS 优先于 JavaScript 吗？

传统观念：

长期以来，一种普遍的建议是将 CSS 放在 JavaScript 之前，理由是：

• 渲染线程需要呈现页面的所有样式信息。
• 如果 JavaScript 包含在前面，JavaScript 引擎必须先解析所有内容，然后再继续执行下一组资源。
• 这意味着渲染线程无法完全显示页面，因为它没有所需的所有样式。

实际测试：

然而，实际测试表明了截然不同的结果：

• JavaScript 不会开始执行，直到所有 CSS 都下载完毕。
• 因此，将 JavaScript 包含在前面似乎更有效，因为 JavaScript 线程可以运行更长的时间。

结论：

• 对于桌面浏览器：在现代浏览器中，将 CSS 放在 JavaScript 之前 不会带来性能提升。在某些情况下，甚至会导致性能下降（例如 CSS 延迟时）。因此，您应该在 JavaScript 之后**链接到外部样式表。
• 对于移动浏览器：证据表明，一些移动浏览器（例如 Android 版的 WebKit）仍然不会进行预测性解析。在这类浏览器上，将脚本放在 CSS 之前可能会造成性能损失。

技术解释：

• 历史悠久的浏览器会在遇到 <script> 标记时停止解析 HTML，下载脚本并执行它。而遇到 <link> 就会在获取 CSS 文件的同时继续解析 HTML。</script>
• 现代浏览器实现了预测性解析，其中浏览器会“预测”HTML并提前下载资源，包括脚本。

浏览器支持：

• 大多数现代桌面和移动浏览器（大约 85%）都支持预测性加载。

注意事项：

• 如果旧浏览器的性能不受关注，则在桌面浏览器上将脚本放在 CSS 之后是一个明智的选择。
• 在移动浏览器上，最佳实践可能仍因设备和操作系统而异。

以上是HTML 中 CSS 应该始终位于 JavaScript 之前吗？的详细内容。更多信息请关注PHP中文网其他相关文章！