2020前端知识点汇总(二)

1、POST提交数据的几种常见Content-Type？

Application/x-www-form-urlencoded
Multipart/form-data
Application/json
Text/xml

2、什么是重放攻击？列举几种常见防御手段？

• 重放攻击：
  入侵者从网络上截取主机A发送B的报文，并把由A加密的报文发送给B，使主机B误以为入侵者就是A，然后主机B向伪装A的入侵者发送应当发送给A的报文
• 防御手段：
  ①、加随机数：认证双方不需要时间同步，双方记住使用过的随机数，如发现报文中有以前使用过的随机数，就认为是重放攻击。缺点是需要额外保存使用过的随机数，若记录的时间段较长，则保存和查询的开销较大。
  ②、加时间戳：不用额外保存其他信息。缺点是认证双方需要准确的时间同步，同步越好，受攻击的可能性就越小。但当系统很庞大，跨越的区域较广时，要做到精确的时间同步并不是很容易。
  ③、加流水号：双方在报文中添加一个逐步递增的整数，只要接收到一个不连续的流水号报文(太大或太小)，就认定有重放威胁。该方法优点是不需要时间同步，保存的信息量比随机数方式小。缺点是一旦攻击者对报文解密成功，就可以获得流水号，从而每次将流水号递增欺骗认证端。

3、简述peomise的原理，jquery的ajax返回的是promise对象么？

• Promise用于延迟计算和异步计算，一个Promise对象代表着一个还未完成，但语气完成的操作，Promise对象是一个返回值的代理，这个返回值在Promise对象创建时未必是已知，他允许你为异步操作的成功或者失败指定处理方法，这使得异步方法可以向同步方法有返回值:一步方法会返回一个包含 原返回值的promise对象来代替原返回值(简介) jquery的ajax返回值是promise的对象，但是在Ajax中，不仅仅只有他有promise返回值，ajax，get，post，都拥有promise对象，动画函数也可以返回promise对象

4、scss是什么？有哪些特性？

• 预处理css，把css当前函数编写，定义变量,嵌套。
  先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader
• 特性：
  ①、可嵌套性
  ②、 变量：变量以$开头（通常网站会有基础变量，譬如基础字体，基础色调等，可以将他们赋值给一个变量，以后调用变量就好了，很类似js里的变量）
  ③、Mixins(混合@mixin)：可重用性高，可以注入任何东西
• 注意:
  ①、可以相互调用，但是不能拿自己调用自己，形成递归
  ②、通过@include引用
• @extend：允许一个选择器继承另一个选择器
• @function:函数功能，用户使用@function可以去编写自己的函数（常用）
  ①、使用语法： 使用 @function+函数名称，每个函数都需要有返回值的内容
  引用父元素&：在编译时，&将被替换成父选择符（常用）

5、如何让css只在当前组件中起作用？

• 在style中写入scoped

  <style scoped>
  
  </style> 
  

6、如何阻止事件冒泡和默认事件？

• event.stopPropagation()方法
  这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，
• event.preventDefault()方法
  这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；
• return false 方法
  这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return
  false就等于同时调用了event.stopPropagation()和event.preventDefault()

7、cookie sessionStorage和localStorage的区别？

• cookie：存储量小。存储麻烦，没有固定的api，需要后台帮忙设置，操作不方便，不安全，费流量
• localstorage：没有时间限制，永不过期，除非主动删除，数据可跨越窗口使用，无视当前会话
• sessionstorage：在任何页面都可以存储信息，但是仅仅在当前页面使用，每个页面存储的信息都是独立拥有的，其他页面不能访问，一旦当前叶页面存储的信息关闭，存储的信息全部删除

8、列举几个导致页面加载阻塞的原因，并分析解决办法？

• 页面内容
  如果网页包含大量未经处理的图片，而这些图片很大，就会导致打开速度变慢。
• http请求次数太多
  解决：
  ①、减少http请求次数
  ②、使用外部JS和CSS文件。
• JavaScript脚本过大，阻塞了页面的加载
  解决：
  将JavaScript脚本放在标签前。script没有async和defer时，JS文件将在下载后立即执行。这种情况下，script放在顶部会阻塞页面呈现， 在网速慢的情况下会导致“白屏”，直到脚本下载完毕才继续呈现页面。因此， script放在底部可以让页面尽快呈现。
• CSS、JavaScript、图片等需要重复加载
  解决：
  减轻重复下载静态资源的负担。
• 过多引用其他网站内容
  例如引用其他网站的图像、视频文件等。如果链接到的网站速度慢，甚至那家网站已经不存在了，那么用户打开网页的速度就会十分慢。

9、优化一下下面的代码

//优化前
var a = $("div");
for(var i = 0; i<a.length;i++){
	var b = $("#test");
	b.text($(a[i]).text());
}

//优化后
for(var i = 0; i<$("div").length;i++){
	$("#test").text($("div").eq(i).text());
}

10、 页面的性能查找方法和优化方案

• 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
• 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
• 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
• 当需要设置的样式很多时设置className而不是直接操作style。
• 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
• 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
• 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

11、用js/jquery实现如下效果:一组图片,其中任意一张图片被点击时对其应用高亮片应用普通样式

<script>
	$('div img').click(function(){
		$(this).addClass('select').siblings().removeClass('select');
	})
</script>

12、一行代码实现数组去重

• ES6中新增了Set数据结构，类似于数组，但是 它的成员都是唯一的 ，其构造函数可以接受一个数组作为参数，如：

<script>
	 let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
	 let set = new Set(array);
	 console.log(set);
	 // => Set {1, 2, 3, 4, 5}
</script>

13、什么是事件委托？

• 利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
• 好处呢：提高性能。

14、实现将图片(未知尺寸,但高度都小于200px)在200px 的正方形容器中水平和垂直居中

<style>
	{margin:0;padding:0;}
    div {width:200px;text-align:center;border:1px solid #f00;line-height:200px;
    height:200px;}
    div img {vertical-align:middle}
</style>

<div class="box">
	<img src="" />
</div>

15、Web动画的几种常见方式？

• css3的animation + keyframes
• Css3的transition
• Canvas作图
• 借助jQuery动画
• Window.setTimeout()或者window.setInterval()通过不断更新元素的站台位置实现动画

16、求b距离屏幕顶部和左边的距离

<style>
	.a{
		width: 300px;
		height: 300px;
		margin:30px;
		padding:20px;
		left:10px;
		border:5px solid red;
	}
	.b{
		position: absolute;
		width: 200px;
		height: 200px;
		margin:3px;
		padding:2px;
		left:1px;
		border:5px solid red;
	}
</style>
<body>
	<div class="a">
		<div class="b"></div>
	</div>
</body>

• 距离顶部55px
• 距离左边64px

17、请写出一个排序

// sort排序
var arr = Array(7,1,8,5,6,3,9,2,0);
console.log(arr.sort())
// 冒泡排序
var arry =[7,2,5,1,8,4,3,6];
for(var i=0;i<arry.length;i++){
	for(var j=0;j<arry.length-1-i;j++){
		if (arry[j]>arry[j+1]){
            var max =arry[j];
            arry[j]=arry[j+1];
            arry[j+1]=max;
        }
	}
}

18、ES5和ES6的继承有什么区别？

• ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上(Parent.apply(this))
• ES6的继承机制完全不同，实质上是先创建父类的实例对象this(所以必须先调用父类的super()方法)，然后再用子类的构造函数修改this
• ES5的继承是通过原型或构造函数机制类实现
• ES6通过class关键字定义类，里边有构造方法，类之间通过extends关键字实现继承，子类必须在const
  ructor方法中调用super方法，否则新建实则报错，因为子类没有自己的this对象，而是继承了父类的this对象，然后对其进行加工，如果不调用super方法，子类得不到this对象
• 注意：super关键字指代父类的实例，即父类的this对象
• 注意：在子类构造函数中，调用super后，才可使用this关键字，否则报错

19、谈谈你对面向对象的理解？

• 所谓的面向对象就是将我们的程序模块化，对象化，把具体事物的特性属性和通过这些属性来实现一些动作的具体方法放到一个类里面，这就是封装。封装是我们所说的面相对象编程的特征之一。除此之外还有继承和多态。继承有点类似与我们生物学上的遗传，就是子类的一些特征是来源于父类的，儿子遗传了父亲或母亲的一些性格，或者相貌，又或者是运动天赋。有点种瓜得瓜种豆得豆的意思。面向对象里的继承也就是父类的相关的属性，可以被子类重复使用，子类不必再在自己的类里面重新定义一回，父类里有点我们只要拿过来用就好了。而对于自己类里面需要用到的新的属性和方法，子类就可以自己来扩展了。当然，会出现一些特殊情况，就是我们在有一些方法在父类已经定义好了，但是子类我们自己再用的时候，发现，其实，我们的虽然都是计算工资的，但是普通员工的工资计算方法跟经理的计算方法是不一样的，所以这个时候，我们就不能直接调用父类的这个计算工资的方法了。这个时候我们就需要用到面向对象的另一个特性，多态。对，就是多态，我们要在子类里面把父类里面定义计算工资的方法在子类里面重新实现一遍。多态包含了重载和重写。重写很简单就是把子类从父亲类里继承下来的方法重新写一遍，这样，父类里相同的方法就被覆盖了，当然啦，你还是可以通过super.CaculSalary方法来调用父类的工资计算方法。而重载就是类里面相同方法名，不同形参的情况，可以是形参类型不同或者形参个数不同，或者形参顺序不同，但是不能使返回值类型不同。

20、JS内置对象有一下几种：

• Arguments 函数参数集合
• Array 数组
• Boolean 布尔对象
• Date 日期时间
• Error 异常对象
• Function 函数构造器
• Math 数学对象
• Number 数值对象
• Object 基础对象
• RegExp 正则表达式对象
• String 字符串对象

21、document load 和document ready的区别？

• document.onload 是在结构和样式,外部js以及图片加载完才执行js
• document.ready是dom树创建完成就执行的方法，原生种没有这个方法，jquery中有 $().ready(function)

22、call和apply的区别?

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

23、split() join() 的区别?

• 前者是将字符串切割成数组的形式，后者是将数组转换成字符串

24、IE和标准下有哪些兼容性的写法

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

25、数组方法pop() push() unshift() shift()

• push()尾部添加
• pop()尾部删除
• unshift()头部添加
• shift()头部删除