首屏优化之资源加载顺序与def/async运用

文
章
目
录

• 一、资源加载顺序和阻塞机制详解
• （一）DOM构建的关键阶段
• （二）CSS和JS的阻塞特性
• 二、<script>标签加载模式对比
• 三、开发实践中的场景选择
• （一）使用defer的场景
• （二）使用async的场景
• 四、首屏性能优化实用建议
• （一）关键路径优化
• （二）资源优先级控制

在前端开发里，首屏优化是绕不开的，其中资源加载顺序和<script>标签的defer、async属性运用，对页面性能有着关键影响。今天咱们就深入聊聊这俩知识点。

一、资源加载顺序和阻塞机制详解

（一）DOM构建的关键阶段

在网页加载过程中，DOM构建有几个关键阶段：

• domLoading：这个阶段就是浏览器开始解析收到的HTML字节流，相当于开工干活的第一步。
• domInteractive：到这个时候，HTML解析完成，DOM树也构建好了，网页的基本结构算是搭起来了。
• domContentLoaded：不仅DOM树准备好，CSSOM（层叠样式表对象模型）也就绪了，这时候就会触发一个事件，意味着页面的基本样式和结构都可以展示了。
• domComplete：所有像图片、脚本这类资源都加载完成，整个网页就完整了。

（二）CSS和JS的阻塞特性

CSS和JS在资源加载时，有着不同的阻塞行为，对页面渲染影响很大，具体看下面这个表格：

资源类型	阻塞行为	影响范围
CSS	会阻塞渲染树构建，可能导致页面空白，但不影响DOM解析	会阻塞后续JS的执行
JS	会阻塞DOM构建和渲染，而且一旦加载到就立即执行	会让后续HTML解析暂停

举个典型场景，如果CSS文件在JS前面声明了，但是加载延迟了，就算JS先下载好了，也得等着CSS解析完才能执行。这就好比JS在排队等CSS，CSS没处理完，JS就只能干等着。

二、<script>标签加载模式对比

<script>标签不同的属性，会让脚本的加载和执行方式大不一样，详细情况看下面表格：

属性	加载行为	执行时机	顺序保证
无属性	同步加载，会阻塞HTML解析	立即执行	按照文档顺序
defer	异步加载，不会阻塞HTML解析	在DOMContentLoaded事件触发前按顺序执行	按照加载顺序
async	异步加载，同样不阻塞HTML解析	加载完成后立即执行	没有顺序保证

还有一种特殊场景是动态脚本，比如下面这段代码：

// 创建一个script元素
const script = document.createElement(\'script\');  
// 设置script的src属性为a.js
script.src = \'a.js\';  
// 将async属性设为false，强制按文档顺序执行
script.async = false;  
// 将script元素添加到页面的body中
document.body.appendChild(script);  

这段代码就是手动创建一个脚本元素，并且设置它按文档顺序执行。

三、开发实践中的场景选择

（一）使用defer的场景

• 当需要操作DOM元素时，比如初始化表单，就适合用defer。因为它能保证在DOM解析完成后再执行脚本，这样操作DOM就不会出错。
• 如果脚本之间存在依赖关系，像先加载库文件，再加载业务逻辑文件，defer就能保证按顺序执行。例如：

<script src=\"vue.js\" defer></script>  
<script src=\"app.js\" defer></script>  <!-- 保证vue.js先执行 -->  

（二）使用async的场景

• 对于独立且没有依赖关系的脚本，比如数据分析的SDK，用async就很合适。它不会阻塞页面渲染，能让页面快速展示出来。
• 像错误日志上报这种优先级较低的后台任务，也可以用async，在不影响页面主要功能的前提下完成任务。例如：

<script src=\"analytics.js\" async></script>  <!-- 不阻塞页面渲染 -->  

四、首屏性能优化实用建议

（一）关键路径优化

对于首屏展示必不可少的JS，可以选择内联的方式，或者使用无属性的<script>标签加载。而那些不是关键的脚本，就用defer或async属性，这样能合理安排脚本加载顺序，提升首屏加载速度。

（二）资源优先级控制

通过<link rel=\"preload\">这个属性，可以提前加载核心的CSS和JS文件。这就好比提前把要用的东西准备好，等需要的时候就能直接用，减少等待时间。

掌握好资源加载顺序和defer、async的使用，对前端开发的首屏优化很重要，希望大家都能吃透！