使用此系统布局网页有哪些潜在问题？

Question

由于CSS的许多限制和兼容性问题而感到沮丧,并且发现自己经常需要编写javascript代码以使我的网页按照我想要的方式进行布局,我想我可以通过完全放弃CSS来构建页面结构来简化未来的项目.

我编写了一个javascript库,它解析XML文件中指定的布局,并使用绝对定位和大小的非嵌套div将它们应用于HTML文档.因此,我们的想法是每个页面都有一个包含所有内容的HTML文件,一个XML文件,用于指定如何在页面上排列内容,以及一个用于表面样式的CSS样式表.

这是一个例子.(按下按钮以扩大布局.在所有主流浏览器的最新版本中测试.) 另一个.

该系统优雅地降级为普通html,甚至允许在禁用javascript的情况下单独设置样式.

在我看来,这种方法不仅消除了许多跨浏览器问题,而且还允许我以更少的工作实现更复杂的布局.例如,我的理解是,单独使用CSS无法完成以下操作,至少在没有嵌套div的情况下是这样:

1. 设置一个元素以填充其父容器中的可用宽度或高度.(这与宽度/高度不同:如果父容器中有其他元素,则为100%.)
2. 在任何容器内对齐任何元素顶部/中心/底部,左/中/右,即使其大小未知.
3. 在不增加元素大小的情
4. 自动将父元素中的所有元素设置为等间距.
5. 设置浮动元素的高度.同样,水平和垂直独立设置收缩包装行为.
6. 将元素设置为在列而不是行中浮动(CSS3似乎支持列,但浏览器兼容性不好)

尽管如此,我确信这被认为是亵渎神明的.那么,使用这个系统来布局网页有哪些潜在的问题呢？

编辑:代码在github上

Answer 1

“对 CSS 的许多限制和兼容性问题感到沮丧，并发现自己不断需要编写 javascript 代码来让我的网页按照我想要的方式布局”表明您要么错误地使用了 CSS，要么实际上没有投入足够的时间学习CSS的来龙去脉，让它做你想做的事（设置好的、通用的CSS很困难，就像编程JS一样，而且有一百万种方法会做错，就像编程JS一样）。

您的示例似乎基于 100% 高度页面工作。例如，一旦设置高度：100%，html这实际上相对容易。body一旦你这样做了，盒子的h/valigning就变得非常容易。

然后，回答你的问题：使用 JS 调用进行所有样式设置将比使用 CSS 昂贵得多，因此我强烈怀疑你的解决方案的性能会比良好的 CSS 或 CSS+JS 解决方案差得多。浏览器具有极其优化的代码来执行 CSS 触发的回流，而在 JavaScript 中执行相同的操作要慢几倍。使用 JS 进行特定样式，因为 CSS 缺乏功能，例如像您的示例一样进行框对齐，通常是必要的，但每次运行它时，它都必须在 JS 代码中重新运行完整算法，而不是使用本机编译器更快的回流库，可能可用于您想要实现的部分或全部布局。