前端全链路性能优化之研发开发流程优化

前端全链路性能优化之 研发开发流程优化，从混合式开发，CDN/DNS，HTTP，Cookie，服务器，HTTPS，HTP-2等方面实现对研发开发流程的优化。

前端全链路性能优化之 研发开发流程优化

• 4、HTTP：如何减少 HTTP 请求数？
  • CSS Sprites
  • 图片使用 DataURL、Web Font
  • JS/CSS 文件合并
  • JS/CSS请求 Combo
  • 接口合并
  • 接口存储 LocalStorage
  • 静态资源存储 LocalStorage
• 5、Cookie：减少 Cookie 大小的策略和益处
  • 策略
    • 主站首页设置白名单
    • 定期删除非白名单 Cookie
  • 好处
    • 减少页面间传输大小
    • 对 Cookie 进行有效管理
• 6、服务器
  • 缓存配置和优化方案
    • Expires
      • 定义
        • 响应头包含日期/时间，即在此时候之后，响应过期
        • 无效的日期，比如 0 ，代表着过去的日期，即该资源已经过期
        • 如果在 Cache-Control 响应头设置了“max-age”或者“s-max-age”指令，那么Expires头会被忽略
      • 语法：
        • Expires：Tue, 17 Dec 2019 07:01:44 GMT
      • 实例：
        • Expires：Tue, 17 Dec 2019 07:01:44 GMT
    • Cache-Control
      • 定义
        • 通用消息头字段，通过指定指令来实现缓存机制。缓存指令是单向的，这意味着在请求中设置的指令，不一定被包含在响应中
      • 语法
        • Cache-Control：max-age=【设置缓存存储的最大周期，超过这个时间缓存被认为过期（单位秒）。与 Expires 相反，时间是相对于请求的时间】
      • 实例
        • Cache-Control：max-age=600
    • ETag
      • 定义
        • HTTP 响应头是资源的特定版本的标识符。这可以让缓存更高效，并节省带宽，因为如果内容没有改变，Web服务器不需要发送完整的响应。而如果内容发生了变化，使用 ETag 有助于防止资源的同时更新相互覆盖
        • 如果给定 URL 中的自愿更改，则一定要生成新的 ETag 值。因此 ETags类似于指纹，也可能被某些服务器用于跟踪。比较 ETags 能快速确定此资源是否变化，但也可能被跟踪服务器永久存留
      • 语法：
        • ETag: "<etag_value>"
      • 实例
        • ETag: "<5c6ccc12-1d45>"
    • Last-Modified
      • The Lat-Modified 是一个响应首部，其中包含源头服务器认定的资源作出修改的日期及时间。它通常被用作一个验证器来判断接收到的或者存储的资源是否彼此一致。由于精确度比 ETag 要低，所以这是一个备用机制。包含有 If-Modified-Since 或 If-Unmodified-Since 首部的条件请求会使用这个字段
      • 语法
        • Last-Modified：<day-name>，<day>，<month>，<year>，<hour>：<minute>：<second> GMT
      • 实例
        • Last-Modified：Web, 20 Feb 2019 03:40:02 GMT
    • Date
      • 定义：
        • Date 是一个通用首部，其中包含了报文创建的日期和时间
      • 语法
        • Date：<day-name>，<day>，<month>，<year>，<hour>：<minute>：<second> GMT
      • 实例
        • Date：Tue, 17 Feb 2019 03:40:02 GMT
    • Status
      • 定义
        • HTTP 响应状态代码指示特定 HTTP 请求是否已成功完成。响应分为五类：信息响应（100 - 199），成功响应（200 - 299），重定向（300 - 399），客户端错误（400 - 499）和服务器错误（500 - 599）
      • 实例
        • Status：200
  • 如何开启和配置gzip压缩
    • 好处
      • 对文本进行压缩（HTML / CSS / JS）
      • 而对非文本不压缩（jpg / gif / png）
      • 压缩比约 50% - 70%
    • 配置方法
      • Nginx 配置：nginx.conf 文件增加 gzip on
      • Apache 配置：AddOutputFilterByType 和 AddOutputFilter
    • 生效检测
      • Response header 查看是否有 Content-Encoding：gzip，代表服务端已开启 gzip
• 7、HTTPS：如何开启全站 HTTPS
  • 基本概念
    • HTTPS，超文本传输安全协议（HyperText Transfer Protocol Secure）是一种通过计算机网络进行安全通信的传输协议
    • HTTPS 是经 HTTP 进行通信，但利用 SSL / TLS 进行数据加密
    • HTTPS 主要目的是提供对服务器身份认证，保护数据隐私和完整性
  • 工作原理
    • 浏览器发起 HTTPS 请求
    • 传输证书
    • 浏览器解析证书
    • 传送加密信息
    • 服务器解密信息
    • 传输加密后的信息
    • 浏览器解密信息
  • 优点
    • SEO
    • 安全
  • 实施
    • 经销商购买证书
      • GoGetSSL
      • SSLs.com
      • SSLmate.com
    • 本地测试证书
      • 本地 HomeBrew 安装：brew install mkcert
      • 本地安装根证书：$ mkcert --install
      • 本地生成签名：$mkcert 123.com //生成 123.com 的证书
      • 本地 nginx 配置
• 8、HTTP-2：升级 HTTP-2 的好处有哪些？如何升级？
  • HTTP / 2 概念
    • HTTP / 2（超文本传输协议第 2 版，最初命名为 HTTP 2.0 ），简称为 h2（基于 TLS/1.2 或以上版本的加密连接）或 h2c（非加密连接），是 HTTP 协议的第二个主要版本
  • HTTP / 2 优点
    • 采用二进制格式传输数据
    • 多路复用，允许通过一个 HTTP / 2 连接发起多个请求
    • 对 Header 头压缩（Header Compression），传输体积小
    • 服务端推送（Server Push），服务端能够更快的把资源推送给客户端
  • HTTP / 2 站点的优势
    • 可以降低服务器压力
    • 提升网站访问速度
    • 保护网站安全
  • 在 Nginx 上启用 HTTP / 2
    • 升级 OpenSSL：$ openssl version
    • 重新编译
      • $ cd nginx-xxx
      • $ ./configure --with-http_ssl_module --with-http_v2_module
      • $ make && make install
    • 验证 HTTP / 2
      • 浏览器下查看有没有小绿锁
    • 浏览器请求截图
• 3、DNS：主流的 DNS 优化方法有哪些？
  • 定义
    • 域名系统（Domain Name System）是将网站域名和 IP 地址相互映射的一个分布式数据库，能够更方便的访问互联网
  • 客户端处理
    • Android DNS 模块（okhttp）
      • 支持 HTTP/2 ，HTTP/2 通过使用多路复用技术在一个单独的 TCP 连接上支持并发，通过在一个连接上一次性发送多个请求来发送或接收数据
      • 如果 HTTP/2 不可用，连接池复用技术也可以极大减少延时
      • 支持 GZIP，可以压缩下载体积
      • 相应缓存可以完全避免网络重复请求
      • 如果服务器配置了多个IP地址，当第一个 IP 连接失败的时候，OkHttp会自动尝试下一个 IP
    • iOS DNS 模块（自研）
      • App 启动时，缓存所有可能要用到的域名 IP ，同时异步处理，客户端无需得到缓存结果
      • 如果 Cache 中有此域名的缓存，直接返回缓存的 IP
      • 如果缓存中没有此域名，则重新向 HTTPDNS SERVER 进行申请，结果会在此回调中返回
  • 前端处理
    • 浏览器并发数限制，分布设置成多个域名
      • 用户访问：Java、PHP等 API 接口
      • 页面和样式：HTML/CSS/JS
      • 图片：jpg、png、gif 等
• 2、CDN：如何合理配置 CDN 缓存？
  • 定义
    • 内容分发网络（Content Delivery Network，简称 CDN）是利用最靠近每一位用户的服务器，更快、更可靠地将文件发送给用户分发网络
  • 优点
    • 提速：会给用户指派较近、较顺畅的服务器节点，将数据传输给用户
    • 低成本：服务器被放到不同地点，减少了互连的流量，也降低了带宽成本
    • 高可用度：当某个服务器故障时，自动调用邻近地区的服务器
  • CDN 回源
    • 回源是指浏览器访问 CDN 集群上静态文件时，文件缓存过期，直接穿透 CDN 集群而访问源站机器的形为
  • CDN 缓存
    • 三级缓存：浏览器本地缓存、CDN 边缘节点缓存、CDN 源站缓存
    • 缓存设置：缓存时间设置得过短，CDN 边缘节点缓存经常失效，导致频繁回源，增大了源站负载，访问也慢；缓存时间设置的过长，文件更新慢，用户本地缓存不能及时更新；所以结合业务情况而定
    • 不同静态资源类型缓存时间
      • HTML：3分钟
      • JS、CSS：10分钟、1天、30天
  • CDN 灰度发布
    • 原理：在部分地区、部分地区的部分运营商优先发布静态资源，验证通过后，再进行全量发布
    • 实施：域名方面，设置特殊 VIP 解析至要灰度的城市、运营商；源站机器方面，给灰度的城市、运营商配置单独源站机器；灰度城市、运营商解析至这些特有机器上
  • CDN 大促备战
    • 增加机房带宽
    • 增加运营商流量
    • 灾备：CDN应用缓存时间由10分钟设置成1个小时，大促后恢复
• 1、 混合式开发
  • 小程序内核及优势介绍
    • 愿景
      • 触手可及：用户扫一扫或者搜一下即可打开应用
      • 用完即走：不用关心是否安装太多应用
    • 技术优势
      • H5相比 App 开发，开发门槛更低
      • 优于 H5，接近 Native 体验
      • 相机、位置、网络、存储等丰富的原生能力
      • 顶部下拉、搜索、扫码等入口，用完即走，简单方便
      • 不用像 App 那样下载，直接打开退出即可，支持热更新
    • 底层内核
    • 行业背景
      • App 平台侧
        • 流量变现
        • 小程序生态
        • 类应用分发市场
      • 企业应用侧
        • 移动流量枯竭，新流量红利
        • 解决部分获客难问题，极低的拉新成本
        • 大幅降低开发成本
        • 业务上更多的试错机会
    • 选型建议
      • 首次发布：2017年1月（微信小程序）
      • Github Starts：闭源
      • 社区活跃：还可以
      • 组件：非常丰富
      • 学习曲线：非常低
      • Native 性能：还可以
      • 综合建议：平台类产品，现在有流量输出给商家端；多个App，实现业务互通；和RN、Flutter相比，更推荐小程序
  • Flutter内核及优势介绍
    • 愿景
      • 一个拥有美好构建体验的便捷式的工具包，可以让你在屏幕的任何地方绘制像素
    • 技术优势
      • 编写一次，即可部署各终端：Web、Android/iOS、Mac/Linux/Windows、Fuchsia OS
      • 底层使用 Skia 图形引擎，图形性能媲美原生应用
      • 界面像一款全屏应用程序或 2D 游戏
      • 速度快，使用本机 ARM 二进制文件，提前编译，不需要 JVM
    • 底层原理
    • 选型建议
      • 2017年5月
      • Github Starts：8.16w（2019年底）
      • 社区活跃一般
      • 组件是专用小部件，不够丰富
      • 学习曲线相对较高，从新熟悉 Dart 语言
      • Native 性能最好
      • 综合建议：考虑性能，业务面向多终端，App 团队人足够，建议选择