前端高频面试题

1、什么是防抖和节流？有什么区别？如何实现？

防抖：触发高频事件后n秒后函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

function debounce(fn){
    let timeout = null  // 创建一个标记用来存放定时器的返回值
    return function(){
        // 每当用户输入的时候把前一个setTimeout clear掉
        clearTimeout(timeout)  
         // 然后又创建一个新的setTimeout，这样就能保证输入字符后的interval 间隔内如果还有字符输入的话，就不会执行fn函数
        timeout = setTimeout(()=>{
            fn.apply(this,arguments)
        },500)
    };
}
function sayHi(){
    console.log('防抖成功');
}
var inp = document.getElementById('inp')
inp.addEventListener('input',debounce(sayHi)) // 防抖

节流： 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

function throttle(){
    let canRun = true // 通过闭包保存一个标记
    return function(){
        // 在函数开头判断标记是否为true，不为true则return
        if(!canRun) return  
        // 立即设置为false
        canRun = false 
         // 将外部传入的函数的执行放在setTimeout中
        setTimeout(()=>{
            // 最后在setTimeout执行完毕后再把标记设为true(关键) 表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
            fn.apply(this,arguments)
            canRun=true
        },500)
    };
},
function sayHi(e){
    console.log(e.target.innerWidth,e.target.innerHeight);
}
window.addEventListener('resize',throttle(sayHi));

总结：防抖------只执行最后一次

          节流------控制高频事件执行的次数 

2、常用DOM操作

createElement 创建

appendChild 末尾添加

insertBefore 前边插入

cloneNode(true) 克隆

removeChild() 移除

parentNode 父节点

childNodes 全部子节点

firstChild 第一个子节点

lastChild 最后一个子节点

previousElementSibling 上一个兄弟节点

nextElementSibling 下一个兄弟节点

获取dom节点：document.getElementById()、document.getElementsByTagName()、document.getElementsByClass()、document.getElementsByName()、document.querySelector()、document.querySelectorAll()

parentNode父节点
childNodes // 全部子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
previousElementSibling// 上一个兄弟节点
nextElementSibling// 下一个兄弟节点
获取dom节点：document.getElementById() 、document.getElementsByTagName() 、document.getElementsByClassName() 、document.getElementsByName() 、document.querySelector() 、document.querySelectorAll()