html静态资源加载

css

1. css head中阻塞页面的渲染
2. css阻塞js的执行。 这个是真的。 当css正在加载的时候， js是不会被执行的
3. css不阻塞外部脚本的加载

js阻塞

1. 直接引入的js阻塞页面的渲染
2. js不阻塞资源加载
3. js顺序执行，阻塞后续js逻辑的执行

浏览器同一个域名并发加载的数量是有限的

1. chrome 同一个域名并发6个请求

js 引入方式

1. 直接引入 =》 资源加载完了之后顺序执行， 但是如果在页面头部引入会阻塞页面渲染
2. defer =》 不会阻塞页面渲染， 资源加载完会顺序执行
3. async =》 资源加载完了之后就立即执行，
4. 异步动态引入js。 就是用js创建一个script标签，将要引用的js加上去

为什么不推荐使用@import 引入css文件@import VS link

<!-- eg1: -->
    <!-- first.css -->
    @import url(“second.css”)
    <!-- index.html -->
    <link rel=“stylesheet” href=“first.css”>

<!-- eg2: -->
    <!-- index.html -->
    <link rel=“stylesheet” href=“first.css”>
    <link rel=“stylesheet” href=“second.css”>

1. 对于eg1中浏览器需要先下载，解析完first.css，才会知道其中引用了second.css 文件。 然后再去下载解析second.css。
2. 而对于eg2中， 浏览器会并行下载解析两个css文件
3. 以前的认识
   1. @import 不能并发加载；
   2. 必须要等页面加载完之后才能去加载import的内容
4. 对于当前浏览器
   1. link 和import 效果是一样。 但是import可以让css支持模块化
   2. 但是对于css文件中引入了import， 这个时候就会需要等css文件下载解析之后才能去加载import的内容