提高加载样式(例如样式.css)时的性能

Question

如何避免加载时间，让用户看不到两种不同的样式？这可以在加载的前两秒观察到。

请参考以下截图，比较搜索菜单

Answer 1

在您的情况下，我会将菜单 CSS 设置为最初#menu select {visibility:hidden;}，然后在页面加载时更改回visibility:visible; - 使用 Javascript 或 jQuery，或在 CSS 样式表的末尾。

// Change menu select styles on load with jQuery
$(function() {
  $('#menu select').css('visiblity', visible');
});

或

<script>
  // Plain javascript hiding an entire menu div group
  document.getElementById('menu-container').style.visibility = "visible";
</script>

Answer 2

将CSS放在底部将使你的网页"白色"，直到加载所有样式表。

这会导致空白白屏问题。页面完全空白 直到下载底部的样式表，大约 6-10 此页面的秒数。浏览器正在等待样式表 在呈现页面中的其他任何内容之前加载，甚至是静态的 发短信。

与将 CSS 放在顶部进行比较

（来自高性能网站 - Steve Souders）