Javascript 执行页面刷新时防止显示未设置样式的页面

加载页面时，如何防止页面显示未设置样式的视图？ 我认为这可能是因为加载不同JavaScript文件的顺序。 是否有最佳实践，例如在我自己的代码之前加载插件？ 应该在document.ready或windows.load之后调用每个jQuery/.js函数吗

谢谢

将为您提供一些关于本页起点的好主意。在您的计算机上运行时引用：

降低DOM元素的数量。页面上有1489个DOM元素。一个复杂的页面意味着需要下载更多的字节，这也意味着在JavaScript中访问DOM的速度较慢。减少页面上DOM元素的数量以提高性能

此页面有11个外部Javascript脚本。试着把它们合在一起。此页面有5个外部样式表。试着把它们合在一起。减少页面上组件的数量可以减少呈现页面所需的HTTP请求数量，从而加快页面加载速度。减少组件数量的一些方法包括：组合文件、将多个脚本组合成一个脚本、将多个CSS文件组合成一个样式表以及使用CSS精灵和图像映射

使用gzip压缩组件的F级。有15个纯文本组件应该被压缩发送。。。压缩通过减小HTTP响应的大小来减少响应时间。Gzip是目前可用的最流行和最有效的压缩方法，通常将响应大小减少约70%。今天大约90%的互联网流量通过声称支持gzip的浏览器传输

添加页眉时为F级。有61个静态组件没有很长的过期日期。。。。网页变得越来越复杂，上面有更多的脚本、样式表、图像和Flash。首次访问页面可能需要几个HTTP请求才能加载所有组件。通过使用Expires头，这些组件可以缓存，从而避免后续页面视图中不必要的HTTP请求。Expires标题通常与图像关联，但它们可以也应该用于所有页面组件，包括脚本、样式表和Flash

---

---

添加我自己的2美分：您可能希望隐藏所有元素，直到整个页面加载。这似乎是您使用进度条的目的，但是页面上的元素和脚本/样式的数量似乎阻止了进度条的使用。您可以加载CSS/JS/HTML的最小子集来设置进度条，然后在一些异步Javascript中加载其余元素，只在加载完所有元素后显示整个页面（一个la Gmail）。

我假设您使用的是外部样式表？ 如果您只是将所有样式嵌入页面中，它将不会显示为未设置样式。

---

另外，将样式表定义放在标题中任何javascript代码之前。

它通常被称为未设置样式内容的FOUC-Flash。上述答案中的选项意义重大，但在所有情况下都可能无法消除。最初它是一个IE问题，但最近在Safari中发生了很多，可能与浏览器应用程序本身中使用的底层方法有关，因此可能无法修复

---

有时候，jQuery和typekit等加载项可能会加剧问题，因此需要密切关注并测试加载它们的不同场景。

站点的主要问题是，您试图在初始页面加载时一次性加载所有内容。Web developer toolbar的文档大小报告显示总共有1.1mb的内容，即将近750kb的图像和385kb的脚本。不建议一次性加载此数量的内容，尤其是对于较慢的连接速度

显而易见的解决方案是隐藏所有内容，只在脚本准备好时才显示，但这是一个非常糟糕的解决方案-访问者将看到10秒或更长时间的空白页面。你应该做的是重组网站——重新思考你的架构。网站不应该一次下载——数据太多，这也是用户不喜欢Flash网站的原因之一，因为Flash必须一次下载所有资产，因此用户不得不坐在那里等待很长时间

您应该将页面分解为常规加载的HTML文档，或者使用ajax按顺序加载内容。让您的脚本智能地重新排序内容的加载—首先是首页内容，然后当用户选择要去哪里时，他背后的站点将加载这些页面的资产。图片是这里的大问题-你有.7mb的图片，加载所有图片会在很长一段时间内阻止站点的加载，包括脚本的加载

无论如何，这不是一项容易的任务，但这是解决问题的最佳方法

---

您的问题的一些更直接的解决方案包括“Matt B”所说的大部分内容——启用GZIP压缩，将所有脚本和样式表组合成单个文件等。您还应该考虑使用CSS精灵来减少图像的HTTP请求数。有大量jQuery插件是整合的主要候选插件，您还需要加载两次jQuery，这增加了您需要加载的内容的近100kb

没错，但这本身，内部样式表，在开发中有相关的问题，设计中的pagg加载灵活性等等。这可能超过FOUC。好的，我使用了Yslow，缩小了我的Javascript，并将所有外部.js放在一个文件中。->总体表现得分从60分上升到73分。但是FOUC（如下所述）仍然存在……事实上，我实现了加载p的进度条/插件