Javascript 在显示第一页之前操作DOM的最有效方法是什么？

我正在构建一个单页应用程序（HTML5、JS、JQuery、Bootstrap），需要交换各种UI元素，从我的HTML中定义的默认布局（有很多子项的div）中交换，以响应用户prefs（在JS加载期间从localstorage加载）

当前在

$（document）.ready（）

中，我正在使用

$（somediv）.append（）

或

.prepend（）

来移动这些元素。问题在于，用户在视觉上看到浏览器呈现HTML定义的默认布局，然后呈现新布局。我希望a）使整个过程更加高效，b）在用户界面处于最终重新排列状态之前，不要向用户显示它

我能想到的可能解决办法是：

将

定义为

可见性：在HTML中隐藏
，然后在使用
$（document.ready（）完成DOM操作后将其更改为
可见

与1相同。但是使用

display:none

和

display:block

代替

可见性

（可能使用1或2）

$（）.detach（）

一旦DOM就绪，执行我的操作，然后插入到

将

保留为空，将主体内容放在JS字符串中，然后将其加载到JQuery片段中，根据需要重新排列元素，然后将它们插入主体中。这似乎不是一个好的选择，因为它阻止我轻松编辑和预览HTML

我希望尽可能减少浏览器的工作量，并尽快将最终结果显示给用户。理想情况下，我想告诉浏览器在操作DOM之前不要进行任何初始HTML呈现，但我认为这是不可能的

---

此外，这需要在桌面/平板电脑/手机上的各种浏览器上工作。

据我所知，更改

可见性或
显示将是最有效的方法

通过这种方式，浏览器只需要使用JS执行一些操作，并且在大多数情况下（如果JS不会花费太长时间），用户不会看到太长时间的空白页面

您还可以显示一条“正在加载”消息，告诉访问者站点将在一段时间内显示，并且它确实有效。
所述方法之间没有明显的性能差异，跨浏览器重新排序dom也不是问题。除此之外，它只是成为一个关于采取哪种方法的意见。挑一个试试