HTML

浏览器渲染HMTL的步骤

HTML渲染大致分为如下几步：

HTML被HTML解析器解析成DOM Tree, css则被css解析器解析成CSSOM Tree。
DOM Tree和CSSOM Tree解析完成后，被附加到一起，形成渲染树（Render Tree）。
节点信息计算(重排)，这个过程被叫做Layout(Webkit)或者Reflow(Mozilla)。即根据渲染树计算每个节点的几何信息。
渲染绘制(重绘)，这个过程被叫做(Painting 或者 Repaint)。即根据计算好的信息绘制整个页面。

以上4步简述浏览器的一次渲染过程，理论上，每一次的dom更改或者css几何属性更改，都会引起一次浏览器的重排/重绘过程，而如果是css的非几何属性更改，则只会引起重绘过程。所以说重排一定会引起重绘，而重绘不一定会引起重排。

JS

高阶函数

定义

高阶函数英文叫 Higher-order function，它的定义很简单，就是至少满足下列一个条件的函数：

接受一个或多个函数作为输入
输出一个函数

也就是说高阶函数是对其他函数进行操作的函数，可以将它们作为参数传递，或者是返回它们。简单来说，高阶函数是一个接收函数作为参数传递或者将函数作为返回值输出的函数。

函数作为参数传递

JavaScript 语言中内置了一些高阶函数，比如 Array.prototype.map，Array.prototype.filter 和 Array.prototype.reduce，它们接受一个函数作为参数，并应用这个函数到列表的每一个元素。

与不使用高阶函数的方案对比

Array.prototype.map

语法

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

一个由原数组每个元素执行回调函数的结果组成的新数组。

demo: 数组[1, 2, 3, 4]，想要生成一个新数组，其每个元素皆是之前数组的两倍不使用高阶函数

const arr1 = [1, 2, 3, 4];
const arr2 = []

for(let i=0; i<arr1.length; i++) {
    arr2.push(arr1[i] * 2)
}

console.log( arr2 ); // [2, 4, 6, 8]
console.log( arr1 ); // [1, 2, 3, 4]

使用高阶函数

const arr1 = [1, 2, 3, 4];
const arr2 = arr1.map(item => item * 2);

console.log( arr2 ); // [2, 4, 6, 8]
console.log( arr1 ); // [1, 2, 3, 4]

Array.prototype.filter

语法

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

demo: 数组[1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4] 去重不使用高阶函数

const arr1 = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
const arr2 = [];
for (let i = 0; i < arr1.length; i++) {
  if (arr1.indexOf( arr1[i] ) === i) {  
    //索引为2，即i=2;  arr1.indexOf( arr1[i] )=1,第一个1
    arr2.push( arr1[i] );
  }
}

console.log( arr2 ); // [1, 2, 3, 5, 4]
console.log( arr1 ); // [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]

使用高阶函数

const arr1 = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
const arr2 = arr1.filter( (element, index, self) => {
    return self.indexOf( element ) === index;
});

console.log( arr2 ); // [1, 2, 3, 5, 4]
console.log( arr1 ); // [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]

输出一个函数

demo: 用 JS 实现一个无限累加的函数add：

function add(a) {
    var result = a
    function sum(b) { // 使用闭包
        result = result + b // 累加
        return sum
    }
    sum.toString = function() { // 重写 toString 方法
        return result
    }
    return sum // 返回一个函数
}

add(1)(2)(3)(4)

总结

高阶函数 是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。

function fn(callback) {
    callback && callback()
}

fn(function(){ alert('Hi')})

function fn(){
    return function(){}
}
fn()

此时 fn 就是一个高阶函数。

函数也是一种数据类型，同样可以作为参数，传递给另外一个参数适用。最典型的就是作为回调函数。

CSS

介绍下 BFC、IFC、GFC 和 FFC

	介绍	作用
BFC（Block formatting contexts）	块级格式上下文页面上的一个隔离的渲染区域，可以触发BFC的元素有：float、position、overflow、display：table-cell/ inline-block/table-caption ；	实现多栏布局，清除浮动等（BFC作用）
IFC（Inline formatting contexts）	内联格式上下文 IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)。IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。	水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
GFC（GrideLayout formatting contexts）	网格布局格式化上下文当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性，在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。	与 table 相比，同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。
FFC（Flex formatting contexts）	自适应格式上下文 display值为flex或者inline-flex的元素将会生成自适应容器（flex container）。 Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响	Flexbox 定义了伸缩容器内伸缩项目该如何布局。

网络

HTTPS

什么是 HTTPS

HTTPS 是在 HTTP 上建立 SSL 加密层，并对传输数据进行加密，是 HTTP 协议的安全版。

作用：

对数据进行加密，并建立一个信息安全通道，来保证传输过程中的数据安全；
对网站服务器进行真实身份认证。

为什么需要 HTTPS

HTTP 存在的问题

通信使用明文（不加密），内容可能被窃听
无法证明报文的完整性，可能遭篡改，没有任何办法确认，发出的请求/响应和接收到的请求/响应是前后相同的
不验证通信方的身份，有可能遭遇伪装
- HTTP协议中的请求和响应不会对通信方进行确认。在HTTP协议通信时，由于不存在确认通信方的处理步骤，任何人都可以发起请求。另外，服务器只要接收到请求，不管对方是谁都会返回一个响应（但也仅限于发送端的IP地址和端口号没有被Web服务器设定限制访问的前提下）。HTTP协议无法验证通信方身份，任何人都可以伪造虚假服务器欺骗用户，实现“钓鱼欺诈”，用户无法察觉。

HTTPS 优势

HTTPS协议比HTTP协议相比多了以下优势:

数据隐私性：内容经过对称加密，每个连接生成一个唯一的加密密钥
数据完整性：内容传输经过完整性校验
身份认证：第三方无法伪造服务端（客户端）身份

深入理解HTTPS工作原理

学习打卡-Day2