Cordova app输入字段在输入时显示数据滞后

Question

我使用 node，angular，sqlite 创建了 cordova 应用。该应用包含多页表单。当我填写表单时，输入字段滞后表示他们花时间显示输入的数据。谁能告诉我这些问题的原因。 我的农场页面非常大意味着它包含大量的号码。分为四个部分的字段，然后通过让其他人隐藏然后最后提交它来逐个显示它们。

这是表格

<form name="signupForm" data-ng-submit="gotoAddress()">
    <div class="col-sm-12 col-xs-12  top-bottom-border"> <span class="heading">Personal Info</span>

    </div>
    <div class="col-sm-12 col-xs-12">
        <div class="form-group form-group-custom">
            <label class="form-tags-info-page" for="name">Name</label>
            <br>
            <input class="form-control" id="input-elements-info-page" placeholder="name" type="text" name="ufname" ng-pattern="/^[a-zA-Z0-9\-\s\,]{1,100}$/" ng-model="myForm.name" required>
            <div class="help-block" spellcheck="false" autocomplete="off">
                <p style="color: red" ng-show="signupForm.ufname.$dirty && signupForm.ufname.$touched && signupForm.ufname.$error.required">Name is required</p>
                <p style="color: red" ng-show="signupForm.ufname.$dirty && signupForm.ufname.$touched && signupForm.ufname.$error.pattern">Enter a valid Name</p>
            </div>
        </div>
        <div class="col-sm-12 col-xs-12 remove-all-padding">
            <div class="form-group col-sm-6 col-xs-6 remove-all-padding age-group" ng-class="{ 'has-error' : submitted && signupForm.age.$invalid }">
                <label class="form-tags-info-page" for="age">Age(in year)</label>
                <br>
                <input name="age" class="form-control" id="input-elements-info-page" type="number" ng-model="myForm.age" min="14" max="120" required>
                <span class="help-block" style="color:red" ng-show="signupForm.age.$dirty && signupForm.age.$invalid">
                                <span style="color:red" ng-show="signupForm.age.$error.required">Required!</span>
                <span style="color:red" ng-show="signupForm.age.$error.min">Minimum 14</span>
                <span style="color:red" ng-show="signupForm.age.$error.max">Invalid Age!</span>
                </span>
            </div>
            <div class="form-group col-sm-6 col-xs-6 remove-all-padding sex-group pull-right">
                <label class="form-tags-info-page" for="sex">Sex</label>
                <br>
                <select class="form-control" id="input-elements-info-page" ng-model="myForm.sex" required>
                    <option value="" selected disabled>Select Sex</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
            </div>
        </div>
        <div class="form-group" ng-class="{ 'has-error' : submitted && signupForm.ownership.$invalid }">
            <label class="form-tags-info-page">Ownership</label>
            <select name="ownership" data-ng-model="myForm.ownership" id="input-elements-info-page" placeholder="Select Annual Income" class="form-control" required>
                <option value="" selected disabled>Select Ownership</option>
                <option value="Owner">Owner</option>
                <option value="Successor">Successor</option>
                <option value="Blood-relative">Blood-relative</option>
                <option value="Contract-farmer">Contract-farmer</option>
            </select>
            <div ng-show="submitted && signupForm.ownership.$invalid" class="help-block">
                <p ng-show="signupForm.ownership.$error.required">Annual Income is required</p>
            </div>
        </div>
        <div class="form-group">
            <label class="form-tags-info-page" for="name">Father's Name</label>
            <br>
            <input class="form-control" id="input-elements-info-page" placeholder="father's name" type="text" name="fname" ng-pattern="/^[a-zA-Z0-9\-\s\,]{1,100}$/" ng-model="myForm.fathername" required>
            <div class="help-block">
                <p style="color: red" ng-show="signupForm.fname.$dirty && signupForm.fname.$touched && signupForm.fname.$error.required">Father's Name is required</p>
                <p style="color: red" ng-show="signupForm.fname.$dirty && signupForm.fname.$touched && signupForm.fname.$error.pattern">Enter a valid Father's Name</p>
            </div>
        </div>
        <div class="form-group" ng-class="{ 'has-error' : submitted && signupForm.mobile_no.$invalid }">
            <label class="form-tags-info-page" for="mobile">Mobile Number</label>
            <br>
            <input class="form-control" id="input-elements-info-page" type="number" name="mobile_no" placeholder="Mobile No" ng-model="myForm.mobile_no" ng-minlength="10" ng-maxlength="10" ng-pattern="/^[7-9]{1}[0-9]{9}/" required>
            <span class="help-block" style="color:red" ng-show="signupForm.mobile_no.$dirty && signupForm.mobile_no.$invalid">
                            <span style="color:red" ng-show="signupForm.mobile_no.$error.required">Required!</span>
            <span style="color:red" ng-show="signupForm.mobile_no.$error.minlength">Too short!</span>
            <span style="color:red" ng-show="signupForm.mobile_no.$error.maxlength">Too long!</span>
            <span style="color:red" ng-show="signupForm.mobile_no.$error.pattern">Invalid Mobile Number</span>
            </span>
        </div>

        <div class="form-group" ng-class="{ 'has-error' : submitted && signupForm.alt_mobile_no.$invalid }">
            <label class="form-tags-info-page" for="mobile">Alternate Mobile Number</label>
            <br>
            <input class="form-control" id="input-elements-info-page" type="number" name="alt_mobile_no" placeholder="Alternate Mobile No" ng-model="myForm.alt_mobile_no" ng-minlength="10" ng-maxlength="10" ng-pattern="/^[7-9]{1}[0-9]{9}/" required>
            <span class="help-block" style="color:red" ng-show="signupForm.alt_mobile_no.$dirty && signupForm.alt_mobile_no.$invalid">
                            <span style="color:red" ng-show="signupForm.alt_mobile_no.$error.required">Required!</span>
            <span style="color:red" ng-show="signupForm.alt_mobile_no.$error.minlength">Too short!</span>
            <span style="color:red" ng-show="signupForm.alt_mobile_no.$error.maxlength">Too long!</span>
            <span style="color:red" ng-show="signupForm.alt_mobile_no.$error.pattern">Invalid Mobile Number</span>
            </span>
        </div>
        <div class="form-group">
            <label class="form-tags-info-page" for="email">Email Id(optional)</label>
            <br>
            <input class="form-control" id="input-elements-info-page" placeholder="Email" type="email" ng-pattern="/^[A-Za-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/" ng-model="myForm.email">
            <div class="help-block">
                <p style="color: red" ng-show="signupForm.email.$dirty && signupForm.email.$touched && signupForm.email.$error.pattern">Enter a valid email address</p>
            </div>
        </div>
        <div class="form-group">
            <label class="form-tags-info-page" for="size">Family Size</label>
            <br>
            <select class="form-control" id="input-elements-info-page" ng-model="myForm.family_size" required>
                <option value="" selected disabled>Select Family Size</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">&gt;10</option>
            </select>
        </div>
        <form class="form-inline col-sm-12 col-xs-12 remove-all-padding">
            <div class="form-group col-sm-6 col-xs-6 age-group remove-all-padding">
                <label class="form-tags-info-page" for="land">LandArea</label>
                <br>
                <input class="form-control" id="input-elements-info-page" style="width:100%;" type="number" required ng-model="myForm.l_area">
            </div>
            <div class="form-group col-sm-6 col-xs-6 remove-all-padding sex-group pull-right">
                <label class="form-tags-info-page" for="size">Unit</label>
                <br>
                <select class="form-control" id="input-elements-info-page" style="width:100%;" ng-model="myForm.area_unit" required>
                    <option value="" selected disabled>Select Unit</option>
                    <option value="Acre">Acre</option>
                    <option value="Hactare">Hactare</option>
                    <option value="Bigha">Bigha</option>
                </select>
            </div>
        </form>
        <div class="form-group">
            <label class="form-tags-info-page" for="size">Language Preference</label>
            <br>
            <select class="form-control" id="input-elements-info-page" ng-model="myForm.language" required>
                <option value="" selected disabled>Select Language</option>
                <option value="english">English</option>
                <option value="hindi">Hindi</option>
                <option value="others">Others</option>
            </select>
        </div>
        <form class="form-inline col-sm-12 col-xs-12 remove-all-padding">
            <div class="form-group col-sm-6 col-xs-6 remove-all-padding ">
                <label class="form-tags-info-page col-sm-12 col-xs-12" for="uid_type">ID Type</label>
                <br>
                <select class="form-control col-sm-12 col-xs-12" id="input-elements-info-page" style="width:100%;" ng-model="myForm.farmerid_type">
                    <option value="" selected disabled>Select id Type</option>
                    <option value="Aadhar">Aadhar</option>
                    <option value="VoterID">VoterID</option>
                    <option value="Driving Licence">Driving Licence</option>
                </select>
            </div>
            <div class="form-group col-sm-6 col-xs-6 remove-all-padding sex-group">
                <label class="form-tags-info-page" for="uid_no">ID No.</label>
                <br>
                <input class="form-control" id="input-elements-info-page" type="text" style="width:100%;" ng-model="myForm.farmeruid_no" required>
            </div>
        </form>
        <div class="col-sm-12 col-xs-12 remove-all-padding">
            <div class="col-sm-12 col-xs-12 camera-img-wrapp">
                <div class="col-sm-6 col-xs-6"> <span ng-click="takePic()" class="glyphicon glyphicon-camera camera-pic"></span>

                </div>
                <div class="col-sm-6 col-xs-6"> <span ng-click="takeScan();" class="glyphicon glyphicon-camera camera-pic"></span>

                </div>
            </div>
            <div class="col-sm-12 col-xs-12">
                <div class="col-sm-6 col-xs-6" style="text-align:center;font-weight:bold;">
                    <p class="form-tags-info-page">Take Pic</p>
                </div>
                <div class="col-sm-6 col-xs-6" style="text-align:center;font-weight:bold;">
                    <p class="form-tags-info-page">Take Scan</p>
                </div>
            </div>
        </div>
        <div class="form-group col-sm-12 col-xs-12 remove-all-padding" ng-show="imageSrc || scanSrc">
            <div class="col-sm-4 col-xs-4 col-sm-offset-2 col-xs-offset-2"> <span ng-show="imageSrc"><img src="" id="myImage" style="width:100px;height:100px;"></span>

            </div>
            <div class="col-sm-4 col-xs-4 col-sm-offset-2 col-xs-offset-2"> <span ng-show="scanSrc"><img src="" id="myScan" style="width:100px;height:100px;"></span>

            </div>
        </div>
        <div class="form-group col-sm-12 col-xs-12">
            <div class="btn-group btn-next">
                <input class="btn btn-primary btn-lg" type="submit" value="Next">
            </div>
        </div>
    </div>
</form>

在创建Android应用程序字段名称时，fathername是滞后的。他们在几秒钟后显示我们正在输入的数据太多了。

Answer 1

由于你没有详细讨论你的问题，我不能详细说明我的答案。

如果您提供更多信息，我会尝试解释您的问题可能来自何处并调整我的答案：

Cordova在本机App中使用WebView容器，它基本上使用相同的引擎进行渲染，作为移动浏览器。浏览器的性能瓶颈是访问DOM元素（导致重排和重新渲染）。因此，您必须非常了解它可以创建与DOM api通信的性能问题。如果您的DOM更改需要超过16毫秒来呈现您的应用程序变得明显缓慢和缓慢。从60 fps下降，您的性能问题对用户来说越来越明显。

由于移动设备比台式机慢很多，因此您必须非常谨慎。

您可以将大量性能黑客应用到移动网络应用中。

这里有一些：https://quickleft.com/blog/4-steps-to-minimizing-rendering-issues-in-cordova-applications/

使用ReactJs并过度使用CSS转换，您可以获得几乎看似本机的~60fps应用程序。我对此有很好的经验。

EDIT1：我的提示： 使用ReactJs重建您的前端并避免过度使用框架。保持您的DOM结构清洁并使用CSS做动画（尽可能多地避免使用基于js的动画！）。在您开发过程中测量您的FPS并立即发现性能问题。要构建一个性能良好的原生应用程序，你将无法找到这种方法。

我希望这会有所帮助。