页面优先渲染 flex中的order实现元素的排列顺序html页面渲染是从上到下依次渲染的。只要将要优先渲染的放在前面就

html页面渲染是从上到下依次渲染的。只要将要优先渲染的放在前面就好。通过布局再调整位置（flex的order实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*flex布局中 order 属性用来设置元素的排列顺序，数值越小，排列越靠前，默认为0*/
        .container {
            display: flex;
        }

        .left {
            order: 1;
        }

        .main {
            order: 2;
        }

        .right {
            order: 3;
        }
    </style>
</head>
<body>
<div class="container">
    <!--    会从上到下依次加载-->
    <!--    <div class="left">left</div>-->
    <!--    <div class="main">main</div>-->
    <!--    <div class="right">right</div>-->

    <!--   这样可以优先加载main。如果又希望布局顺序不变可以通过order实现-->
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>
</html>