web前端常见的面试题汇总(一）

• 19.3脱离DOM的引用

• 19.4闭包

• 20. 如何判断当前脚本运行在浏览器（browser）还是在node环境种？

• 21.移动端的点击事件有延迟，时间 是多少，为什么会有？怎么解决这个问题？

• • 移动端的点击延迟

• 怎么解决点击延迟

• 22. 什么是“前端路由”？什么时候适合使用”前端路由”?“前端路由”有哪些优缺点？

• 23.检测浏览器版本有哪些方式？

• 24. 什么是Ployfill

• 25.使用JS实现获取文件扩展名

• 26. 介绍以下js中的节流和防抖

• • 26.1 节流（通过设置perTime与nowTime）

• 26.2 防抖（通过定时器）

• 27. Object.is()与原来的比较操作符“===” 与“\==”的区别

• 28.浏览器中的事件循环机制（Event Looping）

• 29.instanceof的原理

• 30. 手写封装一个jsonp

• 31.有几种方式可以实现存储功能？分别有什么有优缺点？什么是Service Worker？

• • 31.1 实现的存储功能

• 31.2 什么是Service Worker

• 32.浏览器中的缓存机制

• • 32.1 缓存位置

• 32.2 缓存策略

• 32.3 实际场景应用缓存策略

• 33. 插入几万个DOM，如何实现页面不卡顿？

• 34.什么情况下会产生渲染堵塞？

• 35. 重绘和回流

• 36. 减少重绘和回流

• 37. 什么是XSS攻击？如何防止XSS攻击？

• • 1.XSS攻击

• 2. 如何防止

• 38. 什么是CSRF攻击？如何防范CSRF攻击？

• • 1. CSRF攻击

• 2. 如何防范

• 验证Referer

• SameSite

• CSRF Token

• 29. 什么是点击劫持？如何防范点击劫持？

• 30. 性能优化

• • 1.在请求以及文件大小方面

• 2.对于代码优化相关

• 31. Webpack的性能优化

• • 3.减少webpack的打包时间

• 32. 路由原理（什么是前端路由？两种实现方式有什么区别？）

• • 1. 前端路由

• 33. 开发中常见的几种Content-Type

• 34.什么时MVVM、MVC？有什么区别？

• • 34.1 说明

• 34.2 MVC

• 34.3 MVVM

1. 什么是事件？IE和火狐的事件机制有什么区别？如何阻止事件冒泡

1.1 事件

• 事件是用户操作网页时发生的交互动作。如click/move等。事件即可以由用户触发的动作产生，也可以是文档加载，窗口滚动和大小调整。

• 事件被封装到一个event对象中，event对象中包含了该事件发生时的所有信息（event的属性），以及可以对该事件进行操作（event的方法）

1.2 事件机制

1）IE：IE浏览器支持冒泡事件

2）火狐：狐火浏览器支持冒泡事件和捕获事件

1.3 如何阻止冒泡事件

1）在IE浏览器中使用：event.cancleBubble=true;

2）在火狐浏览器中使用：event.stopPropagation();

2.三种事件模型是什么？

2.1 第一种是最早的DOM0模型

• 该模型时所有浏览器都兼容的；

2.2 第二种是IE事件模型

• 该模型包括两个阶段，一是事件处理阶段，二是事件冒泡阶段；

• 在事件的处理阶段会先执行目标元素绑定的监听函数

• 在事件的冒泡阶段即是从目标元素冒泡到document，一次检查节点是否绑定了事件监听函数，如果绑定了则执行；

• 这种事件模型由attachEvent(type:加了on的事件类型，handler：监听事件函数）

PS：可以添加多个监听函数，会按照顺序依次执行

2.3 第三种是DOM2级事件模型

• 该模型包括三个阶段：一是事件捕获阶段，二是事件处理阶段，三是事件冒泡阶段

• 捕获阶段是指事件从document向下传播到目标元素，依次检查节点是否绑定了监听函数，若有则执行；后面的两个阶段和IE事件模型相同

• 该事件的绑定函数是addEventListener(type:不带on的事件类型，handler：事件监听函数，false|true)------第三个参数表示是否在捕获阶段执行监听事件

3. 事件委托是什么？

• 是什么：事件委托是基于浏览器的事件冒泡机制，因为事件在冒泡的过程中可以上传到父节点，并且父节点可以同个事件对象获取到目标节点，因此可以将子节点的监听函数绑定在父节点上，由父节点监听函数统一处理多个元素的事件，这种方式称为事件代理（委托）；

• 做什么：

-使用事件代理可以不用为每个子元素都绑定一个监听事件，这样减少了内存的消耗；

-使用事件代理可以实现事件的动态绑定，比如新增一个子节点，我们并不需要单独为其添加监听事件，它所发生的事件会交给父元素中的监听函数来处理

4. new操作符具体干了什么？如何实现的？

/构造函数中有个默认返回值，即return this—不写返回值时，默认返回该对象/

function Func(){

}

var func=new Func()

1）首先是创建了一个空对象

var obj = new OBject()

2）设置原型链，即是使这个实例对象的原型proto指向构造函数Func的原型Func（这时便创建了obj对象的原型链：obj —>Func.prototype—>Object.prototype—>null

obj.proto=Func.prototype

3）改变this的指向，即是使构造函数Func中this的指向指向所创建的对象obj，并指向构造函数体

var result=Func.call(this)

4）判断构造函数的返回值，当返回值为值类型时，返回所创建的对象；如果时引用类型，就返回这个引用类型的对象

if(typeof(result)===‘object’){

//如果返回值为引用类型，则返回该引用类型

func=result;

}else{

//如果值是值类型，则返回所创建的对象

func=obj;

}

5.对于json的了解?

• json是一个基于文本的轻量级的数据交换格式，它可以被任何编程需要读取和作为数据格式来传递；

• 我们将JSON作为前后段数据交互的方式，在前端我们将一个符合JSON格式的数据结构转换为JSON字符串，然后将其传递给后端，后端通过JSON格式的字符串解析后生成对应的数据结构，从此以来实现了前后端的数据传递；

• 由于JSON的语法是基于js的，因此很容易将json数据格式与js对象弄混淆，但是需要注意json格式的数据与js对象不是一回事，不如json格式的属性不允许出现函数，不允许出现NaN值等，（json格式的属性需要弄’‘引号，而js对象不需要）

• 在js中提供了两种方法来实现js数据结构和json格式的转换处理；

1）JSON.stringify函数，该函数通过传入一个符合JSON格式的数据结构，将其转换为一个JSON格式字符串。在前端向后端发送数据时，可以调用该函数将数据结构对象转换为JSON格式的数据，然后后端再将该数据解析成数据结构的数据进行存储ÿ