0%

2019 RESUME

发表于 更新于 Valine：
本文字数： 4.4k 阅读时长 ≈ 4 分钟

总结2019年的收获、巩固知识点

  • http
  • es6/es7/es8
  • pwa
  • angular
  • rxjs
  • flutter
  • 微信
  • webpack
  • 其他知识点

Let’s Review !

一、HTTP

1. GET/POST

GET / POST主要区别：属于HTTP协议的两种请求方式，协议规定get用于获取信息，post用于修改数据；当携带参数时，get的参数在url里且长度大多受到服务器或浏览器限制（1024字符），post在body里，post传输的参数在地址栏里不可见所以安全性比get略好，但是在数据传输过程中，他们都是可以被捕获的，所以都是不安全的，所以需要进行加密处理，用到https。本质上最大的区别在于get请求是幂等性的，post不是，引用HTTP协议：

Methods can also have the property of “idempotence” in that (aside from error or expiration issues) the side-effects of N > 0 identical requests is the same as for a single request.

HTTP方法的幂等性是指一次和多次请求某一个资源应该具有同样的副作用, GET http://www.xxx.com/article/1, 无论调用多少次，获取的只是这一篇文章， 如果POST http://www.xxx.com/article/1, 相当于创建一篇文章，如果没有唯一索引（唯一索引保证其幂等性），则每调用一次，都会创建一篇文章，post不具有幂等性。delete，put同样具有幂等性，所以在http协议下get更适合获取，post更适合创建，put更适合更新，现如今更多的只是语义上的区别

2. HTTP报文

http报文有请求报文和响应报文两种。请求报文是从客户端向服务器发送请求报文，响应报文是服务端的回答
一个请求报文由四部分组成：请求行、请求头、空行、请求数据。
请求行包括请求方法字段、url字段、http协议版本字段，并用空格分隔
GET /index.html HTTP/1.1
请求头有字值对组成，典型的请求头有user-agent:浏览器类型，accept:客户端可识别的内容类型列表，host:请求的主机名，accept-encoding：允许的压缩方式，connection:keep-alive保持客户端到服务器连结持续有效，当后续触发请求时，避免建立连接释放连接的开销
最后一个请求头之后是一个空行，发送回车符和换行符，通知服务器之后不会再有请求头
请求数据中常见的有content-type的几个常用类型：application/x-www-form-urlencoded—form表单，multipart/form-data—文件，application/json—JSON字符串

4. URL加载全过程

DNS解析（递归查询）—TCP连接—发送http请求—服务器处理请求响应—浏览器解析渲染—结束连接
DNS查找缓存顺序：浏览器缓存——>hosts文件——>路由器缓存——>网络服务商缓存——>根域名服务器缓存

5. HTTPS

HTTP报文是包裹在TCP报文中发送的，服务器端收到TCP报文时会解包提取出HTTP报文。但是这个过程中存在一定的风险，HTTP报文是明文，如果中间被截取的话会存在一些信息泄露的风险。那么在进入TCP报文之前对HTTP做一次加密就可以解决这个问题了。HTTPS协议的本质就是HTTP + SSL(or TLS)。在HTTP报文进入TCP报文之前，先使用SSL对HTTP报文进行加密。HTTPS在传输数据之前需要客户端与服务器进行一个握手(TLS/SSL握手)，在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL使用了非对称加密，对称加密以及hash等

HTTPS原理详解

7. HTTP缓存

HTTP缓存有多种规则，根据是否需要重新向服务器发起请求来分类，我将其分为两大类(强制缓存，对比缓存)。对于强制缓存来说，响应header中会有两个字段来标明失效规则（Expires/Cache-Control）Cache-Control 是最重要的规则。常见的取值有private、public、no-cache、max-age，no-store，默认为private。常见的http缓存只能缓存get请求响应的资源，对于其他类型的响应则无能为力。

1
2
3
4
5
private:             客户端可以缓存
public:              客户端和代理服务器都可缓存
max-age=xxx:         缓存的内容将在 xxx 秒后失效
no-cache:            需要使用对比缓存来验证缓存数据（后面介绍）
no-store:            所有内容都不会缓存，强制缓存，对比缓存都不会触发


HTTP缓存机制详解

8. cors预请求

很多时候发送一个post请求之前会先发送一个options请求，为什么会这样？cors本身是一种机制（跨域资源共享），为跨域访问提供了安全的数据传输。options作为预请求主要用途有两个：获取服务器支持的http请求方法，检查服务器的性能；ajax进行跨域请求时，需要向另一个域名的资源发送一个options请求用于判断实际要发出的请求是否安全。本身从不同的域访问资源是受到同源策略禁止的，所以cors定义了这种浏览器和服务器交互的形式允许跨域请求。现阶段大部分浏览器都支持cors机制，服务端则需要配置Access-Control-Allow-Origin:*,允许任何域发起请求。
不会触发cors预检的请求称之为简单请求，日常开发满足下列条件的称之为简单请求：1.使用get,post,head其中一种；2.只使用了如下的安全首部字段，没有人为的设置其他首部字段：

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type仅限：text/plain、multipart/form-data、application/x-www-form-urlencoded

    6. 跨域

    解决跨域的方法有很多种。cors是比较好的解决方案。JsonP只支持get请求，但是适配老式浏览器
    9. TCP三次握手
    三次握手的过程：
    主机向服务器发送一个建立连接的请求（您好，我想认识您）；
    服务器接到请求后发送同意连接的信号（好的，很高兴认识您）；
    主机接到同意连接的信号后，再次向服务器发送了确认信号（我也很高兴认识您），自此，主机与服务器两者建立了连接。
    四次挥手的过程：
    主机向服务器发送一个断开连接的请求（不早了，我该走了）；
    服务器接到请求后发送确认收到请求的信号（知道了）；
    服务器向主机发送断开通知（我也该走了）；
    主机接到断开通知后断开连接并反馈一个确认信号（嗯，好的），服务器收到确认信号后断开连接；
    为什么建立连接是三次？为什么断开链接是四次呢？
    为了确保数据全部发送并且防止服务器端一直等待而浪费资源；

10. 性能优化

合理使用缓存，将资源放在浏览器端，这是最快的方式（service worker）；合理进行http缓存；如果资源必须从网络中加载，则要考虑缩短连接时间，即DNS优化部分；减少响应内容大小，即对内容进行压缩，静态资源优化gzip、br；减少reflow的次数；无用代码移除；tree-shaking；差异化加载；减少http请求；预加载；懒加载；节流防抖；内存回收；
will-change优化动画、滚动等效果的性能，尤其在移动端（调动更多的GPU资源进行计算和重绘）
缩减首屏白屏时间：从资源和视觉两方面去优化：懒加载/按需加载（提高首屏加载速度），视觉上可以采取Medium渐变加载的策略，给用户一个柔和的感觉。

二、ES6/ES7/ES8

ES全称ECMAScript，ECMAScript是ECMA制定的标准化脚本语言。

es6的特性跨度和es5比较大，所以es6的特性比较多，es7,es8是在es6的基础上进行的补充。下面列举一些常用的es6特性：

  • 类
  • 模块化
  • 箭头函数
  • 模版字符串
  • 解构赋值
  • Promise
  • let、const
  • 延展操作符
  • 函数参数默认值

es6引入了类的概念，js的面向对象编程更加容易理解。模块化主要有export和import组成，每一个模块都有自己单独的作用域，通过export暴露对外接口，通过import来引用其他模块提供的接口。箭头函数是es6中最重要的特性之一，可以很好的处理this指针的问题，箭头函数中this继承的是父执行上下文中的this，；箭头函数和bind方法，每次执行后都会返回一个新的函数引用。

es7新增Array.prototype.includes(),用来判断一个数组是否包含指定的值，包含返回true，不包含返回false；新增指数操作符，Math.pow(2,10)等价于210；

es8新增async/await;

三、PWA

Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。他的本质上还是一个web app，但是借助了技术使其也具备了native app的部分特性，并兼顾了web app 和 native app各自的优点；
几大特性：

  • 性能提升，能够快速响应，有着相对很平滑的动画体验
  • 一键生成，可以添加到桌面，终端设备，避免应用商店下载，趋向于native app的体验形式
  • 弱网、离线情况下正常运行，通过service-worker代理请求，操作浏览器缓存；
  • HTTPS协议下确保了应用的安全性
  • 持续更新

区别于其他类型APP:

WebAPP：开发成本低，更新简单，体验差，不具备离线和推送功能；
NativeAPP：开发成本高，需审核，需下载；体验好；
HybridAPP：介于web app 和 native-app之间，通过ui-webview访问里面；一套代码多端运行，兼容差，体验差；

Web Worker:
一个网页只会有两个线程：GUI 渲染线程和 JS 引擎线程。JS 引擎线程和 GUI 渲染线程是互斥的，因此在 JS 执行的时候，UI 页面会被阻塞住。为了在进行高耗时 JS 运算时，UI 页面仍可用，那么就得另外开辟一个独立的 JS 线程来运行这些高耗时的 JS 代码，这就是 Web Worker。Web Worker只能服务于新建它的页面，不同页面之间不能共享同一个 Web Worker。
当页面关闭时，该页面新建的 Web Worker 也会随之关闭，不会常驻在浏览器中。
Service Worker 在 Web Worker 的基础上加上了持久离线缓存能力.
依赖Promise、html5 fetch API、缓存机制依赖cache API、https环境。它能够拦截和处理网络请求，并且配合 Cache Storage API，开发者可以自由的对页面发送的 HTTP 请求进行管理，这就是为什么 Service Worker 能让 Web 站点离线的原因。