Question

我正在构建一个网页，我做了一些JS计算和样式来制作奇特的东西。但是，我被FOUC困住了。首先，我调用所需的样式，然后根据JS计算我更改div上的一些填充和边距。这导致页面的某种闪烁。要忽略这一点，我想将display:none或visibility:hidden设置为body元素，直到计算完成，然后显示页面。

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <!-- These meta tags come first. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Theme Example</title>

    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/styles.css" rel="stylesheet">

    <script src="assets/js/modernizr-custom.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $('body').hide();
        // ... do calculations and styling ...
        $('body').show();
    </script>
</head>

这会影响SEO吗？还有其他方法可以解决这个问题吗？

Answer 1

只要您没有隐藏关键字或使用内容发送垃圾邮件，就不会有任何问题。

您可以在Google Webmaster Central论坛上查看此主题：

“仅使用display：none不会自动触发惩罚。关键是是否存在机制 - 自动或一个由用户调用的内容 - 使内容可见.Google 正在变得非常擅长处理JavaScript以查找和解释这样的机制。如果您使用有效的HTML，CSS和JavaScript 没什么好担心的。祝你好运！“

希望这有帮助。

显示：无或可见性：在页面加载时隐藏在body元素上 - 它是否会影响SEO？

1 个答案: