performance - 加载样式时提高性能(例如 styles.css)

Question

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

请引用以下截图， Compare the Search Menus

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>