美文网首页我爱编程
html静态资源加载

html静态资源加载

作者: kakaka0234 | 来源:发表于2018-04-09 16:04 被阅读0次

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的内容

相关文章

网友评论

    本文标题:html静态资源加载

    本文链接:https://www.haomeiwen.com/subject/mecphftx.html