高性能Js-加载和执行
Js文件加载和执行
单线程
- 概念：浏览器使用单一线程处理UI渲染和js脚本执行（只触发一次）
- 问题：等待js文件下载、解析、执行，UI渲染和用户界面刷新被阻塞（异步方式解决）
- 关键：文件加载、文件执行、UI渲染和用户交互
- 场景：
- js放头部：阻塞下载、执行和UI渲染（页面空白、用户无法浏览页面、无法交互）
- 多个js文件放在一起：每个js下载都会发生延时（利用加载工具合并为一个js文件）；
- 下载等待：下载且并行加载，不影响UI渲染（异步加载、异步调用）
- 解决：
- js文件放在body标签底部
- 减少外链文件
- 页面加载完成后再下载js脚本（onload()、ready()）
- defer、async属性：并发下载文件和执行，不同之处：async下载完成后立即执行，defer下载完成后等待页面完成后再执行（在onload事件处理器执行之前调用，该属性仅当src属性声明时有效）。
- 加载机制：
- 动态脚本元素
- 异步调用、加载
- Ajax异步请求
