-
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格式的数据,然后后端再将该数据解析成数据结构的数据进行存储ÿ