2020/3/26
问题
html:js放在html的
<body>
和<head>
有什么区别?
css:什么是BFC?触发BFC的条件?
js: let、const、var 的区别有哪些?
html:js放在html的<body>
和<head>
有什么区别?
js 放在 head
中,如果不添加 async
或者 defer
时,当浏览器遇到 script
时,会阻塞 DOM 树的构建,进而影响页面的加载。当 js 文件较多时,页面白屏的时间也会变长。把 js 放到 <body>
里(一般在 </body>
的上面)时,由于 DOM 时顺序解析的,因此 js 不会阻塞 DOM 的解析。对于必须要在 DOM 解析前就要加载的 js,我们需要放在 <head>
中。
css:什么是BFC ? 触发BFC的条件?
什么是BFC
BFC 全称为块级格式化上下文 (Block Formatting Context) 。BFC是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用,当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。可以说BFC就是一个作用范围,把它理解成是一个独立的容器,并且这个容器里box的布局与这个容器外的box毫不相干。
触发BFC的条件
- 根元素或其它包含它的元素
- 浮动元素 (元素的
float
不是none
) - 绝对定位元素 (元素具有
position
为absolute
或fixed
) - 内联块 (元素具有
display: inline-block
) - 表格单元格 (元素具有
display: table-cell
,HTML表格单元格默认属性) - 表格标题 (元素具有
display: table-caption
, HTML表格标题默认属性) - 具有
overflow
且值不是visible
的块元素 - 弹性盒(
flex
或inline-flex
) display: flow-root
column-span: all
明天说用途
js: let、const、var 的区别有哪些?
声明方式 | 变量提升 | 暂时性死区 | 重复声明 | 块级作用域有效 |
---|---|---|---|---|
var | 会 | 不存在 | 允许 | 没有 |
let | 不会 | 存在 | 不允许 | 有 |
const | 不会 | 存在 | 不允许 | 有 |
1.let/const 定义的变量不会出现变量提升,而 var 定义的变量会提升。
2.相同作用域中,let 和 const 不允许重复声明,var 允许重复声明。
3.const 声明变量时必须设置初始值
const a;
// 报错
4.const 声明一个只读的常量,这个常量不可改变。
这里有一个非常重要的点即是:在JS中,复杂数据类型,存储在栈中的是堆内存的地址,存在栈中的这个地址是不变的,但是存在堆中的值是可以变得。有没有相当常量指针/指针常量~
const arr = [1,2,3];
arr[0] = 10;
// arr [10, 2, 3]