HTML

01 为什么操作DOM会很慢

在浏览器中 DOM 和 JavaScript 是分开来实现的。

	DOM	JavaScript
IE	DOM 放在一个叫做 mshtml.dll 的库中	JavaScript 的实现名为 JScript，放在 jscript.dll 文件中
Safari	DOM 和渲染使用 Webkit 中的 WebCore实现	由独立的JavaScriptCore引擎实现
Chrome	WebCore实现渲染	V8引擎

由于 DOM 和 JavaScript 是分开来实现，因此每一次在通过 JS 操作DOM的时候，就需要先去连接JS和DOM。

简单理解：把 DOM 和 JavaScript 比作两座岛，它们之间通过一个收费的桥连接着，每一次访问DOM的时候，就需要经过这座桥，并且给“过路费”，访问的次数越多，路费就会越高，并且访问到DOM后，操作具体的DOM还需要给“操作费”，由于浏览器访问DOM的操作很多，因此“路费”和“操作费”自然就会增加，这就是为什么操作DOM会很慢的原因。

JS

01 数组扁平化并去重排序

var arr=[ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

数组拍平

1 Array.flat()

function flatten(arr) {
    return arr.flat(Infinity)
}

2. Array.toString()

function flatten(arr) {
    return arr.toString().split(',').map(v => parseInt(v, 10))
}

3.一层一层拍平

function flatten(arr) {
    while(arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr)
    }
    return arr
}

实现

1. Array.flat + Set + Sort

function flat(arr) {
    return Array.from(new Set(arr.flat(Infinity))).sort((a, b) => a - b)
}

2. toString + Set + Sort

function flat(arr) {
    return Array.from(new Set(arr.toString().split(',').map(v => parseInt(v, 10)))).sort((a, b) => a - b)
}

3. 数组拍平 + Set + Sort

function flatten(arr) {
    while(arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr)
    }
    return arr
}
function flat(arr) {
    return Array.from(new Set(flatten(arr))).sort((a, b) => a - b)
}

CSS

01 BFC

BFC（Block formatting context）就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。

创建 BFC 的方式有：

根元素(<html>)
浮动元素（元素的float不是 none）
绝对定位元素（元素的 position为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、``table-row、 table-row-group、``table-header-group、``table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow值不为 visible的块元素
display值为[flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root) 的元素
contain值为 layout、content或paint 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count或 column-width不为 auto，包括 ``column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

BFC主要作用

清除浮动
防止同一 BFC 容器中的相邻元素间的外边距重叠问题
内部box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）
形成了BFC的区域不会与float box重叠
计算BFC高度时，浮动元素也参与计算

学习打卡-Day1