【Web前端面试】葵花宝典(2022版本)——JS篇（上）
前言：
本篇文章主要写的是前端高频面试题JavaScript篇（上），如果有需要http/html/浏览器方面面试题的小伙伴们，请在下方评论区留言，下下一篇我会更新相关面试题。如果没有的话，下一篇预备更新 前端高频面试题JavaScript篇（下）
- 【Web前端面试】葵花宝典（2022版本）—— CSS篇
- 【Web前端面试】葵花宝典 （2022版本）—— Vue 篇
- 【Web前端面试】葵花宝典(2022版本)—— JS篇（下）
- 【JavaScript】中this指向相关的经典面试题
- 【JavaScript】作用域提升面试题（详解）
正文：
1. get 请求传参长度的误区
误区：我们经常说 get 请求参数的大小存在限制，而 post 请求的参数大小是无限制的。 实际上 HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对 get 请求参数的限制 是来源与浏览器或 web 服务器，浏览器或 web 服务器限制了 url 的长度。
为了明确这个概念，我们必须再次强调下面几点:
- HTTP 协议未规定 GET 和 POST 的长度限制
- GET 的最大长度显示是因为 浏 览器和 web 服务器限制了 URI 的长度
- 不同的浏览器和 WEB 服务器，限制的最大长度不一样
- 要支持 IE，则最大长度为 2083byte，若只支持 Chrome，则最大长度 8182byte
2.补充 get 和 post 请求在缓存方面的区别
- get 请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。
- post 不同，post 做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此 get 请求适合于请求缓存。
3.说一下闭包
闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用， 子函数所在的父函数的作用域不会被释放。
4. 如何解决异步回调地狱
promise、generator、async/await
5.什么是事件流
事件流描述的是从页面中接收事件的顺序,DOM2 级事件流包括下面几 阶段。
-
事件捕获阶段
-
处于目标阶段
-
事件冒泡阶
6.说说前端中的事件流
HTML 中与 javascript 交互是通过事件驱动来实现的，例如鼠标点击事件 onclick、页面 的滚动事件 onscroll 等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。 想要知道这些事件是在什么时候进行调用的，
7.如何让事件先冒泡后捕获
在 DOM 标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓 执行，直到冒泡事件被捕获后再执行捕获之间。
8.说一下事件委托
事件委托指的是，不在事件的发生地（直接 dom）上设置监听函数，而是在其父 元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判 断事件发生元素 DOM 的类型，来做出不同的响应
举例：最经典的就是 ul和 li标签的事件监听，比如我们在添加事件时候，采用事件委 托机制，不会在 li 标签上直接添加，而是在 ul 父元素上添加。 好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发 机制。
9.说一下图片的懒加载和预加载
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。 懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
10.mouseover和 mouseenter的区别
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是mouseoutmouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave
11. JS 的 new 操作符做了哪些事情
new 操作符新建了一个空对象，这个对象原型指向构造函数的 prototype，执行构造函数后返回这个对象。
12.改变函数内部 this 指针的指向函数（bind，apply，call 的区别）
通过 apply和 call改变函数的 this 指向，他们两个函数的第一个参数都是一样的表示要 改变指向的那个对象，第二个参数，apply 是数组，而 call 则是 arg1,arg2…这种形式。
通 过 bind改变 this作用域会返回一个新的函数，这个函数不会马上执行。
详解可以参考这篇文章http://t.csdn.cn/GNtKH
13. JS 的各种位置，比如 clientHeight,scrollHeight,offsetHeight,以及 scrollTop, offsetTop,clientTop的区别？
clientHeight：表示的是可视区域的高度，不包含 border 和滚动条offsetHeight：表示可视区域的高度，包含了 border 和滚动条scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。clientTop：表示边框 border 的厚度，在未指定的情况下一般为 0scrollTop：滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标(css 定位的元素或 body 元素)距离顶端的高度
14. JS 拖拽功能的实
首先是三个事件，分别是 mousedown，mousemove，mouseup 当鼠标点击按下的时候，需要一个 tag 标识此时已经按下，可以执行 mousemove 里面的 具体方法。
clientX，clientY 标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用 offsetX 和 offsetY 来表示元素的元素的初始坐标，移动的举例应该是：
鼠标移动时候的坐标-鼠标按下去时候的坐标。
也就是说定位信息为： 鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的 offetLeft。
还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位条 件下的 left 以及 top 等等值。
补充：也可以通过 html5 的拖放（Drag 和 drop）来实现
15.异步加载 JS 的方法
defer：只支持 IE 如果您的脚本不会改变文档的内容，可将 defer 属性加入到