页面闪动问题通常在非工程化项目中出现，这是因为CSS和JavaScript资源需要在页面加载时从外部文件中加载，导致页面在加载完HTML后，再加载CSS和JavaScript文件，从而导致页面样式和行为的延迟加载。
解决非工程化项目初始化页面闪动问题的方法主要有以下几种：
- 使用内联CSS和JavaScript：将CSS和JavaScript代码直接嵌入到HTML文件中，而不是通过外部文件加载。这样页面加载时，CSS和JavaScript代码会随着HTML一同加载，避免了外部文件加载的延迟。但是这种方法可能会导致HTML文件变得很大，维护困难，适用于小型项目或临时解决方案。
- 将CSS放在头部，将JavaScript放在尾部：将CSS文件放在
<head>标签中，而将JavaScript文件放在<body>标签的末尾，这样可以保证CSS在页面渲染时尽早加载并应用样式，而JavaScript在页面加载完成后执行，从而避免页面闪动。 - 使用预加载和预渲染技术：使用
<link rel="preload">标签来预加载CSS文件，以及使用服务器端渲染（SSR）或静态站点生成（SSG）等技术来预渲染页面，从而提前生成完整的HTML页面，避免页面闪动和延迟加载。 - 使用CSS内联加载和异步加载JavaScript：将关键的CSS样式以内联方式放置在
<head>标签中，而将非关键的CSS和JavaScript以异步方式加载，通过<link rel="stylesheet">标签的media属性和<script>标签的async或defer属性实现。 - 使用现代前端工程化工具：建议使用现代前端工程化工具（如Vue CLI、Create React App等），它们会自动处理样式和脚本的加载顺序和异步加载，从而减少页面闪动问题。
总的来说，解决非工程化项目初始化页面闪动问题的关键是合理组织CSS和JavaScript的加载顺序，并使用预加载和预渲染等技术来优化页面加载性能。如果项目比较复杂，建议使用现代前端工程化工具，它们能够自动处理这些优化，让你专注于开发和业务逻辑。
