js花了一些时间来加载样式


Less.js take a second to load styles

我的问题是,当你去这个页面http://www.executivetravelholdings.com页面样式加载就像一秒钟。我想让它像普通css一样加载。我有less样式表在头部和less.js在身体的底部。我使用的是less.js 1.3.3和PHP而不是html。对此的任何帮助都将不胜感激。

您只应该在开发期间使用客户端LESS渲染器:

客户端是最简单的入门方式,也很适合开发你的更少。对于生产,特别是如果性能很重要,我们建议使用node或众多第三方中的一个进行预编译工具。

少主页

在实践中,您可以:

  1. 安装Node.JS并渲染文件,然后将(静态)编译后的版本放到网上。
  2. 使用GUI应用程序编译LESS文件,如SimppLESS。确保它是最新的版本,并且他们已经保持了内部LESS版本的更新。(容易)
  3. 如果你正在使用PHP之类的东西,有LESS编译器的PHP端口。这样,它就呈现在服务器端并被缓存。(更方便)

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

就我个人而言,我绝不会(至少对于生产环境)使用js版本,但总是在服务器端处理样式。假设一个用户已经屏蔽了javascript或者根本没有javascript可用。

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

这样,当less开始时,变化就不那么明显了。

也有你的less.js输出缓存的用户浏览器和服务器(如果可能的话)。这样还可以改善导航。