细碎知识点合集

Posted by Mars at

前端杂项记录

1. position: absolute相对谁定位

如果被position为非static的父元素包裹,则相对于最近的这类父元素。如果没有,则相对于html根元素。

2. 如何在高分辨率的屏幕画1px的Border

3. 回流和重绘

4. 浏览器渲染页面的流程

5. Js高阶函数

6. 函数柯里化如何实现

7. 实现响应式布局的方法

8. CSS的层级关系,Z-index

9. CSS background参数都有哪些

10. Js有几种继承方式?

10.1 原型链继承

子构造函数的prototype属性,值为父构造函数的实例。

function Father(){
    this.name = 'father'
    this.sex = 'male'
}

function Son(){}

Son.prototype = new Father()

11. 浏览器如何进行DNS解析

DNS解析流程

12. 手写深拷贝

12.1 JSON简单方法

function deepCopy(obj){
    return JSON.parse(JSON.stringify(obj))
}

这种方式有如下几个缺点:

  1. BigInt类型无法解析;
  2. Symbol类型会消失(连同整个键值对在输出中都不存在);
  3. Date会变成字符串;
  4. Function、RegExp、Promise、Map、Set等类型都会变成空对象;
  5. 循环引用对象直接报错。

12.2 递归深拷贝

   function deepCopy(target){

        function getType(v){
            return Object.prototype.toString.call(v).slice(8,-1)
        }

        let copiedObjMap = new Map()

        function _deepCopy(arg){
            if ( typeof arg !== 'object'){
                if ( getType(arg) === 'Symbol' ){
                    return Symbol(Symbol.keyFor(arg))
                } else {
                    return arg
                }
            } else {
                if ( !arg ){
                    return arg
                }
                if ( getType(arg) === 'Object' || getType(arg) === 'Array'){
                    // 这里是防止循环引用
                    if (copiedObjMap.get(arg)) return copiedObjMap.get(arg)
                    let res = Array.isArray(arg) ? [] : {}
                    // 注意一定要在这里设置set拷贝过的对象,因为如果进入到下面的递归,就会执行循环拷贝了,导致栈溢出。
                    copiedObjMap.set(arg, res)
                    for (let i of Object.keys(arg)){
                        res[i] = _deepCopy(arg[i])
                    }
                    return res
                }
                if ( getType(arg) === 'Date' || getType(arg) === 'RegExp'){
                    return new arg.constructor(arg)
                }
                if ( getType(arg) === 'Set'){
                    let res = new Set()
                    for (let i of arg){
                        res.add( _deepCopy(i) )
                    }
                    return res
                }
                if ( getType(arg) === 'Map' ){
                    let res = new Map()
                    for (let i of arg.keys()){
                        res.set( _deepCopy(i), _deepCopy(arg.get(i)) )
                    }
                    return res
                }
            }
        }

        return _deepCopy(target)
    }

13. 手写promise

unknown..

14. 手写快速排序

15. filter和transform的区别

16. set、map和 weakSet、weakMap的区别

Set为集合数据类型,内部只有值没有键。它可以保证内部元素不重复。 Map为升级版的对象,区别是可以使用任何类型作为键和值。

17.

没有defer和async: 浏览器加载到script标签时,停止HTML解析,立即加载并执行script脚本,然后再恢复HTML的加载渲染; defer: 浏览器加载到script标签时,立即异步加载JS脚本(解析完不立即执行),同时不停止HTML解析。等到页面所有元素解析完成后,再按顺序依次执行JS脚本。 async: 浏览器加载到script标签时,立即异步加载JS脚本,解析完就立即执行,不论HTML解析过程如何。

18. onevent和addEventListener有什么区别

DOM0 事件处理程序对一个事件只能绑定一个函数,后面的覆盖前面的。

DOM2 事件绑定addEventListener可以为同一个事件绑定多个处理函数,按绑定的先后顺序执行。

Keywords: Drops
previousPost nextPost
已经有 1000000 个小伙伴看完了这篇推文。