细碎知识点合集
Posted by Mars . Modified at
前端杂项记录
1. position: absolute相对谁定位
如果被position为非static的父元素包裹,则相对于最近的这类父元素。如果没有,则相对于html根元素。
2. 如何在高分辨率的屏幕画1px的Border
4. 浏览器渲染页面的流程
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解析
12. 手写深拷贝
12.1 JSON简单方法
function deepCopy(obj){
return JSON.parse(JSON.stringify(obj))
}
这种方式有如下几个缺点:
- BigInt类型无法解析;
- Symbol类型会消失(连同整个键值对在输出中都不存在);
- Date会变成字符串;
- Function、RegExp、Promise、Map、Set等类型都会变成空对象;
- 循环引用对象直接报错。
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可以为同一个事件绑定多个处理函数,按绑定的先后顺序执行。