如何使响应式网页渲染速度更快？

Question

现在，每次我尝试渲染页面时，我都会首先计算$(window).width()，然后为根html元素添加一个相应的类，这将最终确定一些块的宽度页面中的主要响应元素。但这种方法存在问题。它将首先使用初始默认宽度渲染页面，然后在添加类之后，它将调整元素宽度，这将创建不平滑的视觉效果。

为了解决这个问题，我首先制作了所有响应元素display: none，并在宽度计算完成后使它们可见。但对于用户来说，以这种方式查看页面需要更多时间。

所以我想知道是否有办法以更有效，更快捷的方式实现此响应式页面？

Answer 1

如果您使用javascript创建自适应网站，则有更简单的方法。

例如，您可以使用 TONS 基于免费CSS的框架来制作CSS控件的响应式页面，这些页面不会消耗几乎与javascript解决方案一样多的资源。 DOM对javascript的大量foundation操作很快就会变得很毛茸茸。

我的建议是调查以下内容：

• 基金会： http://foundation.zurb.com/index.html
• 骷髅： http://www.getskeleton.com/

我个人使用Javascript进行开发，因为它易于阅读/理解，并且可以快速开发。

示例： http://www.sinsysonline.com/secondhomehostel

如果您绝对没有设置DOM处理responsive渲染，那么它将比CSS {{1}}网站慢得多。

如果有，请尝试：

• 回复JS： http://responsejs.com/

如果您想进一步澄清具体问题，请提供您的代码，我很乐意就此提供一些反馈。

Answer 2

CSS媒体查询允许您根据屏幕大小应用CSS。这种方法优于您的方法：

1）CSS会立即读取窗口大小 2）如果用户调整窗口大小（或旋转平板电脑），页面将自动调整

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 3

您需要使用css3媒体查询，这对创建响应式网站非常有用。您需要根据视口宽度编写css。请参考link，您将从中获得有关响应式网站的所有想法。

我希望这有助于您在响应式网站上工作。