学习总结
http 1-3区别
HTTP 1.0
无状态，无连接；
短连接：每次发送请求都要重新建立tcp请求，即三次握手，非常浪费性能；
无host头域，也就是http请求头里的host；
不允许断点续传，而且不能只传输对象的一部分，要求传输整个对象。
HTTP 1.1
长连接，流水线，使用connection:keep-alive使用长连接；
请求管道化；
增加缓存处理(新的字段如cache-control)；
增加Host字段，支持断点传输等；
由于长连接会给服务器造成压力。
HTTP 2.0
二进制分帧；
多路复用(或连接共享)，使用多个stream，每个stream又分帧传输，使得一个tcp连接能够处理多个http请求；
头部压缩，双方各自维护一个header的索引表，使得不需要直接发送值，通过发送key缩减头部大小；
服务器推送(Sever push)。
HTTP 3.0
基于google的QUIC协议，而quic协议是使用udp实现的；
减少了tcp三次握手时间，以及tls握手时间；
解决了http 2.0中前一个stream丢包导致后一个stream被阻塞的问题；
优化了重传策略，重传包和原包的编号不同，降低后续重传计算的消耗；
连接迁移，不再用tcp四元组确定一个连接，而是用一个64位随机数来确定这个连接；
更合适的流量控制。
适配刘海屏水滴屏、
第一步，设置网页在可视窗口的布局方式
<meta name=“viewport” content=“width=device-width, viewport-fit=cover”>
iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：
contain: 可视窗口完全包含网页内容（左图）
cover：网页内容完全覆盖可视窗口（右图）
auto：默认值，跟 contain 表现一致
constant 函数
iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：
/* body 在横屏底下和竖屏底下一定要做好定位，不然/
/ 竖屏底下的查询 /
@media screen and (orientation: portrait) {
body {
/ 防止页面被刘海遮住 /
padding-top: constant(safe-area-inset-top);
//以防万一写一个你本身适配其他手机的
padding-top:0px;
}
}
/ 横屏底下的查询 /
@media screen and (orientation: landscape) {
body {
/ IOS 11支持/
padding-right: constant(safe-area-inset-right);
padding-left: constant(safe-area-inset-left);
padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
/IOS 11.2版本版本支持*/
padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left);
padding-bottom: env(safe-area-inset-bottom);
//以防万一写一个你本身适配其他手机的
padding-right:0px;
padding-left:0px;
padding-bottom:0px;
}
}
//单点登录
1、登录主系统，获取各个子系统的token；
2、点击项目地址链接后，创建一个隐藏iframe并使用postMessage将token传递过去，iframe接收后将token存到iframe所对应的域名下的localStorage；
3、通过window.open(url, ‘_blank’)打开一个新地址；
4、移除该iframe
//渲染大量数据
1.createDocumentFragment（）碎片节点
渲染大数据时，将数据分成一段一段执行，createDocumentFragment()创建一个虚拟节点对象，将一部分数据先添加到DocumentFragment中，再统一将DocumentFragment添加到页面，会减少页面渲染DOM的次数，效率会明显提
2.requestAnimationFrame（）
上面的代码中使用到了requestAnimationFrame（）， 实现动画效果的方法比较多，javascript中可以通过定时器setTimeout来实现，css3可以使用transition和animation来实现，html5中的canvas也可以实现。除此之外html5还提供一个专门用于请求动画的API, 即requestAnimationFrame(rAF), 直译就是 “请求动画帧”，requestAnimationFrame会把每一帧中的所有dom操作集中起来,在一次重绘和回流中完成,并且重绘或回流的时间间隔紧紧会随浏览器的刷新频率,一般来说频率为每帧60秒 在
//函数科里化
function print(company, department, name, age) {
console.log(我是 ${company} ${department} 部门的 ${name}，${age} 岁);
}
=》
function curry(company, department) { //接收固定的公司、部门
return function (name, age) {
console.log(我是 ${company} ${department} 部门的 ${name}，${age} 岁);
}
}
//es5 和es6继承区别
// 父类：function SuperType；子类：function SubType；
SubType.prototype = new SuperType(); // SubType 继承 SuperType
// 根据上一节原型链讲到的知识点：实例化对象的__proto__等于构造函数的prototype
SubType.prototype.proto === SuperType.prototype // true
ES5 的继承，实质是先创造子类的实例对象this上，然后再将父类的方法添加到这个this上
class SubType extends SuperType {
constructor() {
super();
this.b = 'world';
}
}
let b=new SubType
ES6的继承机制完全不同，实质上是先创造父类的实例对象this，并将父类的属性和方法放到this上（前提是通过super函数调用），然后再用子类的构造函数修改this。
//混合app 开发通过h5与原生app传参
jsbridge 通信
window.JSActionBridge
