包含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则returncanRun = false; // 立即设置为falsesetTimeout(() => { // 将外部传入的函数的执行放在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、<script type="module"> 这几个角度考虑。
参考答案模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。
IIFE：使用自执行函数来编写模块化，特点：在一个单独的函数作用域中执行代码，避免变量冲突。
(function(){return {data:[]}})()AMD：使用requireJS 来编写模块化，特点：依赖必须提前声明好。
define('./index.js',function(code){// code 就是index.js 返回的内容})CMD：使用seaJS 来编写模块化，特点：支持动态引入依赖文件。
define(function(require, exports, module) {var indexCode = require('./index.js');})CommonJS：nodejs 中自带的模块化。
var fs = require('fs');UMD：兼容AMD，CommonJS 模块化语法。
webpack(require.ensure)：webpack 2.x 版本中的代码分割。
ES Modules：ES6 引入的模块化，支持import 来引入另一个 js。
import a from 'a';4、npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？参考答案1. npm 模块安装机制：