1

我项目的静态 html 页面有 javascript 动态修改的内容,这会导致 FOUC(无样式内容闪烁)。所以我默认让内容不可见,并在 DOM 准备好后将显示切换为可见。

静态 html 页面在我的本地驱动器上渲染得非常快,因此不可见状态和可见状态之间的时间差距并不明显。

但是,在项目与 WordPress 集成并放到远程服务器上后,页面渲染变得有点慢,因此时间差距变得更加明显。

当我单击超链接请求查看页面时,我希望 WordPress 在服务器端完成页面的重新渲染,然后向我显示该页面。等待 1 或 2 秒是可以的。WP能做到吗?

4

2 回答 2

1

我猜这个问题是你的 CSS 没有通过网络立即加载,所以有一段时间你的 HTML 被渲染了,但是你的 CSS 没有加载。

(它也可能是动态的 Javascript 内容——如果不了解更多关于您的 Wordpress 安装和配置的信息,我无法谈论它)

预加载你的 CSS 不是 Wordpress 自己可以做的,尽管你应该注意到在第一页加载之后,浏览器会缓存你的 CSS,而且速度更快。

如果您真的很担心,请查找一些优化技术,例如对 CSS 等静态内容使用快速 CDN。雅虎!例如,性能提示非常适合所有网站性能问题。

于 2012-06-29T09:30:04.437 回答
1

DOM Ready 在浏览器解析整个 HTML 后触发。这不仅仅是基本的 HTML 文件,它需要加载、解析和执行它在通过 HTML 时遇到的所有 css 和 javascript,然后才会触发事件(在 WP 的情况下是通常相当多)。

如果 WP 不在快速托管上(将其放在共享托管帐户上基本上只是乞求它慢一点),WP 本身生成 HTML 的速度也会很慢。像 W3TC 或 supercache 这样的页面缓存插件将有助于生成 HTML,但我敢打赌,你还有更多的前端活动会搞砸事情。

获取“高性能网站”的副本,然后在WebPagetest之类的东西上对页面进行一些测试,这将使您可以看到外部资源(并捕获页面加载的视频)。这本书对于任何前端工程师理解和详细介绍前端性能问题都非常重要。

于 2012-07-11T20:12:44.853 回答