JavaScript会阻塞DOM构建，影响关键渲染路径；通过async或defer属性异步加载脚本，可避免解析阻塞；非关键JS应延迟加载或动态导入；确保DOM就绪后再访问元素，以提升首屏渲染速度和用户体验。
提升浏览器性能的关键之一是优化JavaScript对关键渲染路径的影响。关键渲染路径指的是从HTML、CSS和JavaScript解析到首次渲染像素的过程。JavaScript在这条路径中扮演重要角色，但也可能成为瓶颈。
JavaScript如何阻塞渲染
当浏览器在解析HTML时遇到script标签，默认会暂停DOM构建，直到脚本下载并执行完毕。这是因为JavaScript可能通过document.write或DOM操作改变页面结构。这种行为直接阻塞了页面的渲染。
- 内联脚本和外部脚本都会阻塞解析，除非添加async或defer属性
- 脚本执行期间，浏览器无法继续构建DOM，进而延迟生成渲染树
使用async与defer优化加载
为避免阻塞，可通过script标签的属性控制加载时机：
- async：脚本异步下载，下载完成后立即执行，执行时仍会阻塞解析
- defer：脚本异步下载，但延迟到HTML解析完成后再按顺序执行
对于不依赖DOM且无顺序要求的脚本（如统计代码），推荐使用async；对于需要操作DOM或有依赖关系的脚本，defer更安全。
立即学习“Java免费学习笔记（深入）”；
将非关键JS移出关键路径
并非所有JavaScript都需要在首屏渲染前执行。可采取以下策略减少关键路径上的资源压力：
- 将不影响首屏显示的脚本延迟加载（lazy load）
- 使用Intersection Observer实现滚动加载模块
- 拆分大文件，按需动态导入（import()）
避免过早访问DOM
若脚本位于head中且未使用defer或async，尝试访问DOM元素会返回null。正确做法是等待DOM就绪：
- 使用DOMContentLoaded事件确保DOM可操作
- 或将脚本放在body底部，确保DOM已构建
基本上就这些。合理安排JavaScript的加载和执行方式，能显著缩短首次渲染时间，提升用户体验。
