script标签中async和defer的作用和区别?

46 阅读1分钟

一省:HTML

6. script标签中async和defer的作用和区别?

  1. 浏览器遇到script标签没有async和defer属性时,页面将会暂停解析来下载并执行script脚本,执行完毕继续解析页面(这样会阻塞页面,所以建议把script标签放在html底部)。
  2. 浏览器遇到script标签有async属性时,页面不会暂停解析,异步下载script脚本,下载完成后页面停止解析,开始执行脚本文件,执行完毕继续解析页面。
  3. 浏览器遇到script标签有defer属性时,页面不会暂停解析,异步下载脚本,等待页面解析完成之后才会开始执行脚本。 附图来源于网络:

二省: CSS

6. 简述css盒模型?

css盒模型包括标准盒模型和怪异盒模型,它们都由margin(外边距)、border(边框)、padding(内边距)、content(内容)四个属性组成,但是它们又有所不同。 区别:

  1. 标准盒模型:width/height只是content的宽/高度,属性设置box-sizing: content-box(默认)。
  2. 怪异盒模型:width/height包括content的宽/高+padding+border的大小,属性设置box-sizing: border-box。

三省:JavaScript

6. 什么是闭包?

闭包指的是那些引用了另外一个函数(外层函数)作用域中变量的函数(内层函数),通常是在嵌套函数中实现的。

function foo() {
  //外部函数
  var name = "foo" //外部变量
  function bar() {
  //内部函数
    console.log("bar", name)//访问外部函数作用域的变量
  }
  
  return bar
}

var fn = foo()
fn() // "bar foo"

在 JavaScript 中,闭包会随着函数的创建而被同时创建。 ——MDN

想要深入了解闭包,建议看MDN官网的解释:developer.mozilla.org/zh-CN/docs/…