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>

使用媒体查询通过CSS配置桌面，平板电脑和移动类。以下是确定应显示哪个div的示例（在本例中，示例是显示移动类div）：

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


    .tablet {
        display: none;
    }

    .mobile {
        display: inline;
    }
}

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

包含3种设备设计的页面（桌面设备，平板电脑和移动设备）

具有一种设备设计的页面（仅限桌面）

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

Answer 1

响应或响应不会对下载速度/大小产生任何影响。最大的瓶颈通常是按顺序加载的大量资产。

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

请记住，无论{display：none;所以要小心，也许使用js来设置你需要的图像。

多设备设计速度受到关注

1 个答案: