Angularjs + Bootstrap：谷歌页面洞察测试答案

【问题标题】：Angularjs + Bootstrap: Google Page Insight testAngularjs + Bootstrap：谷歌页面洞察测试
【发布时间】：2015-12-11 08:29:40
【问题描述】：

我正在处理一个简单的 html 表单，我想优化页面加载时间。我正在使用 AngularJS 1.3.0-beta15 和 Twitter Bootstrap 3.2.0。

我解决了上面的 javascript/css 问题 延迟 javascript 加载（标记中的 defer 指令）和 内联 css（引导 css 代码在标签中缩小）

<head>
    [...]
    <style><?php include('bootstrap.min.css')?></style>
    <script defer src="angular.min.js"></script>
    <script defer src="app.js"></script>
</head>

在页面正文中，我使用了一个带有验证指令的简单表单。示例：

<form novalidate name="form" role="form">
    <div>
        <label class="control-label" for="name">Nombre*</label>
            <input type="text" ng-model="user.name" name="name" ng-minlength="3" ng-maxlength="20" required/>
            <p ng-show="form.name.$invalid && form.name.$dirty" class="help-block">Nome compreso tra 3 e 20 caratteri</p>
                </div>
    [...]

p 标签通过 ng-show 指令有条件地显示输入文本的错误。

实际上，使用此代码，谷歌页面洞察力得分是 97/100 在桌面平台上由 ng-show 元素引起。目标是在桌面平台上获得 100/100 分。洞察中提到的错误如下：

在屏幕截图中，ng-show 元素被突出显示。

【问题讨论】：

标签： javascript html css angularjs twitter-bootstrap

【解决方案1】：

您是否尝试过使用 ng-cloak？

https://docs.angularjs.org/api/ng/directive/ngCloak

将它们包含在该页面上的部分 CSS 添加到您网站的 CSS 中。然后，将“ng-cloak”类添加到您的 p 标签中。这将隐藏它们，直到 Angular 加载。然后 Angular 会移除 ng-cloak 类，项目会根据 ng-show 标签隐藏。

【讨论】：

如果该链接中的任何内容对于您的答案“完整”是必要的，您应该在答案中总结它，以防链接被破坏。

【解决方案2】：

我认为你应该尝试像服务器端渲染这样的东西，这样检查员会在第一次加载时“看到”所有真实内容。这是针对此问题的一个项目： https://github.com/saymedia/angularjs-server

【讨论】：

你能解释一下这个项目吗？