php - Less.js 需要一秒钟来加载样式

Question

我的问题是，当您访问此页面http://www.executivetravelholdings.com时，页面样式会在一秒钟内加载。我希望它像使用常规 CSS 一样加载。我的头部样式表较少，主体底部的样式表较少。我使用的是 less.js 1.3.3 和 PHP 而不是 html。对此的任何帮助将不胜感激。

Answer 1

You're only supposed to use the client-side LESS renderer during development:

Client-side is the easiest way to get started and good for developing your LESS. For production and especially if performance is important, we recommend pre-compiling using node or one of the many third party tools.

LESS homepage

In practice, you can either:

1. Install Node.JS and render the file, then put the (static) compiled version and put it online.
2. Use a GUI app to compile the LESS file, like SimppLESS. Be sure that it's a recent version and that they've kept their internal LESS version up-to-date. (Easier)
3. If you're using something like PHP, there are PHP ports of the LESS compiler. That way, it's rendered server side and cached. (More convenient)

Answer 2

你永远不会像原生 css 一样快，因为脚本必须首先解析 css。然而，这种强大的 FOUC 形式来自这样一个事实，即您在正文中提供的脚本较少，因此在转换和应用样式之前会呈现完整的文档。解决方案是将less.js脚本放在头部。是的，这会减慢页面加载过程，但我认为这是更好的权衡。

就个人而言，我永远不会（至少对于生产环境）使用 js 版本，但总是在服务器端处理样式。想象一下，用户阻止了 javascript 或根本没有可用的 javascript。

Answer 3

有一个备份样式表，它至少将所有对象放在正确的位置并具有简单的格式。

这样，当较少出现时，变化就不那么明显了。

还要让用户浏览器和服务器（如果可能）缓存您的 less.js 输出。这样，您还可以改善导航。