Question

我已经开发了这个网站。

如果单击上面的标签。它会在没有样式的情况下显示网站一毫秒，然后进行渲染。我尝试了所有操作，并从控制台中删除了所有错误和警告，但仍然会发生。它不应该这样做，因为如果互联网速度较慢，它可能会给人负面的印象，那么它可能会存在一段时间。

布局/母版页代码：

更新：

JS，css文件的新排序，即我先放置Now jQuery，然后是Bootstrap和其他插件。渲染正文后，我将Css放在页面和脚本的开头。好心检查。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google Tag Manager -->
    <script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || []; w[l].push({
                'gtm.start':
                    new Date().getTime(), event: 'gtm.js'
            }); var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
                    'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-W9FNBLV');</script>
    <!-- End Google Tag Manager -->
    <!--  -->
    <!--    Document Title-->
    <!-- =============================================-->
    <!--<title>Velosi | Asset Integrity Ltd.</title>-->
    <title>@ViewBag.Title</title>
    @RenderSection("head", false)
    <!--  -->
    <!--    JavaScripts-->
    <!--    =============================================-->

    @*<script src="~/Scripts/modernizr-2.8.3.js"></script>*@
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <link href="~/Content/Theme/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,600,700,800" rel="stylesheet" />
    <link href="~/Content/Theme/lib/iconsmind/iconsmind.css" rel="stylesheet">
    <link href="~/Content/External/css/ionicons.min.css" rel="stylesheet" />

    <link rel="apple-touch-icon" sizes="180x180" href="~/Content/Theme/images/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="~/Content/Theme/images/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="~/Content/Theme/images/favicons/favicon-16x16.png">
    <link rel="shortcut icon" type="image/x-icon" href="~/Content/Theme/images/favicons/favicon.ico">
    @*<link rel="manifest" href="~/Content/Theme/images/favicons/manifest.json">*@
    <link rel="mask-icon" href="~/Content/Theme/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileImage" content="~/Content/Theme/images/favicons/mstile-150x150.png">
    <meta name="theme-color" content="#ffffff">
    <!--  -->
    <!--    Stylesheets-->
    <!--    =============================================-->
    <!-- Default stylesheets-->
    <!-- Template specific stylesheets-->
    <link href="~/Content/Theme/lib/loaders.css/loaders.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,600,700,800" rel="stylesheet">
    <link href="~/Content/Theme/lib/iconsmind/iconsmind.css" rel="stylesheet">
    <link href="~/Content/External/css/ionicons.min.css" rel="stylesheet" />
    <link href="~/Content/Theme/lib/hamburgers/dist/hamburgers.min.css" rel="stylesheet">
    <link href="~/Content/Theme/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="~/Content/Theme/lib/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="~/Content/Theme/lib/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet">
    <link href="~/Content/Theme/lib/remodal/dist/remodal.css" rel="stylesheet">
    <link href="~/Content/Theme/lib/remodal/dist/remodal-default-theme.css" rel="stylesheet">
    <link href="~/Content/Theme/lib/flexslider/flexslider.css" rel="stylesheet">
    <link href="~/Content/Theme/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet">
    <link href="~/Content/Theme/Toaster/toastr.css" rel="stylesheet" />
    <!-- Main stylesheet and color file-->
    <link href="~/Content/Theme/css/style.css" rel="stylesheet">
    <link href="~/Content/Theme/css/custom.css" rel="stylesheet">
    <!-- DataTable -->
    <link href="~/Content/Theme/DataTables-1.10.18/css/dataTables.bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Theme/FixedHeader-3.1.4/css/fixedHeader.bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Theme/Responsive-2.2.2/css/responsive.bootstrap.min.css" rel="stylesheet" />
    <!-- Datepicker -->
    <link href="~/Content/Theme/select2/dist/css/select2.min.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />

    @RenderSection("scripts", required: false)

    <script src="~/Scripts/modernizr-2.8.3.js"></script>
    <script src="~/Scripts/popper.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Content/Theme/lib/imagesloaded/imagesloaded.pkgd.min.js"></script>
    <script src="~/Content/Theme/lib/gsap/src/minified/TweenMax.min.js"></script>
    <script src="~/Content/Theme/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script>
    <script src="~/Content/Theme/lib/CustomEase.min.js"></script>
    <script src="~/Content/Theme/js/config.js"></script>
    <script src="~/Content/Theme/js/zanimation.js"></script>
    <script src="~/Content/Theme/lib/owl.carousel/dist/owl.carousel.min.js"></script>
    <script src="~/Content/Theme/lib/remodal/dist/remodal.js"></script>
    <script src="~/Content/Theme/lib/lightbox2/dist/js/lightbox.js"></script>
    <script src="~/Content/Theme/lib/flexslider/jquery.flexslider-min.js"></script>
    <script src="~/Content/Theme/js/core.js"></script>
    <script src="~/Content/Theme/js/main.js"></script>
    <script src="~/Content/External/js/jquery.slidereveal.min.js"></script>
    <!-- DataTable -->
    <script src="~/Content/Theme/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
    <script src="~/Content/Theme/DataTables-1.10.18/js/dataTables.bootstrap.min.js"></script>
    <script src="~/Content/Theme/FixedHeader-3.1.4/js/dataTables.fixedHeader.min.js"></script>
    <script src="~/Content/Theme/Responsive-2.2.2/js/dataTables.responsive.min.js"></script>
    <script src="~/Content/Theme/Responsive-2.2.2/js/responsive.bootstrap.min.js"></script>
    <!-- Datepicker -->
    <script src="~/Content/Theme/select2/dist/js/select2.min.js"></script>
    <script src="~/Content/Theme/Toaster/toastr.js"></script>


    <!--    Favicons-->
    <!--    =============================================-->





</head>
<body data-spy="scroll" data-target=".inner-link" data-offset="60">
    <!-- Google Tag Manager (noscript) -->
    <noscript>
        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W9FNBLV"
                height="0" width="0" style="display:none;visibility:hidden"></iframe>
    </noscript>
    <!-- End Google Tag Manager (noscript) -->

    <main>
        <div class="loading" id="preloader">
            <div class="loader h-100 d-flex align-items-center justify-content-center">
                <div class="line-scale">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
        @Html.Partial("_Header")


        @*<button class="btn btn-md btn-round btnEmailUs RequestCallBackIcon" id="trigger"><i class="fa fa-phone fa-lg"></i></button>*@
        <div style="display: flex; justify-content: flex-end;" class="m-2">
            <button class="right btn btn-md btn-round btnEmailUs1 RequestCallBackIcon" id="trigger"><i class="fa fa-phone fa-lg"></i></button>
        </div>


        <div id='slider' class="card text-white bg-dark EnquiryLowerBody" style="max-width: 20rem; display:none;">
            <div class="card-header header-callback">Request Callback</div>
            @using (Html.BeginForm("EnquiryForm", "Home", null, FormMethod.Post, new { @class = "mt-3" }))
            {
                <div class="card-body CardBody">
                    <div class="form-group">
                        <div class="col-md-12">
                            <input type="text" id="name" name="name" oninput="this.value = this.value.replace(/[0-9]/, '');" class="form-control" placeholder="Your name" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <input type="text" oninput="this.value = this.value.replace(/[^0-9]/g, '');" id=" mobileno" name="mobileno" class="form-control" placeholder="00971 XX XXXXXXX" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <input type="email" id="email" name="email" class="form-control" placeholder="name@domain.com" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <select class="d-flex flex-wrap" name="MainServiceName" id="MainServices">
                                <option selected value="m-None">-Select-</option>
                                <option value="m-SS">Software Services</option>
                                <option value="m-AIMS">Asset Integrity Management Services</option>
                                <option value="m-HSE">HSE & Environmental Services</option>
                                <option value="m-ES">Engineering Services</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                    </div>

                    <div id="divSubServices" class="form-group">
                        <div class="col-md-12">
                            <select class="d-flex flex-wrap" name="SubServiceName" id="SubServices">

                                <option class="" selected value="s-None">-Select-</option>
                                <option class="SoftwareServices" value="s-AIMS">VAIL-Plant (Asset Integrity Management System)</option>
                                <option class="SoftwareServices" value="s-PHA">VAIL-PHA (Process Hazard Analysis)</option>
                                <option class="SoftwareServices" value="s-PSRA">VAIL-PSRA (Petrol Station Risk Assessment)</option>
                                <option class="SoftwareServices" value="s-MTS">VAIL-MTS (Material Tracking System)</option>

                                <option class="AIMS" value="s-RBI">Risk Based Inspection (RBI)</option>
                                <option class="AIMS" value="s-RCM">Reliability Centered Maintenance(RCM)</option>
                                <option class="AIMS" value="s-SIL">Safety Integrity Level (SIL)</option>
                                <option class="AIMS" value="s-PIMS">Pipeline Inspection Management System (Onshore & Offshore)</option>

                                <option class="HSE" value="s-HSECES">Health, Safety & Environmental Critical Equipment Systems (HSECES)</option>
                                <option class="HSE" value="s-AM">Risk Assessment & Management</option>
                                <option class="HSE" value="s-OH">Occupational Health</option>
                                <option class="HSE" value="s-EMP">Emergency Management & Planning</option>
                                <option class="HSE" value="s-HS">HSEIA Studies</option>
                                <option class="HSE" value="s-ES">Environmental Services</option>

                                <option class="EngineeringServices" value="s-FFS">Fitness for Services(FFS)</option>
                                <option class="EngineeringServices" value="s-CDFDECS">Conceptual Design, FEED, Detailed Design and Engineering Consultancy Services</option>
                                <option class="EngineeringServices" value="s-OMP">Operating Manuals & Procedures</option>
                                <option class="EngineeringServices" value="s-DVA">Design Verification & Appraisal</option>
                                <option class="EngineeringServices" value="s-ABDS">As-Built Drafting Services</option>

                                <option value="Other">Other</option>
                            </select>
                        </div>
                    </div>

                    <div id="divDescription" class="form-group">
                        <div class="col-md-12">
                            <input type="text" id="Description" name="Description" class="form-control" placeholder="Description">
                        </div>
                    </div>
                    <div id="divDescription" class="form-group">
                        <div class="col-md-12">
                            <button id="btnSubmit" class="btn btn-primary BtnSubmitEnquiry">Submit</button>
                        </div>
                    </div>

                </div>
            }

        </div>

        @RenderBody()
        <div id="cookieConsent">
            <div id="closeCookieConsent">x</div>
            We use tools, such as cookies, to enable essential services and functionality on our site and to collect data on how visitors                   interact with our site, products and services. <a class="cookieConsentOK">Got it</a>
        </div>

        @Html.Partial("_Footer")

    </main>
    <!--  -->

</body>
</html>

<script type="text/javascript">
    $(document).ready(function () {

        $("#divDescription").hide();
        $("#divSubServices").hide();

        if (!localStorage.getItem('firstVisit')) {

            localStorage.setItem('firstVisit', 'true');

            setTimeout(function () {
                $("#cookieConsent").fadeIn(200);
            }, 4000);
            $("#closeCookieConsent, .cookieConsentOK").click(function () {
                $("#cookieConsent").fadeOut(200);
            });
        }
    });

    window.addEventListener('mousewheel', function (e) {
        e.preventDefault();
    }, { passive: false });

    $("#trigger").click(
        function()
        {
            $("#slider").show();
        }
    );

    $("#slider").slideReveal({
        trigger: $("#trigger"),
        position: "right",
        push: false,
        overlay: true

    });



    $("#MainServices").change(function () {
        var OptionSelected = $(this).find("option:selected");
        var ValueSelected = OptionSelected.val();

        if (ValueSelected == "Other") {

            $("#SubServices").val("s-None");
            $('#divSubServices').hide();
            $('#divDescription').show();

        }
        else {
            $('#divSubServices').show();
            $('#divDescription').hide();
        }

        //Software Services

        if (ValueSelected == "m-None") {

            $("#SubServices").val("s-None");
            $('#divSubServices').hide();

            return;
        }

        if (ValueSelected == "s-None") {

            $('#divDescription').hide();

            return;
        }

        if (ValueSelected == "m-SS") {

            $("#SubServices").show();
            var drpSubServices = $('#SubServices');

            drpSubServices.children('option[class=SoftwareServices]').show();

            drpSubServices.children('option[class=HSE]').hide();

            drpSubServices.children('option[class=AIMS]').hide();

            drpSubServices.children('option[class=EngineeringServices]').hide();

            return;

        }

        //AIMS
        if (ValueSelected == "m-AIMS") {

            $("#SubServices").show();

            var drpSubServices = $('#SubServices');

            drpSubServices.children('option[class=SoftwareServices]').hide();

            drpSubServices.children('option[class=HSE]').hide();

            drpSubServices.children('option[class=AIMS]').show();

            drpSubServices.children('option[class=EngineeringServices]').hide();

            return;

        }

        //HSE
        if (ValueSelected == "m-HSE") {

            $("#SubServices").show();

            var drpSubServices = $('#SubServices');

            drpSubServices.children('option[class=SoftwareServices]').hide();

            drpSubServices.children('option[class=HSE]').show();

            drpSubServices.children('option[class=AIMS]').hide();

            drpSubServices.children('option[class=EngineeringServices]').hide();

            return;

        }

        //Engineering Services
        if (ValueSelected == "m-ES") {

            $("#SubServices").show();

            var drpSubServices = $('#SubServices');

            drpSubServices.children('option[class=SoftwareServices]').hide();

            drpSubServices.children('option[class=HSE]').hide();

            drpSubServices.children('option[class=AIMS]').hide();

            drpSubServices.children('option[class=EngineeringServices]').show();

            return;

        }
    });

    $("#SubServices").change(function () {
        var OptionSelected = $(this).find("option:selected");
        var ValueSelected = OptionSelected.val();
        if (ValueSelected == "Other") {

            $('#divDescription').show();

        }
        else {

            $('#divDescription').hide();
        }
    });

    $("#btnSubmit").click(function () {

        var name = $("#name").val();
        var email = $("#email").val();
        var mobileno = $("#mobileno").val();
        var MainServiceName = $("#MainServices").find(":selected").text();
        var SubServiceName = $("#SubServices").find(":selected").text();
        var Description = $("#Description").val();


        var EnquiryForm = {
            'name': name,
            'email': email,
            'mobileno': mobileno,
            'MainServiceName': MainServiceName,
            'SubServiceName': SubServiceName,
            'Description': Description
        }
        //alert(EnquiryFormViewModel.name);
        @*$.post("/Home/EnquiryForm", EnquiryForm, function(returnedData) {
            //alert(returnedData.data);

            window.location.href= '@Url.Action("Thankyou", "Others", new {message= "Thank you for contacting us. We'll get back to you soon." })';

        });*@

    });




</script>

Answer 1

将所有正在加载样式表的link标签放在正在加载javascript文件的script标签之前。

实际上，您应该从head中取出js文件，并将其放在body标签的结尾附近

Answer 2

当您创建包含大量添加元素的页面时，这是挑战。通常，这不是问题，而是所有需要在页面加载过程中进行分析和处理的问题。首先修复“基本”问题，然后看情况如何，然后移至对负载性能产生负面影响的下一组“事物”。

让我们从这里展示的一些具体问题开始，然后再谈一些一般性的问题。

永远不要将诸如AS SCRIPT之类的标签或其他任何内容放置在HTML文档之外-这样做时，您会迫使浏览器将其放置/移动到正文中。大多数浏览器都使用这种无效的HTML进行操作，但是为什么不以有效的HTML开头呢？
在脚本标记之前放置CSS
首先按“库”的顺序放置CSS-出于某种原因，您包含了一个库，但级联序列并不重要-由于“级联”，这样做甚至可能使您的OWN CSS更简单-将其视为下坡，您的东西在山底。（{jQuery，然后是bootstrap，然后是plugins，然后是您的等等）
将JavaScript库代码放在您的代码之前-尽可能将其全部放在页面底部，尤其是您的代码。

一般评论：

每当您执行drpSubServices.children(someselector').hide();之类的操作时，您都会遇到DOM，这可能只是问题的一部分，但肯定会有所帮助。
通常，JavaScript库提供了一些方法来为组合在一起的事物创建“合并的”捆绑软件-尝试将它们作为一项而不是多个.js文件包含在内
在JavaScript中删除注释掉的代码-这是源代码管理的目的，请勿在渲染过程中强制浏览器解析垃圾。给我的空白行也属于此类。
考虑在构建过程中或在此之前创建最小化的JavaScript代码版本。
“模块化”您的代码-看来您正在使用MVC，因此请创建部分内容视图，并仅在需要时才包含这些视图。将所有CSS和JavaScript放在每个页面上会对不使用它的页面产生负面影响。（在这种情况下，请参见.min注释-对于重用内容甚至更重要）
更好地设置格式-您真的需要HTML中的6个空行吗？没有。 -不太可能是一个大问题，但是为什么呢？（浏览器被迫解析不需要的内容）
如果它可以帮助您包括空白行，也许可以创建局部视图？（模块化代码？）（更多帮助您，而不是浏览器）
- 请勿使用经过解析的注释，例如，例如，您在此处使用MVC时，请考虑使用“未渲染的”注释，而应使用这些MVC注释来代替How to write a comment in a Razor view?

如何合并DOM命中：（可能不是特定于加载，但如果事件触发了它，则是

）

仅一次击打DOM：

缓存项目：在这里您可以DID，但是反转这些行不会两次击中DOM：

$("#SubServices").show();
var drpSubServices = $('#SubServices');

新：

var drpSubServices = $('#SubServices');
drpSubServices.show();

一次只能执行一次文件填充

drpSubServices.children('option[class=HSE]').hide();
drpSubServices.children('option[class=AIMS]').hide();
drpSubServices.children('option[class=EngineeringServices]').hide();
... more code like that

更好：（不是全部，只打一次），有几种方法可以做到这一点

drpSubServices.children('option[class=HSE]').hide();// NOT a fast selector
drpSubServices.children('.HSE').hide();//faster selector but...still

点击DOM一次：

let options = drpSubServices.children('option');
options
  .filter('.HSE,.AIMS,.EngineeringServices,.TPIs,.IIS,.NDTCM')
  .hide();
options.filter('.SoftwareServices').show();

//OR better, just hide all and show the one
let options = drpSubServices.children('option');
options.hide();
options.filter('.SoftwareServices').show();

请勿继续重新创建对象：

if (ValueSelected == "m-SS") {
    $("#SubServices").show();
    var drpSubServices = $('#SubServices');

做一次

    let drpSubServices = $('#SubServices');

    //NOW all the conditionals
    if (ValueSelected == "m-SS") {
        drpSubServices.show();

最后暴露一些东西

    let drpSubServices = $('#SubServices');
    if (ValueSelected == "m-SS") {
        let options = 
           //... (see above for that)
        // THEN show it
        drpSubServices.show();

另一个例子：

$("#divDescription")
  .add("#divSubServices")
  .hide();

或者考虑一个类似“ .hidden {display：none;} on an element initially我不显示`

然后在需要时切换该类

$("#divDescription").toggleClass('hidden',conditional);
//or
$("#divDescription").toggleClass('hidden',false);
//or
$("#divDescription").removeClass('hidden');

为什么我的网站在显示样式页面之前没有样式就显示元素？

2 个答案:

如何合并DOM命中：（可能不是特定于加载，但如果事件触发了它，则是