JavaScript 文件在页面渲染中的加载机制详解

JavaScript 文件在页面渲染中的加载机制详解

1. 基本加载流程

当浏览器解析 HTML 遇到 <script> 标签时,会按照以下顺序处理:

graph TD A[HTML 解析] --> B[遇到 script 标签] B --> C{是否 defer/async?} C -->|否| D[停止 HTML 解析] D --> E[下载 JS 文件] E --> F[执行 JS 代码] F --> G[恢复 HTML 解析] C -->|defer| H[异步下载,延迟执行] C -->|async| I[异步下载,立即执行]

2. 不同 script 加载模式的对比

加载方式 HTML 解析是否阻塞 JS 执行时机 执行顺序保证
普通 script 阻塞 下载完成后立即执行 按文档顺序
async script 不阻塞 下载完成后立即执行 不确定
defer script 不阻塞 DOMContentLoaded 前顺序执行 按文档顺序
module script 默认 defer 类似 defer 按文档顺序

3. 关键阶段详解

(1) 普通 script (无属性)

html 复制代码
<script src="app.js"></script>
  • 阻塞行为
    • 停止 HTML 解析
    • 同步下载并执行 JS
    • 执行完后才继续解析 HTML
  • 典型影响
    • 若 JS 文件过大,会导致首屏渲染延迟(白屏时间长)

(2) async 脚本

html 复制代码
<script async src="analytics.js"></script>
  • 特点
    • 异步下载(不阻塞 HTML 解析)
    • 下载完成后立即执行(可能中断 HTML 解析)
    • 多个 async 脚本的执行顺序无法保证
  • 适用场景
    • 不依赖 DOM 的独立脚本(如统计分析)

(3) defer 脚本

html 复制代码
<script defer src="vendor.js"></script>
  • 特点
    • 异步下载(不阻塞 HTML 解析)
    • 在所有 HTML 解析完成后,按文档顺序执行
    • DOMContentLoaded 事件前触发
  • 适用场景
    • 需要操作 DOM 但又不想阻塞渲染的脚本

4. 现代浏览器优化机制

(1) Preload 预加载

html 复制代码
<link rel="preload" href="critical.js" as="script">
  • 提前下载但不执行
  • 适用于关键资源加速

(2) Prefetch 预获取

html 复制代码
<link rel="prefetch" href="next-page.js">
  • 空闲时下载后续页面资源
  • 优先级低于 preload

5. 性能优化建议

  1. 关键 JS 内联或 preload

    html 复制代码
    <!-- 内联关键代码 -->
    <script>/* 关键渲染路径代码 */</script>
    
    <!-- 非关键代码异步加载 -->
    <script defer src="non-critical.js"></script>
  2. 第三方脚本异步化

    html 复制代码
    <script async src="https://analytics.example.com/script.js"></script>
  3. 模块化拆分

    javascript 复制代码
    // 动态导入非首屏需要的代码
    button.addEventListener('click', () => {
      import('./modal.js').then(module => module.open());
    });
  4. 使用 type="module"

    html 复制代码
    <script type="module" src="app.js"></script>
    • 现代浏览器会自动应用 defer 行为
    • 支持 ES6 模块语法

6. 面试回答示例

问题:"JS 文件加载会如何影响页面渲染?有哪些优化手段?"

回答: "浏览器遇到普通 script 标签时会阻塞 HTML 解析,直到 JS 下载并执行完成。这会导致渲染延迟,对此我们有几种优化方案:

  1. 对非关键脚本使用 async/defer 避免阻塞:

    • async 用于独立脚本(如数据分析)
    • defer 用于需要 DOM 但可延迟的脚本
  2. 通过 preload 提前加载关键资源:

    html 复制代码
    <link rel="preload" href="critical.js" as="script">
  3. 代码拆分和动态导入:

    javascript 复制代码
    // 按需加载非首屏代码
    import('./heavy-module.js').then(...)

在实际开发中,可以通过将第三方脚本异步化 + 关键脚本 preload,使 LCP 时间减少了 "


可视化时间线对比

ini 复制代码
普通 script:
[HTML解析=======停止===>][JS下载|执行][继续解析HTML]

async:
[HTML解析======================]
       [JS下载|执行](随机时机)

defer:
[HTML解析======================][DOMContentLoaded][按序执行defer脚本]

ps:理解这些机制可以帮助我们更精确地控制页面加载性能。

相关推荐
对不起初见17 分钟前
PlantUML 完整教程:从入门到精通
前端·后端
东方掌管牛马的神20 分钟前
oh-my-zsh 配置与使用技巧
前端
你的人类朋友27 分钟前
HTTP请求结合HMAC增加安全性
前端·后端·安全
aidingni88840 分钟前
掌握 TCJS 游戏摄像系统:打造动态影院级体验
前端·javascript
有梦想的攻城狮1 小时前
从0开始学vue:npm命令详解
前端·vue.js·npm
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 23 - Watch:基础实现
前端·javascript·vue.js
FogLetter2 小时前
TypeScript 泛型:让类型也拥有“函数式”超能力
前端·typescript
FogLetter2 小时前
Map 与 WeakMap:内存管理的艺术与哲学
前端·javascript
golang学习记2 小时前
从0死磕全栈之Next.js 流式渲染(Streaming)实战:实现渐进式加载页面,提升用户体验
前端
前端伪大叔2 小时前
第15篇:Freqtrade策略不跑、跑错、跑飞?那可能是这几个参数没配好
前端·javascript·后端