script标签中async和defer的作用和区别?简述css盒模型?什么是闭包?

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 浏览器遇到script标签没有async和defer属性时,页面将会暂停解析来下载并执行script脚本,执行完毕继续解析页面(这样会阻塞页面,所以建议把script标签放在html底部)。

一省: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官网的解释:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

相关文章
|
22天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
35 5
|
1月前
|
前端开发 Ruby
CSS 预编语言的区别
【10月更文挑战第24天】Sass、Less 和 Stylus 等 CSS 预编语言在语法特点、功能特性、性能表现、社区和生态系统等方面存在着不同之处。在选择使用哪种预编语言时,需要综合考虑项目需求、团队技术偏好、个人习惯等因素。你可以根据具体情况进行评估和选择,以充分发挥这些语言的优势,提高前端开发的效率和质量。
|
1月前
|
前端开发 开发者 UED
设备像素、css像素、设备独立像素、dpr、ppi之间的区别
【10月更文挑战第24天】在实际应用中,这些概念相互关联,共同影响着网页在不同设备上的显示表现。开发者需要了解它们之间的区别和关系,以便更好地进行网页设计和优化,确保在各种设备上都能提供良好的用户体验。
|
2月前
|
前端开发 UED
CSS 盒模型
CSS盒模型是网页设计中一个重要的概念,它定义了HTML元素如何在页面上呈现及其相互关系。每个HTML元素都被视为一个矩形框,此模型涉及内容区、内边距、边框和外边距四个部分,通过控制这些部分的样式和布局,设计师可以实现多样化的页面效果。
WK
|
3月前
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
61 3
|
2月前
|
前端开发 JavaScript
css的引入方式和区别
css的引入方式和区别
41 0
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
前端开发
为什么最好把 CSS 的 link 标签放在 head 标签之间?
为什么最好把 CSS 的 link 标签放在 head 标签之间?
|
4月前
|
前端开发 容器
【CSS Flexbox 探秘】弹性盒模型:揭秘网页布局的终极神器!
【8月更文挑战第25天】Flexbox 是 CSS3 中的关键特性,为网页设计提供了强大的布局能力。本文通过问答形式全面解析 Flexbox 的核心概念与属性,包括容器与项目属性,并通过示例演示如何使用 Flexbox 实现水平与垂直居中、等间距布局及响应式设计。相较于传统布局方法,Flexbox 更加灵活且简化了样式设置,同时在现代浏览器中拥有良好的支持度。掌握 Flexbox 对于提升网页布局效率至关重要。
79 1
|
4月前
|
容器 C# 开发者
XAML语言大揭秘:WPF标记的魅力所在,让你轻松实现界面与逻辑分离,告别复杂代码!
【8月更文挑战第31天】XAML提供了一种直观且易于维护的界面设计方式,使得开发者可以专注于逻辑和业务代码的编写,而无需关心界面细节。通过数据绑定、布局管理和动画效果等特性,XAML可以实现丰富的界面交互和视觉效果。在实际开发过程中,开发者应根据具体需求选择合适的技术方案,以确保应用程序能够满足用户的需求。希望本文的内容能够帮助您在WPF应用程序开发中更好地利用XAML语言。
51 0