Question

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

我解决了上述javascript / css问题 推迟javascript 加载（标记中的defer指令）和内联css （标签中缩小的bootstrap 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 指令有条件地显示输入文本的错误。

实际上，使用此代码，由ng-show元素导致Google桌面深度分数在桌面平台上 97/100。目标是在桌面平台上获得100/100分。来自见解的错误如下：

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

Answer 1

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

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

将该网页上包含的CSS位添加到您网站的CSS中。然后，添加＆＃39; ng-cloak＆＃39;类到你的p标签。这将隐藏它们直到Angular加载。然后Angular将删除ng-cloak类，并且将根据ng-show标签隐藏项目。

Answer 2

我认为你应该尝试像服务器端渲染这样的方式，这样检查员就可以看到＆＃34;＆＃34;第一次加载中的所有实际内容。这是一个针对此问题的项目： https://github.com/saymedia/angularjs-server

Angularjs + Bootstrap：Google Page Insight测试

2 个答案: