使用Less CSS开发时页面加载瞬间无样式渲染问题求助

你遇到的无样式闪烁问题是客户端实时编译Less的典型现象：当前你通过less.min.js在浏览器端把.less文件编译为CSS，浏览器需要先下载、执行less.js，再拉取.less文件完成编译后才会应用样式，这段时间差就会导致页面初始加载时没有自定义样式。
另外你当前index.php的资源引入顺序存在逻辑错误：先加载navbar.php再加载header.php，会导致导航栏的HTML内容输出在<head>标签、所有样式资源之前，浏览器会优先解析无样式的导航内容，进一步放大了闪烁问题。

方案1（首推，彻底解决）：预编译Less为CSS后引入 #

放弃客户端实时编译的模式，本地开发时通过工具预编译.less文件为标准CSS文件，直接在页面引入编译后的CSS即可：

• 开发阶段可以用VS Code的Easy Less插件、Less官方命令行工具，配置修改.less文件时自动编译生成styles.css
• 替换header.php中的代码：
  1. 删掉<link rel="stylesheet/less" href="styles.less" />和<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
  2. 新增<link rel="stylesheet" href="styles.css" />
• 调整index.php的引入顺序，先加载header.php再加载navbar.php：

  <?php
      require 'header.php';
      require 'navbar/navbar.php';
  ?>
  

这个方案也是生产环境的标准用法，完全消除编译等待时间，不会再有闪烁问题。

方案2（保留客户端编译的临时优化）：增加加载状态遮挡 #

如果暂时需要保留客户端实时编译的开发模式，可以通过代码隐藏编译完成前的页面内容：

1. 在header.php的<head>标签最开头加入临时样式：

   <style>
     body {
       opacity: 0;
       transition: opacity 0.1s ease;
     }
   </style>
   

2. 在less.js引入之前新增Less配置，编译完成后显示页面：

   <script>
   less = {
     async: false,
     onReady: function() {
       document.body.style.opacity = '1';
     }
   };
   </script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
   

3. 同样调整index.php的引入顺序，先加载header.php再加载navbar.php。

内容的提问来源于stack exchange，提问作者Mike