感谢掘金守候i的文章分享
感谢b站up主技术蛋老师的精彩分享
ES6新特性
| 标题 | 内容 | 备注 |
|---|---|---|
| let和const 变量声明 | ||
| 箭头函数 | 不能用做构造函数，无this、arguments等 | |
| 模板字符串 | My name is ${name}, I am ${age} | |
| 解构赋值 | 可将属性/值从对象/数组中取出,赋值给其他变量 | |
| 模块化 | export、import | |
| 扩展操作符 | ... | |
| 对象属性简写 | cat, cat:cat | |
| Promise | 异步解决方案 | |
新增数据类型Symbol |
变量声明
声明方法：var、const、let、function、class、import
| var | let | const | |
|---|---|---|---|
| 变量提升 | √ | × | × |
| 全局变量 | √ | × | × |
| 重复声明 | √ | × | × |
| 重新赋值 | √ | √ | × |
| 暂时死区 | × | √ | √ |
| 块作用域 | × | √ | √ |
| 只声明不初始化 | √ | √ | × |
HTML5 新特性
| 标题 | 内容 | 备注 |
|---|---|---|
| 新增元素 | 语义化标签使页面的内容结构化 页面布局由 DIV+CSS过渡为语义化 | aside、header、section、footer |
| 新增API | Canvas用笔刷绘制2D位图 SVG用标签绘制不规则矢量图 | SVG节点多时渲染慢，Canvas性能更好但写得复杂 SVG 支持分层和事件，Canvas 不支持 可用库实现 |
| 新增API | 音频audio视频video | 浏览器原生支持无需安装 |
| 新增API | XMLHttpRequest升级版 | 通过CORS实现了跨源XMLHttpRequest 请求包含一个Origin头部为服务器提供HTTP请求的源信息 |
| 新增API | WebSockets 在单个TCP连接上通讯协议 新建WebSocket实例+目的URL，可连接远程主机 | BS之间一次握手建立通道后互传数据 send方法向服务器发送数据 onmessage事件接收响应 |
| 新增API | 表单属性 placeholder等 | |
| 新增API | Web Storage API 在本地存储用户的浏览数据 只允许该网页访问使用 | localStorage无时间限制 保存在客户端本地 手动删除 sessionStorage针对一个session的关闭窗口数据删除 保存在session中 |
| 新增API | Web Workers API | 允许 JS 脚本创建多线程，但子线程受主线程控制，且不得操作 DOM |
CSS3 新特性
| 标题 | 内容 | 备注 |
|---|---|---|
| 盒模型 | box-sizing:border-box (边框和padding包含在元素的宽高之内) box-sizing:content-box (边框和padding不包含在元素的宽高之内) | |
| 媒体查询 监听屏幕尺寸的变化 | 做响应式网站 | |
| 弹性布局 可控制下级盒子的位置 | ||
| 栅格布局Grid | ||
| 动画 animation | @keyframes 做一个预设的动画和一些页面交互的动画效果 | logo展示动画、loading效果、音乐震动条 |
| 过渡 transition 元素从样式1渐变为样式2的效果 补充中间帧 | 指定要添加效果的CSS属性指定效果的持续时间 | hover动画、下拉菜单、焦点图、手风琴 |
| 形变 transform | 属性有位移translate、缩放scale、旋转rotate、倾斜skew | |
| 阴影 box-shadow | ||
| 颜色表示 | rgba(rgb为颜色值，a为透明度) | |
| 渐变 | 线性渐变 background: linear-gradient 径向渐变Radial Gradients 圆锥渐变 |
CSS布局
CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table（表格）布局，然后用float(浮动)，position（定位）和inline-block（行内块）布局，但是这些方法本质上是hack，遗漏了很多功能，例如垂直居中。后来出了flexbox(盒子布局)，解决了很多布局问题，但是它仅仅是一维布局，而不是复杂的二维布局，实际上它们（flexbox与grid）能很好的配合使用。Grid布局是第一个专门为解决布局问题而创建的CSS模块。
媒体查询
能使页面在不同终端设备下达到不同的效果，会根据设备的大小自动识别加载不同样式。
设置 meta 标签
使用设备的宽度做为视图宽度并禁止初始的缩放，也就是PC端与移动端显示效果相同的响应式：
<meta name="viewport" content="width=device-width,
initial-scale=1,minimum-scale=1,maximum-scale=1,
user-scalable=no,viewport-fit=cover">
媒体查询语法
@media screen and (max-width:768px){
// 设备宽度小于 768px 加载样式：
body{background-color:red};
}
@media screen and (max-width:992px) and (min-width:768px){
// 设备宽度介于 768px~992px 之间 加载样式：
body{background-color:pink};
}
@media screen and (min-width:992px){
// 设备宽度大于 992px 加载样式：
body{background-color:green};
}
HTTP、WebSocket、WebRTC
HTTP
客户端没发送请求给服务器之前，服务器不会主动响应。客户端发请求后服务器才作反应，是单向的传输数据。若想持续获取资源得不断重复请求。
长轮询 Long polling
客户端让HTTP请求保持持久连接，服务器需腾出资源给长轮询，就算没数据的时候也得保持连接。
WebSockets
专门做“实时”应用的协议。开始时使用HTTP，后面保持TCP持久连接，请求URI用的是ws或wss：
"ws:""//"host[":"port]path["?"query]
"wss:""//"host[":"port]path["?"query]
在HTTP协议里对应的是HTTP和HTTPS，客户端发起WebSockets请求，需要在请求首部里做出说明：
Connection:Upgrade
Upgrade:webSocket
Sec-WebSocket-Key: // 提供给服务器验证是否收到有效的webSockets请求
Sec-WebSocket-Version:
服务器收到这个请求后就会看到连接要求升级，升级为什么直接在Upgrade里找，得到webSocket，于是服务器就知道客户端要建立WebSockets连接。服务器响应内容与请求一致，表明验证了连接已经被升级了。
101 Switching Protocols // 服务器正式做出响应前发出
Connection:Upgrade
Upgrade:webSocket
Sec-WebSocket-Accept: // 表示服务器同意建立连接，根据请求里Key的值来生成
以上建立连接后，正式可以双向传输数据。
Socket.io库
用到了WebSockets协议，但是对于不支持WebSockets的浏览器会回退到HTTP轮询，并提供自动重连。Socket.io库可以实现聊天应用。
WebRTC
一种实时通讯(Real-Time Communications)技术，实现了基于网页的视频会议，不借助中间媒介建立浏览器之间点对点的连接，实现视频流和音频流或其他任意数据的传输。
WebRTC的应用场景
- 直播
- 游戏
- 视频会议/在线教育
- 屏幕共享/远程控制
