1. 图片的加载

  • 案例1
    • 图片的加载是否影响其他资源的加载和页面渲染？
    • 答案：不影响
  • 案例2
    • CSS里给一个选择器设置了背景图片，而此选择器并未选中HTML里任何元素，浏览器是否发生此图片的资源请求？
    • 答案：不请求
  • 案例3
    • CSS里选择一个页面上的元素，设置了背景图片，但设置该元素display: none，浏览器是否发生此图片的资源请求？如果是给该元素的父亲设置display:none呢？
    • 答案：给自己设置，发请求；给父亲设置，不发请求
  • 案例4
    • CSS里选择一个页面上的元素，设置了背景图片，但设置该元素visibility: hidden，浏览器是否发生此图片的资源请求？如果是给该元素的父亲设置visibility: hidden呢？
    • 答案：都发请求
  • 案例5
    • HTML里有一个Img标签，当设置该元素display: none， 浏览器是否发生此图片的资源请求？如果给img的父亲设置呢？
    • 答案：都发送请求

      2. 阻塞解析与阻塞渲染

阻塞解析: 阻塞点后面的标签不会被解析，阻塞解析不一定阻塞其他外部资源的加载
阻塞渲染:阻塞点后面的标签会继续被解析，img,link等会继续发送请求获取外部资源，但不会触发页面渲染（白屏），也不会执行JavaScript代码。

3. CSS加载

CSS加载不阻塞解析，但会阻塞渲染

  • 白屏
    • 页面一片空白，突然展示完整的有样式的内容
    • 当link放在head标签，且加载时间久时，会出现白屏效果
  • FOUC(flash of unstyle content)
    • 页面一开始展示无样式的内容，突然样式正常
    • 当link放在页面底部，且加载时间久时，会出现FOUC
  • Tips
    • 尽量把link放在head标签内，防止出现FOUC

      4. JS加载

      JS加载和执行会阻塞解析
      尽量把外置JS放置在body的最后，以便让DOM尽快展现，同时方便JS操作DOM

异步加载
script标签的async和defer属性
image.png
正常情况下JS的加载会阻止后续DOM结构的解析，并且多个JS会按顺序依次执行

image.png
async: 加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（异步）

image.png
defer: 加载后续文档元素的过程将和script.js的加载并行进行（异步）
但 script.js 的执行要在所有元素解析完成之后执行

  • 二者差异
    • async
      • async的存在不影响DOM的解析和其他资源的加载
      • 特例独行，不保证顺序，不保证时机
    • defer
      • defer存在不影响DOM的解析和其他资源的加载
      • 会保证在DOM资源准备就绪后再执行，并且对多个defer的外置js按顺序执行