1229前端冲刺-Js合并有序数组并取中位数-JS原型与原型链-HTML回流-重绘-文档流

1229前端冲刺-Js合并有序数组并取中位数-JS原型与原型链-HTML回流-重绘-文档流

合并两个有序数组，计算其中位数

// 1.合并两个有序数组，计算其中位数
// [1,2,4,5,6,8,11] m
// [2,5,6,8,10] n
// 1.偶数个时，取中间两个数的平均值
// 2. 时间复杂度不超过O(m+n)

/*思路：
* 先将两条数组的长度判断出来然后将arr1始终指向长的那一条
* 然后依次对比大小放入第三个arr中，知道短的那一条数组arr2插完，最后将arr1剩下的部分连接到arr后面
* 两个数组连接完成，中位数就不用多说了hhhh
* */
let arr1 = [1,2,4,5,6,8,11];
let arr2 = [2,5,6,7,8];

function findMid(arr1,arr2) {
    let len1 = arr1.length;
    let len2 = arr2.length;
    let arr = [];
    let i = 0, j = 0;
    if(len1 < len2){
        arr = arr1;
        arr1 = arr2;
        arr2 = arr;
        arr  = [];
        len2 = len1;
    }
    for(i = 0; i < len2;){
        if(arr2[i] >= arr1[j]){
            arr.push(arr1[j++]);
        }else{
            arr.push(arr2[i++]);
        }
    }
    arr = arr.concat(arr1.slice(j));
    console.log(arr);
    if(arr.length % 2 === 0){
        return (arr[arr.length/2]+arr[arr.length/2-1])/2;
    }else{
        return arr[parseInt(arr.length/2)];
    }

}

console.log(findMid(arr2,arr1));

原型与原型链

// function foo(){}
// const bar = new foo()
// bar.__proto__ ===  foo.prototype
// foo.__proto__ === Function
// foo.prototype.constructor === foo

function foo(){}
const bar = new foo();
//实例对象的原型
console.log(bar.__proto__===foo.prototype); //true

//函数对象原型的原型
console.log(foo.__proto__ === Function.prototype); //true

console.log(foo.prototype.constructor===foo); //true

回流重绘与文档流

回忆
一、浏览器的渲染过程
1.浏览器获取html代码解析成一颗Dom树
2.浏览器解析样式得到样式结构体Cssom
3.Dom树和Cssom结合成为render tree
4.Layout(回流):根据生成的render tree，进行回流，得到节点的几何信息
5.Painting(重绘)：根据染树以及回流得到的几何信息，得到节点的绝对像素
6.Display:将像素发送给GPU，展示在页面上

二、回流
定义：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流
每个页面至少需要一次回流，就是在页面第一次加载的时候。
–通过render tree，我们可以将Dom节点和它对应的样式结合起来，可是我们还需要计算它们在设备视口内确切的位置
和大小，这个计算单阶段就是回流。这回流阶段主要计算节点位置信息和几何信息，当页面布局和几何信息发生改变的时候
就需要回流。

三、重绘
定义：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局
通过构造render tree和回流阶段可以确定节点的样式和具体位置大小等信息。此时就可以将render tree上的每一个节点都
转换为屏幕上的实际像素，这个阶段叫做重绘节点。

Conclusion：
回流发生的场景：
-页面最开始进行渲染的时候
-添加或删除可见的Dom元素
-元素的位置发生改变
-元素的尺寸发生改变
-内容发生改变（比如文本内容变化或者被尺寸不同的图片进行代替）
-浏览器窗口大小变化
！！回流一定会引起重绘，重绘不一定引起回流！！

1.一个div的高度100px是被其内容撑开的，如果为其添加样式height:50px;overflow:hidden，会触发回流重绘吗？
如果其先有样式position:absolute，再添加上述样式会触发哪些？
（1）因为div的尺寸发生了改变，影响了不局，所以会引起回流重绘。
（2）因为是绝对定位脱离了正常的文档流，就算div尺寸发生改变不会影响不局，所以只会引起重绘。

文档流-有时就指normal flow 就是正常文档流
1.正常文档流
2.浮动文档流
3.定位文档流

脱离普通文档流
1.浮动文档流
2.定位文档流
定位文档流中有绝对定位和固定定位两种方式