高性能Js-加载和执行

Js文件加载和执行

单线程

• 概念：浏览器使用单一线程处理UI渲染和js脚本执行（只触发一次）
• 问题：等待js文件下载、解析、执行，UI渲染和用户界面刷新被阻塞（异步方式解决）
• 关键：文件加载、文件执行、UI渲染和用户交互
• 场景：

1. js放头部：阻塞下载、执行和UI渲染（页面空白、用户无法浏览页面、无法交互）
2. 多个js文件放在一起：每个js下载都会发生延时（利用加载工具合并为一个js文件）；
3. 下载等待：下载且并行加载，不影响UI渲染（异步加载、异步调用）

• 解决：

1. js文件放在body标签底部
2. 减少外链文件
3. 页面加载完成后再下载js脚本（onload()、ready()）
4. defer、async属性：并发下载文件和执行，不同之处：async下载完成后立即执行，defer下载完成后等待页面完成后再执行（在onload事件处理器执行之前调用，该属性仅当src属性声明时有效）。

• 加载机制：

1. 动态脚本元素
2. 异步调用、加载
3. Ajax异步请求