一进页面就加载js

当一进页面就加载 JavaScript 脚本时，这通常涉及到网页的加载和渲染过程，以及脚本的引入和执行方式。以下是对这一问题的基础概念解释、相关优势与劣势、类型、应用场景，以及可能遇到的问题和解决方案：

基础概念

网页加载时，浏览器会按照 HTML 文档的顺序逐行解析，并在遇到外部资源如 JavaScript 文件时尝试加载和执行它们。如果 JavaScript 被放置在 HTML 文档的头部（<head> 标签内），或者通过 async 或 defer 属性加载，它可能会在页面渲染的早期阶段就开始加载。

优势

早期执行：脚本可以尽早执行，对于需要立即运行的功能（如页面上的交互元素）非常有用。
减少后续请求：如果脚本被应用到页面上的元素，且这些元素很可能很快显示给用户，那么提前加载脚本可以减少后续的请求延迟。

劣势

阻塞渲染：如果没有使用 async 或 defer 属性，JavaScript 的加载和执行可能会阻塞 HTML 的解析和页面的渲染，导致用户看到空白页面的时间延长。
不必要的加载：如果脚本最终并未在页面上使用，或者用户快速离开页面，那么提前加载的脚本就是不必要的资源消耗。

类型

同步加载：默认情况下，JavaScript 是同步加载的，即浏览器会等待脚本加载完成并执行后才继续解析 HTML。
异步加载：通过 async 属性，脚本可以异步加载，即浏览器在加载脚本的同时继续解析 HTML，脚本加载完成后立即执行。
延迟加载：通过 defer 属性，脚本会在 HTML 解析完成后，但在 DOMContentLoaded 事件触发前执行。

应用场景

关键路径脚本：对于影响首屏渲染或用户首次交互的脚本，可以考虑提前加载。
非关键脚本：对于不影响首屏渲染的脚本，可以使用 async 或 defer 属性来优化加载性能。

可能遇到的问题和解决方案

问题：页面加载缓慢，用户看到空白页面的时间过长。

解决方案：

使用 async 或 defer 属性来异步加载非关键脚本。
将脚本放置在 HTML 文档的底部（</body> 标签前），这样可以让浏览器先渲染页面内容。
使用代码分割和懒加载技术，只在需要时加载特定的脚本。

示例代码：

<!-- 同步加载 -->
<script src="critical.js"></script>

<!-- 异步加载 -->
<script async src="non-critical.js"></script>

<!-- 延迟加载 -->
<script defer src="non-critical.js"></script>