前端零碎知识点（一）

一、防抖、节流

防抖：指触发事件后在规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时间。

常见应用场景：百度搜索联想功能

原理：通过定时器对事件函数进行延时，如果在延时时间内再次触发该时间，则清楚定时器并重新设置定时器；

节流：当持续触发事件时，在规定时间段内只能调用一次回调函数。

常见应用场景：下拉或者上划刷新、鼠标滚动刷新等；

对比：防抖是将多次执行变为最后一次执行，节流是将多次执行变为在规定时间内只执行一次，总之，都是延时执行。

 

二、前端安全问题：XSS、SQL注入、CSRF、DNS劫持、HTTP劫持

1、XSS（跨站脚本攻击）：通常是由带有页面可解析内容的数据未经处理直接插入到页面上解析导致的；

1）、存储型XSS：前端提交的数据未经处理直接存储到数据库然后从数据库中读出来又直接插入到页面中所导致的；

例如：前端所传数据为'<script>alert('就想来个弹窗')</script>'，如果不处理直接插入页面div的话，就是出现alert弹窗；

2）、反射型XSS：可能是网页URL参数中注入了可解析内容的数据而导致的，如果直接获取URL中不合法的并插入页面中则可能出现页面上的XSS攻击；

3）、MXSS：是在渲染DOM属性时将攻击脚本插入DOM属性中被解析而导致的；

XSS解决办法：将所有可能包含攻击的内容进行HTML字符编码转义或者在 cookie 中设置 HttpOnly 属性后，js脚本将无法读取到 cookie 信息；

2、SQL注入主要是因为页面提交数据导服务器端后，在服务端未进行数据验证就将数据直接拼接到SQL语句中执行；

例如：

let id = req.query['id'];
let sql = `select * from user_table where id=${id}`;
let data = exec(sql);
this.body = data;

如果前端传入的id为'1001 or name=%user%'，那么查询出来的数据就不只是id=1001的用户了，名字包含user的用户也会被查询出来；

解决办法：对前端网页提交的数据内容进行严格的检查校验；

3、CSRF是指非源站点按照源站点的数据请求格式提交非法数据给源站点服务器的一种攻击方法；

通常比较安全的是通过token（令牌）提交验证码的方式来验证请求是否为源站点页面提交的，以此来阻止跨站伪请求的发生；

4、DNS劫持：一般通过篡改DNS服务器上的域名解析记录，来返回给用户一个错误的DNS查询结果实现；

例如：访问域名www.a.com，出现的却是www.b.com 的内容，因为DNS服务器www.a.com域名的解析结果被修改指向了www.b.com网站所指向的IP地址；

5、HTTP劫持：是指在用户浏览器与访问的目的服务器之间所建立的网络数据传输通道中从网关或防火墙层上监视特定数据信息，当满足一定条件时，就会在正常的数据包中插入或修改为攻击者设计的网络数据包，目的是让用户浏览器解析“错误”的数据，或者以弹出新窗口的形式在使用者浏览器界面上展示宣传性广告或者直接显示某块其他的内容；

请求劫持唯一可行的预防方法就是尽量使用HTTPS协议来访问目标网站；

 

三、缓存

缓存就是保存资源副本并在下次请求时直接使用该副本。浏览器缓存就是浏览器请求网站留下的资源副本。

当 web 缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。（返回码304大致就是这个意思）；

好处：不用每次都去请求资源，缓解服务器压力、提升性能、减少带宽消耗；

浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来确定的。

通过cache-control的指令可以控制告诉客户端或是服务器如何处理缓存。

浏览器缓存流程如下图： 

 强缓存和协商缓存可以在另一篇博客中找到详细介绍----> 强缓存和协商缓存

 

四、angularjs中ng-repeat遇到的问题

在项目开发中遇到这样一个问题，ng-repeat渲染的页面，在数组变化后页面没有更新，然后就想起了$scope.$apply(),想着手动帮它更新一下就可以了嘛，谁知道，呵呵，报错了，说这个$digest已经存在了，看来这个方法不行（那些博客上说这个方法可以的不知道是怎么实现的）；

直接说解决办法：ng-repeat="item in array track by $index"，在想要更新的ng-repeat上这样写，问题解决。

原因是更新后的数组和原数组有重复元素，ng-repeat没有对重复的元素进行刷新，加上track by $index相当于给数据加上了唯一序号，重复的数据就相当于不重复了。

有人会问如果更新后的数组和原数组没有重复元素呢？

如果更新后的数组和原数组没有重复元素的话ng-repeat是会直接更新页面的，不用加track by $index也能正常渲染，但是实际项目中很多时候只是对数组中一个或多个值修改，或者不能保证更新后的数组跟原数组有没有重复元素，所以个人建议在涉及到动态修改ng-repeat数组的地方还是加上 track by $index为好。

五、angularjs中动态给select的ng-model赋值不显示问题

项目中遇到编辑页面，动态给下图中类型字段赋值，返回的字段有值，ng-repeat渲染用的数组也有值，option成功渲染了，ng-model也有值，但是就是没有选中对应的option，仔细检查后发现，给ng-model赋的值是一个number类型的，而ng-repeat渲染用的数组中的值是字符串类型的，导致的值匹配不上从而不显示。解决办法：保证ng-model的值和option的value值全等。