前端知识杂项（二）

发表于

CSS BFC是什么

BFC：block formating context，块格式化上下文，与布局相关
分类：块盒、行内盒、匿名盒。
定位方案：常规布局、浮动布局、绝对定位

CSS3和HTML5新特性

CSS3：选择器、圆角、多列布局、阴影、渐变、弹性布局、tranform、transition过渡、动画。。。
HTML5：canvas、svg、标签语义化、video、audio、表单Input属性…

CSS水平垂直居中居中方法

  • 宽高已知情况下：
1
2
3
4
5
6
7
8
.div{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
1
2
3
4
5
6
7
8
9
.div{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
}

flex布局实现

1
2
3
4
5
6
7
8
.div{
  display: flex;
  justify-content:center;
  align-items: center;
  /* 注意这里需要设置高度来查看垂直居中效果 */
  background: #AAA;
  height: 300px;
}

  • 未知宽高情况下

transform 实现

1
2
3
4
5
6
.div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
}

table布局实现

1
2
3
4
5
6
7
.div {
  display: table;
}
.div .item {
  display: table-cell;
  vertical-align: middle;
}

requestAnimationFrame

前端动画神奇，在没有requestAnimationFrame和css3之前，javascript实现动画都是基于计时器setTimeout和setInterval，他们都不够精确，内在运行机制决定了时间间隔参数设计师只是指定了把动画代码添加在浏览器UI线程队列中等待执行，如果队列前面假如了其他的任务，那动画就要等前面的任务完成后再执行。requestAnimationFrame采用系统时间间隔，保证最佳的绘制效率，不会因为间隔时间过短造成过度绘制，增加开销，也不会因为间隔时间过长，使得动画不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。
特点：

  • requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
  • 在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量
  • requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销

详情查看 MDN RequestAnimationFrame

ES6新特性

扩展运算符（spread）、let和const命令、变量的赋值与取值（Destructuring）、箭头函数、参数默认值、Symbol、Set和Map、Proxy和Reflect、Promise、Class等等。详见阮一峰ES6入门

MVVM

model-view-viewModel，mvc的改进版。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。

CORS

跨域资源共享（Cross-Origin Resource Sharing），跨域为不同域、不同端口或不同协议之间的请求。

  • Access-Control-Allow-Credentials：是否允许传递cookie
  • Access-Control-Allow-Methods：允许的请求方式
  • Access-Control-Allow-Headers：格式为一个逗号分隔的列表，表示服务器将会支持的请求头部值

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）

1.请求方法是以下三种方法之一：

  • HEAD
  • GET
  • POST

2.HTTP的头信息不超出以下几种字段：

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。
对于非简单请求的CORS请求，请求会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的请求，否则就报错。

http和https

http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份。