前端经典面试题(60道前端面试题包含JS、CSS、React、网络、等)

(以下所有答案仅供参考)

简答题

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

参考答案

防抖

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

思路:

每次触发事件时都取消之前的延时调用方法

function debounce(fn) {

let timeout = null; // 创建一个标记用来存放定时器的返回值

return function () {

clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉

timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话,就不会执行 fn 函数

fn.apply(this, arguments);

}, 500);

};

}

function sayHi() {

console.log('防抖成功');

}

var inp = document.getElementById('inp');

inp.addEventListener('input', debounce(sayHi)); // 防抖复制代码

节流

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

思路:

每次触发事件时都判断当前是否有等待执行的延时函数

function throttle(fn) {

let canRun = true; // 通过闭包保存一个标记

return function () {

if (!canRun) return; // 在函数开头判断标记是否为true,不为true则return

canRun = false; // 立即设置为false

setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中

fn.apply(this, arguments);

// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false,在开头被return掉

canRun = true;

}, 500);

};

}

function sayHi(e) {

console.log(e.target.innerWidth, e.target.innerHeight);

}

window.addEventListener('resize', throttle(sayHi));复制代码

2、 get请求传参长度的误区、get和post请求在缓存方面的区别

误区:我们经常说get请求参数的大小存在限制,而post请求的参数大小是无限制的。

参考答案

实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器,浏览器或web服务器限制了url的长度。为了明确这个概念,我们必须再次强调下面几点:

HTTP 协议 未规定 GET 和POST的长度限制

GET的最大长度显示是因为 浏览器和 web服务器限制了 URI的长度

不同的浏览器和WEB服务器,限制的最大长度不一样

要支持IE,则最大长度为2083byte,若只支持Chrome,则最大长度 8182byte

补充补充一个get和post在缓存方面的区别:

get请求类似于查找的过程,用户获取数据,可以不用每次都与数据库连接,所以可以使用缓存。

post不同,post做的一般是修改和删除的工作,所以必须与数据库交互,所以不能使用缓存。因此get请求适合于请求缓存。

3、模块化发展历程

可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、

你可能感兴趣的:(前端经典面试题(60道前端面试题包含JS、CSS、React、网络、等))