前端基础笔记5.6

get和post的区别，对option请求的理解

 

 

OPTIONS请求方法的主要用途有两个：
1、获取服务器支持的HTTP请求方法；也是黑客经常使用的方法。
2、用来检查服务器的性能。例如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。

3、检测到请求方法是options，不会有与服务器的数据交互。

浏览器攻击有哪些，具体怎么理解、如何防御（去这块了解不够，都按照自己的理解答的）

XSS和CFRS;

讲了XSS是通过脚本注入窃取cookie、用户事件、表单信息。防御：可以通过对用户数据进行加密；
cfrs是通过模拟客户端先服务端发送请求获取数据。防御：服务端设置客户端请求地址的白名单，限制不明来源（纯猜测）

XSS攻击：

XSS又叫CSS (Cross Site Script) ,跨站脚本攻击。它指的是恶意攻击者往Web页面里插入恶意html代码,当用户浏览该页之时,嵌入其中Web里面的html代码会被执行,从而达到恶意用户的特殊目的。

比如获取用户的cookie。

Django已经默认做了处理，自动防御xss攻击。

但是有时候需要通过传输HTML代码并且让其显示在页面上的时候怎么做：

在需要的时候添加 xxx|safe   需要注意以下几点：

1.不能在别人能修改的地方添加

2.添加的时候要带上特殊字符的过滤

CSRF攻击（跨站请求伪造）：

用户U登录了一家银行B，然后同时用点进去一个带颜色的网站，网站有些特殊的图片（隐藏着href请求银行B转账的标签）

用户U点击后，因为之前已经成功登录到银行B，拿到其对应的cookie, 这个隐藏的href请求就被银行识别为用户U的操作

带颜色网站通过伪造转账请求，成功收到用户在毫不知情下的转账。

应对方法：

1.银行在收到第一次get请求的时候，返回一串随机字符串，后续的操作用户需要带着这个随机字符串来（CSRF），请求才有效。

而且这个随机字符串只会在银行的页面有。带颜色网站因为没有这个随机字符串，请求无效403。（除非破解其随机字符串算法）

2.短信验证

3.令牌

进程和线程的理解和区别，对协程的理解

线程是进程的基本单位，一个线程只能执行一段代码块；
进程之间相互独立，进行间可以多个线程同时进行

关系：

线程是进程的基本执行单元，一个进程的所有任务都在线程中执行；

进程要想执行任务，必须得有线程。

区别：

1、同一进程的线程共享本进程的地址空间，而进程之间则是独立的地址空间；

2、同一进程内的线程共享本进程的资源，而进程间的资源是独立的。

协程不是被操作系统内核所管理，而完全是由程序所控制。

浏览器的渲染机制

解析html代码 -> 构建DOM树 -> 构建css树 -> 构建布局 -> 完成渲染

浏览器渲染过程大体分为如下三部分：

1. 浏览器会解析三个东西：

• 一是HTML/SVG/XHTML，HTML字符串描述了一个页面的结构，浏览器会把HTML结构字符串解析转换DOM树形结构。

• 二是CSS，解析CSS会产生CSS规则树，它和DOM结构比较像。

• 三是Javascript脚本，等到Javascript 脚本文件加载后， 通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree。

2.解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree来构造 Rendering Tree。

• Rendering Tree 渲染树并不等同于DOM树，渲染树只会包括需要显示的节点和这些节点的样式信息。
• CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element（也就是每个Frame）。
• 然后，计算每个Frame 的位置，这又叫layout和reflow过程(回流和重绘)。

3.最后通过调用操作系统Native GUI的API绘制。

重绘只改变外观、不改变布局和位置，如color
回流改变布局，如对DOM的增删改、对边距边框宽高修改等等
避免回流：减少会触发回流的操作，如top改tranform、不频繁修改dom等

浏览器缓存机制

浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。

通常浏览器缓存策略分为两种：强缓存（Expires，cache-control）和协商缓存（Last-modified ，Etag），并且缓存策略都是通过设置 HTTP Header 来实现的。

强缓存和协商缓存

强制缓存（200）和协商缓存（304）
强缓存命中后，服务端不返回数据，客户端须走缓存
协商缓存命中后，服务端判断客户端缓存是否为最新，不同则返回数据，同则走缓存

 强制缓存和协商缓存的区别_Alisane的博客-CSDN博客_强缓存和协商缓存

web缓存（强制缓存、协商缓存、CDN缓存）_Martian_小小的博客-CSDN博客_强制缓存

看代码说结果：1、箭头函数的this指向；2、作用域和闭包的考察

需要注意的地方：
箭头函数可以通过call、apply、bind来修改指向吗？

Bind & Call & Apply
bind/call/apply三个方法都是可以改变对应函数的this指向的，

bind方法通过该函数调用并且返回一个新的函数，

新的函数已经修改了this指向，只有调用这个新的函数，函数体才会被执行。

(会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数)

call/apply方法是会直接绑定this并进行调用的，

调用的时候，函数内部的this指向call/apply的第一个参数，两者的区分主要在于传参的格式上

💡 call/apply/bind方法都是不能改变箭头函数的this指向的
call 和 bind 区别
call将立即执行该函数
bind不执行函数，只返回一个可供执行的函数
Bind & Call & Apply（改变this指向）_SeriousLose的博客-CSDN博客

闭包可以保留函数作用域中的变量从而让外界访问

手撕代码：给定一个数组，进行去重并升序

去掉一个数组中的重复项，并按升序排序

 方法1：indexOf()

function removeRepeat(arr){
    let result = []
    for(var i=0;i<arr.length;i++){
        if(result.indexOf(arr[i]) == -1){
            result.push(arr[i])
        }
    }
    return result.sort(function(a,b){
        return a-b   // 升序排列
        // return b-a   // 降序排列
    })
}

var testArr = [2,5,6,11,45,6,9,2]
var resultArr = removeRepeat(testArr)
console.log(resultArr)   // [2, 5, 6, 9, 11, 45]

indexOf() 方法可返回数组中某个指定的元素的下标位置。

该方法将从头到尾地检索数组，看它是否含有对应的元素。如果找到一个指定元素，则返回指定元素第一次出现的位置。如果在数组中没找到指定元素则返回 -1。开始位置的索引为 0。

方法2：includes()

function removeRepeat(arr){
    let result = []
    for(var i=0;i<arr.length;i++){
        if(!result.includes(arr[i])){
            result.push(arr[i])
        }
    }
    return result.sort(function(a,b){
        return a-b   // 升序排列
        // return b-a   // 降序排列
    })
}

var testArr = [2,5,6,11,45,6,9,2]
var resultArr = removeRepeat(testArr)
console.log(resultArr)

includes() 方法用来判断一个数组是否包含一个指定的值，如果包含返回 true，否则返回false。

方法3：ES6方法，使用set去重

function removeRepeatBySet(arr){
    let result = [...new Set(arr)]
    return result.sort(function(a,b){
        return a-b   // 升序排列
        // return b-a   // 降序排列
    })
}

var testArr = [2,5,6,11,45,6,9,2]
var resultArr = removeRepeatBySet(testArr)
console.log(resultArr)

方法4:

function removeRepeatBySet(arr){
    let result = []
    var obj = {};
    for(var i = 0 ;i< arr.length;i++){
   		if( !obj[arr[i]] ){
      		obj[arr[i]] = 1;
      		result.push(arr[i]);
   		}
	}
    return result.sort(function(a,b){
        return a-b   // 升序排列
        // return b-a   // 降序排列
    })
}

var testArr = [2,5,6,11,45,6,9,2]
var resultArr = removeRepeatBySet(testArr)
console.log(resultArr)

 方法5: filter数组过滤

function removeRepeatBySet(arr){
    let result = arr.filter(function(item,index,array){
		return array.indexOf(item) === index;
	});
    return result.sort(function(a,b){
        return a-b   // 升序排列
        // return b-a   // 降序排列
    })
}

var testArr = [2,5,6,11,45,6,9,2]
var resultArr = removeRepeatBySet(testArr)
console.log(resultArr)

弄懂节流和防抖

一、防抖
原理：其总是在设置时间的最后一刻执行一次，且只执行一次。在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。

用白话文来说就是：用户你尽管触发事件，但是事件我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，n秒后才执行。

整个防抖实现的流程大概是：

点击执行函数

清除定时 clearTimeout(timer)，需要清除上一次的定时器重新计时

设置定时 setTimeout

若在规定时间内又有点击事件，那就要重新返回到清除定时的操作，然后再次设置定时
如果在规定时间内没有点击事件，就执行函数中相应的任务（如：提交表单）

 

该防抖函数实现的功能：

1. 实现基础的防抖功能；在n秒后才执行一次
2. 实现 this 和 arguments 的正确绑定
3. 实现立即执行

 

二、节流
考虑用户滚动鼠标触发事件的场景：假设页面在监视用户滚动页面的行为来做出响应的反映，如果此时用户不断地滚动页面，就会不断地产生请求，响应也会不断增加，这样既浪费资源还容易导致网络中阻塞。那我们可以在触发事件的时候立刻执行任务，然后设定时间间隔限制，在本段时间间隔内无论用户怎么滚动页面都将忽视操作，在时间到了之后，如果监测到用户有滚动行为，再次像之前所说的那样执行任务和设置时间间隔。

原理：如果在同一个单位时间内某事件被触发多次，只有一次能生效。在密集调用时，节流方法相当于每隔一段时间触发一次。

用白话文说最终实现的效果就是：虽然在不停的触发事件，但就像我们给事件设置了 setInterval 一样，每隔一段时间事件才执行一次。

总体来说的整个流程就是：

触发事件
执行任务
设置时间间隔
一文弄懂节流和防抖_Martian_小小的博客-CSDN博客