css
- css head中阻塞页面的渲染
- css阻塞js的执行。 这个是真的。 当css正在加载的时候， js是不会被执行的
- css不阻塞外部脚本的加载
js阻塞
- 直接引入的js阻塞页面的渲染
- js不阻塞资源加载
- js顺序执行，阻塞后续js逻辑的执行
浏览器同一个域名并发加载的数量是有限的
- chrome 同一个域名并发6个请求
js 引入方式
- 直接引入 =》 资源加载完了之后顺序执行， 但是如果在页面头部引入会阻塞页面渲染
- defer =》 不会阻塞页面渲染， 资源加载完会顺序执行
- async =》 资源加载完了之后就立即执行，
- 异步动态引入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”>
- 对于eg1中浏览器需要先下载，解析完first.css，才会知道其中引用了second.css 文件。 然后再去下载解析second.css。
- 而对于eg2中， 浏览器会并行下载解析两个css文件
- 以前的认识
- @import 不能并发加载；
- 必须要等页面加载完之后才能去加载import的内容
- 对于当前浏览器
- link 和import 效果是一样。 但是import可以让css支持模块化
- 但是对于css文件中引入了import， 这个时候就会需要等css文件下载解析之后才能去加载import的内容
