啃掉前端JavaScript面试题

1.get和post请求在缓存方面的区别

post/get
get请求类似于查找的过程,用户获取数据,可以不用每次都与数据连接,所以可以使用缓存。
post不同,post所做的一般是修改和删除的工作,所以必须与数据库交互,所以不能使用缓存,因此get请求适合缓存。

2.说一下闭包

闭包就是能够读取其他函数内部变量的函数,或者子函数在外调用,子函数所在的父函数的作用域不会被释放。

3.如何解决异步回调地狱

promise
generator
async/await

4.说说前端中的事件流

html中与JavaScript交互是通过事件驱动来实现的,例如鼠标点击事件onclick,页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件监听器来预定事件。
什么是事件流:事件流描述的是从页面接收事件的顺序,DOM2级事件流包括下面几个阶段:
事件捕获阶段
处于目标阶段
事件冒泡阶段
addEventListener:addEventListener 是DOM2级事件新增的指定事件处理程序的操作,这个方法接收3个参数:要处理的事件名,作为事件处理程序的函数和一个布尔值,最后这个布尔值如果是true,表示在捕获阶段调用事件处理程序,如果是false,表示在冒泡阶段调用事件处理程序。
ie只支持事件冒泡

5.如何让事件先冒泡后捕获

在DOM标准事件模型中,是先捕获后冒泡,但是如果反向,对于同一个事件,监听捕获和冒泡,分别对应相应的处理函数,监听到捕获事件,先暂缓执行,直到冒泡事件被捕获后再执行捕获之前的操作。

6.事件委托

事件委托是指,不再事件的发生地上设置监听函数,而是在其父元素上设置监听函数,通过事件冒泡,父元素可以监听到子元素上事件的触发,通过判断事件发生元素DOM的类型,来做出不同的响应。

比如:在ul上添加事件监听,不在li上添加事件监听。

7.图片的懒加载和预加载

预加载:提前加载图片,当用户需要查看时可以直接从本地缓存中渲染。
懒加载:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。
两种技术的本质:两者的行为是相反的,一个是提前加载,一个是延缓甚至不加载。
懒加载对服务器前端有一定的缓解压力的作用,预加载则会增加服务器前端压力。

8.mouseover和mouseenter

**mouseover:**当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发,冒泡的过程。对应移除mouseout;

**mouseenter:**当鼠标移除元素本身会触发事件,不包含元素的子元素,没有冒泡过程。对应移除mouseleave;

9.js的new操作符做了哪些事情

new操作符新建了一个空对象,这个对象原型指向构造函数的prototype,执行构造函数后返回这个对象。

10.改变函数内部this指针的指向函数(bind,apply,call区别)

通过apply和call改变函数的this指向,他们两个函数的第一个函数都是一样的表示要改变指向的那个对象,第二个参数,apply是数组,而call则是arg1,arg2这种形式。
通过bind改变this作用域会返回一个新的函数,这个函数不会马上执行。

11.js拖拽功能的实现

首先是三个事件,分别是mousedown,mousemove,mouseup
当鼠标点击按下的时候,需要一个tag标识此时已经按下,可以执行mousemove里面的具体方法。
clientX,clientY标识是鼠标的坐标,分别标识横坐标和纵坐标
offsetXoffsetY来表示初始的横纵坐标

12.异步加载js的方法

defer:通过给<script>标签设置defer属性,将脚本文件设置为延迟加载,当浏览器遇到带有defer属性的<script>标签时,会再开启一个线程去下载js文件,同时继续解析HTML文档,等等HTML全部解析完毕DOM加载完成之后,再去执行加载好的js文件。
这种方式只适用于引用外部js文件的<script>标签,可以保证多个js文件的执行顺序就是它们在页面中出现的顺序,但是要注意,添加defer属性的js文件不应该使用document.write方法。
async:和defer属性类似,也是会开启一个线程去下载js文件,但和defer不同的时,它会在下载完成后立刻执行,而不是会等到DOM加载完成之后再执行,所以还是有可能会造成阻塞。
同样的,async也是只适用于外部js文件,也不能在js中使用document.write方法,但是对多个带有async的js文件,它不能像defer那样保证按顺序执行,它是哪个js文件先下载完就先执行哪个。

13.ajax解决浏览器缓存问题

在发送ajax前增加
anyAjaxObj.setRequestHeader("If-Modified-Since","0"),
anyAjaxObj.setRequestHeader("Cache-Control","no-cache")
在url后面加上一个随机数:

"fresh="+Math.random()

在url后面加上时间戳:

"nowtime="+new Date().getTime()
发布了158 篇原创文章 · 获赞 44 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/qq_43277404/article/details/104301044
今日推荐