我正在构建一个单页应用程序（HTML5，JS，JQuery，Bootstrap），需要交换各种UI元素，从我的HTML中定义的默认布局（有很多孩子的div），以响应user prefs（在JS加载期间从localstorage加载）。
目前在$(document).ready()我正在使用$(somediv).append()或.prepend()移动这些元素。问题在于，用户可视地看到浏览器呈现HTML定义的默认布局，然后呈现新布局。我想a）使整个过程更有效率; b）在用户处于最终重新安排状态之前不向用户显示UI。
我能想到的可能解决方案是：
在HTML中将<body>定义为visibility:hidden，然后在使用visible完成DOM操作后将其更改为$(document).ready()
与1.相同，但使用display:none和display:block代替visibility
（可能有1或2个）$().detach()一旦DOM准备好，身体内部的一切，做我的操作，然后插入<body>
将<body>留空，将主体内容放在JS字符串中，然后将其加载到JQuery片段中，根据需要重新排列元素，然后将它们插入到正文中。这似乎不是一个好选择，因为它阻止我轻松编辑和预览HTML。
我希望尽可能减少浏览器的工作量，并尽快向用户显示最终结果。理想情况下，我想告诉浏览器在操作DOM之前不要进行任何初始HTML渲染，但我不认为这是可能的吗？
此外，这需要适用于桌面/平板电脑/手机上的各种浏览器。
答案 0 :(得分：0)
据我了解，更改visibility或display将是最有效的方式。
这样浏览器只需要用JS执行一些操作，并且大多数情况下（如果你的js不用太长时间）用户不会看到空白页太长时间。
您还可以显示“加载”消息，告诉您的访问者该网站会在一段时间内显示，并且确实有效。