Ruby on Rails 6.0(RC1)集成Bootstrap 4.3.1在Chrome渲染闪烁问题求助

这个问题本质是FOUC（Flash of Unstyled Content，无样式内容闪烁），根源在于你当前的CSS加载时机不对——Rails 6用Webpacker管理前端资源时，默认会把你在application.js里引入的Bootstrap CSS打包进JS文件，浏览器要等JS加载并执行后，才会动态把CSS插入到页面中。这就导致浏览器先渲染了原始无样式的HTML，等CSS加载完成后才应用样式，从而出现闪烁。而Safari和Edge的资源加载/渲染策略和Chrome、Firefox不同，所以没触发这个问题。

下面是具体的解决步骤：

方案1：单独提取并预加载Bootstrap CSS（推荐） #

这个方法把CSS和JS分离，让浏览器在页面加载初期就获取到样式文件，从根源避免FOUC。

1. 创建独立的样式入口文件
   在app/javascript目录下新建stylesheets文件夹，然后创建application.scss文件，内容如下：

// 引入Bootstrap的SCSS源文件（也可以直接引入编译好的CSS，SCSS更方便自定义）
@import "~bootstrap/scss/bootstrap";

2. 调整JS入口文件
   打开app/javascript/packs/application.js，移除原来引入Bootstrap CSS的代码（比如import 'bootstrap/dist/css/bootstrap.min.css'），保留JS相关的引入：

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

// 保留jQuery、Popper和Bootstrap JS的引入
import 'jquery';
import 'popper.js';
import 'bootstrap';

Rails.start()
Turbolinks.start()
ActiveStorage.start()

3. 开启Webpacker的CSS提取
   修改config/webpacker.yml，确保development环境下的extract_css设置为true（生产环境默认已经是true）：

development:
  <<: *default
  extract_css: true
  # 其他配置保持不变...

4. 在Layout的Head中引入CSS资源
   打开app/views/layouts/application.html.erb，在<head>标签内添加stylesheet_pack_tag，确保样式在页面加载初期就被加载：

<head>
  <!-- 其他meta标签、title等保持不变 -->
  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

注意：javascript_pack_tag可以留在</body>标签前，也可以放在<head>里加上defer属性，不影响样式加载。

方案2：优化资源加载优先级（快速临时修复） #

如果不想调整文件结构，可以通过预加载（preload）提升CSS的加载优先级，让浏览器优先获取样式文件：

在application.html.erb的<head>中添加：

<link rel="preload" href="<%= asset_pack_path 'application.css' %>" as="style">
<link rel="stylesheet" href="<%= asset_pack_path 'application.css' %>">

这个方法需要你已经开启了CSS提取（和方案1的步骤3一致），否则application.css文件不存在。

额外注意：Turbolinks的影响 #

如果页面切换时也出现闪烁，可以尝试禁用Turbolinks测试，或者确保样式文件在Turbolinks加载前就已经加载完成。另外，开发环境下的Webpack热重载可能会导致偶尔的闪烁，生产环境打包后这个问题会彻底消失。

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