没想到js加载也会单独开一篇。以为js加载更高级了。

js加载需要注意的场景

1 影响界面加载、解析、白屏

看过我浏览器渲染原理文章的会知道：js会阻塞浏览器渲染，让dom解析暂停，执行完js之后才会继续渲染。

• 内嵌的js标签执行会阻塞渲染
• js的外链下载、执行会阻塞DOM解析

如何解决：

• 加快下载
  • 使用cdn加速
  • 压缩
  • 内联
• 合理延迟加载
  • 放页面底部
  • async
    • 并发下载js，下载完立即执行，如果上下js不依赖可以用
    • 动态创建的js就是它
  • defer
    • 立即下载，推迟到 </html> 解析之后执行
    • 也有说，执行时机和DOMContentloaded 没关系（高程4 第二章）
• 合理提前加载
  • prefetch第一轮解析完空闲
  • preload 更早解析头 <link rel='preload' href='./x.js'/>
• 移出主线程
  • 耗时js可以放到sw里执行
• 默认优化
  • Chrome做了很多优化，其中一个是预解析操作，开启一个线程快速扫描js css文件，遇到就提前下载

新时代的script

• crossorigin 配置CORS
  • 可选，默认没有，不带凭据
  • 取值 anonymous 表示不设置凭据标识
  • 取值 use-credentials 设置凭据标识，意味着出站请求会包含凭据
• type
  • module ，视为 es6模块，可使用 export/import
• integrity 验证资源完整性，没用过

有了 ESM ， type=module