多设备设计速度问题

Question

我的工作场所目前正在使用具有多设备设计的 MEAN（Mongo、Express、Angular、Node.js）堆栈。他们决定不使用响应式设计，我认为在完成所有工作后转换为响应式设计太费力了。这是我的页面结构示例：

<html>
    <head>...</head>
    <body>
        <div class="desktop">
            ...
        </div>
        <div class="tablet">
            ...
        </div>
        <div class="mobile">
            ...
        </div>
    </body>
</html>

台式机、平板电脑和移动设备 class 正在通过 CSS 使用媒体查询进行配置。下面是一些确定应显示哪个 div 的示例（在本例中，示例是显示移动设备 class divs）：

@media (max-width: 760px) {
    .desktop {
        display: none;
    }


    .tablet {
        display: none;
    }

    .mobile {
        display: inline;
    }
}

现在一开始为不同的设备开发不同的布局更容易，但结果是：加载时间变慢了。我尝试了一种单一设备设计，它在标签中只有一个桌面 class div。这是两个不同结构的页面的速度比较：

具有 3 种设备设计（台式机、平板电脑和移动设备）的页面

采用一种设备设计的页面（仅限桌面）

那么问题来了，除了转向响应式设计之外，是否有任何解决方案可以使页面加载速度更快？我已经减少了图片和外部文件导入等大资源。

Answer 1

响应式或 not-responsive 不会对下载有任何影响 speeds/sizes。最大的瓶颈通常是顺序加载的大量资产。

你的数字也表明了这一点。两者的下载大小都是 ~45kb，但是第一个是按顺序加载的。检查它是什么，捆绑在一起 css/js，使用 sprites/icon 字体。

请记住，不管{display: none; } 所以要小心，也许使用 js 只设置你需要的图像。

多设备设计速度问题

Multi-device design speed concern

html

css

performance

responsive-design

mean-stack