web前端—基础知识02讲

什么是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;//string
typeof s2;//Object
s2.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;
}
<button class='btn'>我是按钮</button>
复制代码

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常见的属性：

  

• iframe框架原理1
• iframe框架原理2