什么是XSS

• XSS（跨站脚本攻击）：是指在向网页中注入恶意代码，当用户浏览网页的时候执行恶意脚本的攻击方式
• 跨站脚本攻击的两种方式：
  • 反射性攻击：诱使用户点击一个嵌入恶意脚本的链接以达到攻击的目标，目前有很多攻击者利用论坛、微博发布含有恶意脚本的URL就属于这种方式
  • 持久性攻击：将恶意脚本提交到被攻击网站的数据库中，用户浏览网页时，恶意脚本从数据库中被加载到页面执行
• 预防XSS的方式：
  • 通过消毒的方式危险字符进行转义，httpOnly(js无法获取cookie数据)

CSRF(跨站请求伪造)

• 是攻击者通过跨域请求，已合法的用户身份进行非法的操作，其原理是利用浏览器的cookie和服务器的session盗取用户信息
• 解决攻击的主要方式是通过识别请求者身份
  • 在表单中添加令牌token
  • 验证码
  • 检查请求头中的referer
• 架设防火墙是保证web安全的重要保障

移动端300ms延迟问题

• 产生的原因：一般情况下，如果没有做特殊的处理，移动端的浏览器在派发事件的时候会有一个300ms 的延迟，因为手机端事件 touchstart –> touchmove –> touchend or touchcancel –> click，因为在touch事件触发之后，浏览器要判断用户是否会做出双击屏幕的操作，所以会等待300ms来判断，再做出是否触发click事件的处理，所以就会有300ms的延迟
• 解决的方式：
  • FastClick库它是专门为移动端浏览器300ms问题设计的轻量级的库，实现的原理是：当设备检测到touchEnd事件的时候会通过DOM自定义事件立即触发一个click事件，并把300ms延时的click阻止 掉,把它作用到document上面是因为事件存在冒泡行为，会冒泡到document上面
  • 禁用浏览器的缩放功能：禁用此功能后浏览器的缩放功能就会禁用，此时浏览器就会禁用默认的双击缩放功能并且去掉300ms的延时
  • 更改默认的视口宽度我设备宽度：会默认禁用浏览器的默认缩放功能，因为双击缩放主要是用来改善桌面站点在移动端浏览体验的。

正则表达式

• 正则表达式的两种方式：
  • var reg = /xyz/;
  • var reg = new RegExp('xyz');
  • 它们两种表达方式的区别：字面量的表达方式是在引擎编译代码的时就会新建正则表达式，效率是比较高的，第二种方式是在运行时新建正则表达式
• 实例属性：
  • 与修饰符相关的属性
  • RegExp.prototype.ignoreCase():返回一个布尔值，表示是否设置了i修饰符
  • RegExp.prototype.global():返回一个布尔值，表示是否设置了g修饰符
  • RegExp.prototype.multiline():返回一个布尔值表示是否设置了m修饰符
  • 与修饰符无关的属性
  • RegExp.prototype.lastIndex():返回一个整数表示下一次开始搜索的位置
  • RegExp.prototype.source():返回正则表达式的字符串形式，不包括斜杆
• 实例方法
  • RegExp.prototype.test();返回一个布尔值，表示当前模式是否能匹配参数字符串,加不加g修饰符是有差别的
  • RegExp.prototype.exec();用来返回匹配结果，如果发现能够匹配就返回一个数组，成员是匹配成功的字字符串，如果不能就返回一个null，加不加g修饰符也是有很大的区别的
• 字符串的实例方法
  • String.prototype.match();返回一个数组，数组成员是所有匹配的结果
  • String.prototype.search();返回一个整数，结果是匹配成功时的索引
  • String.prototype.replace();
  • String.prototype.split();
• 匹配规则
  • 字面量字符和元字符
    • 字面量字符：例如/a/就表示匹配a
    • 元字符：
      • (.)点字符：匹配会车换行行分割符段分割符以外的所有字符，注意点：码点大于0XFFF 的点字符不能正确匹配
      • 位置字符：用来提示字符所处的位置，^表示字符串的开始位置，$表示字符串的结束位置
      • | 表示选择符，或的关系
      • \ 表示
      • \*
      • +
      • ?
      • ()
      • []
      • {}
    • 特殊字符：正则表达式对一些特殊的不能打印的字符提供了表单方式
    • 字符类
      • [^]:如果方括号内的第一个字符是^，表示除了字符类之中的字符，/[^abc]/表示除了abc不能匹配，其他的都是可以的
      • [^]:如果方括号中只有一个^，表示匹配一切字符，与(.)相比，它是可以匹配换行符的，注意点：脱字符只有字字符串的第一个位置才是有效的
      • -：表示字符的连续范围，例如：[a-z],[0-9],[1-31]，注意点：最后一个只表示匹配1-3,问不是1-31
    • 预定义字符
      • \d :匹配0-9之间的任意一个数，相当于：[0-9]
      • \D :相当于：[^0-9]
      • \w :匹配任意的字母、数字、下滑线、相当于：[a-zA-Z0-9_]
      • \W :相当于：[^A-Za-z0-9_]
      • \s :匹配空格
      • \S :匹配非空格的字符
      • \b :匹配词的边界，也就是说词首必须独立，词尾是否独立未指定
      • \B :匹配非词边界
    • 重复类
      • 模式的精确匹配次数，使用{}表示，{n}表示恰好重复n次，{n,}表示至少重复n次，{n,m}表示至少重复n次，之多重复m次
    • 量词符:用来设定某个模式出现的次数
      • ?：表示某个模式出现0次或1次，相当于：{0,1}
      • *：表示某个模式出现0次或多次，相当于：{0,}
      • +：表示某个模式出现1次或多次，相当于：{1,}
    • 贪婪模式：三个量词符，默认情况下是最大可能的匹配，即匹配知道下一个字符不满足匹配 规则为止，如果我们自三个量词符的后面加上一个？就表示是非贪婪模式，只要满足条件就 停止
    • 修饰符：修饰符可以单个使用也可以一起使用
      • g:表示全局匹配
      • i:默认情况下，正则是区分大小写的，但是加了i修饰符就不会区分大小写了
      • m:修饰符表示多行模式，会改变^和$的行为，默认情况下匹配的是字符串的开始位置和结束位置，加m修饰符表示，^和$还会匹配行首和行尾
    • 组匹配：正则表达式的括号表示分组匹配，括号中的模式可以用来匹配分组的内容，还可以使用\n，n是从1开始的整数，表示引用括号匹配的内容
    • 非捕获组:(?:x)表示不返回该组匹配的内容，即匹配的结果中不计入这个括号
    • 先行断言：x(?=y),x只有在y前面才匹配，y不会被计入返回结果
    • 先行否定断言：x(?!y):表示x只有不在y前面匹配，y不会被计入返回结果

\b的基本使用：/\bworld/.test('hello world');//true/\bworld/.test('hello-world');//true/\bworld/.test('helloworld');//false//组匹配/fred+/.test('fredd');//true/(fred)+/.test('fredfred');//true复制代码

字符串字面量和new String()之间的区别：

var s1 = 'abc';var s2 = new String('abc');typeof s1;//stringtypeof s2;//Objects2.valueOf();//'abc'复制代码

• 上面代码中s1是字符串，而s2是字符串对象，s2.valueOf()返回的就是对应的原始字符串，字符串对象是一个类似数组的对象，

箭头函数

• 箭头函数和普通函数的区别：
  • 箭头函数没有prototype(原型)，所以箭头函数本身是没有this关键字的
  • 箭头函数中的this是在定义的时候，继承外层普通函数的this，如果外层函数的this发生变化，箭头函数的this也是会发生变化的。
  • 箭头函数外层如果没有普通函数，严格模式或非严格模式下它的this指向window，
  • 箭头函数中不能使用arguments

移动端扩大点击区域的设置

• 为了增加用户体检，我们可以给按钮设置一个隐藏的扩大区域点击

.btn{    width: 30px;    height: 30px;    position:relative;//设置父元素为相对定位}.btn::before{    content: ''    position:absolution;    top: -10px;    right: -10px;    bottom: -10px;    left: -10px;}我是按钮复制代码

babel-runtime 和babel-polyfill

• 如果我们没有设置一些规则babel只会转换新的js语法，而不会转换新的api
• babel-polyfill:原理是当运行运行环境中并没有实现的一些方法，babel-polyfill会做兼容，但是这样做事会污染全局变量的，而且项目打包以后体积会增大

自定义事件

//创建时间对象let myEvent = new customEvent('customEventName',{    detail: {//将需要传递的数据写在detail中，便于在EventListener中获取到        a: 1      }});分派事件：由于自定义事件不是js内置事件，所以我们需要手动的触发它if(window.dispatchEvent) {  //兼容低版本的IE    window.dispatchEvent(myEvent);} else {    window.fireEvent(myEvent);}//监听事件window.addEventListener('customEventName', e => {    console.log(e)    console.log(e.detail.a) // 1})复制代码

CDN

• CDN(content delivery network)内容分发网络，CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡，内容分发，调度等功能模块，使用户就近获取内容，降低网络拥塞，挺高用户访问响应和命中率。
• CDN的关键技术在于内容存储和分发技术
• 负载均衡是整合CDN的核心，负载均衡的准确性和效率直接决定了整个CDN的性能和效率
• 负载均衡技术：是指将网络的流量尽可能的分配到几个能完成相同功能的服务器和网络节点上进行处 理，避免部分网络节点过载而另一部分网络节点空闲的不利状况，这样既可以挺好网络的流量，又可 以提高网络的性能。
• 防护墙：防火墙是位于内部网和外部网之间的屏障，它按照系统管理员预先定义好的规则来控制数据包的进出。防火墙是系统的第一道防线，其作用是防止非法用户的进入

数据扁平化常见的几种方式

• 第一种方式：join & split
• 第二种方式：toString() & split

垃圾回收机制

• 首先是全局变量不会被回收
• 局部变量会被回收，也就是一个函数一但被运行，函数内的变量是会被回收的
• 只要被另一个作用域引用就不会被回收

iframe

• iframe元素会创建包含另一个文档的内联框架（即行内框架）
• iframe常见的属性：