前端性能优化策略

一、硬件服务

CDN分发，gzip||Brotli压缩，大小图，缓存，CDN-combo文件组合，多个域名并发请求(分域存放)

二、项目构建

wenpack

大文件切割抽取公共代码
功能或业务为单元代码
相应依赖和公共资源可以放到CDN
babel按需引入工具库与UI库

三、页面上

网络加载类

减少 HTTP 资源请求次数
- CSS/JS combo，CSS sprite

　　合并静态资源图片、JavaScript 或 CSS 代码，减少页面请求数和资源请求消耗

　　避免重复的资源，防止增加多余请求

减小 HTTP 请求大小
- CSS/JS/Images压缩

　　减少没必要的图片、JavaScript、CSS 及 HTML 代码

　　对文件进行压缩优化

异步的优先级，是否需要同时请求多个，需要分段请求
异步的重复请求和异步缓存cache
一些只获取的异步，可以用GET

使用 XMLHttpRequest 时，浏览器中的 POST 方法发送请求首先发送文件头，然后发送 HTTP 正文数据，而使用 GET 时只发送头部，所以在拉取服务端数据时使用 GET 请求效率更高
资源预加载
减少页面重定向
图片懒加载，路由懒加载
分页加载
页面非首次渲染时的组件启用懒加载或预加载

mate

//为 HTMl 内容设置 CaChe-Control 或 Expires 可以将 HTML 内容缓存起来，避免频繁向服务器端发送请求。
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2016 23:00:00 GMT" />
//合理设置 Etag 和 Last-Modified 使用浏览器缓存，对于未修改的文件，静态资源服务器会向浏览器端返回304，让浏览器从缓存中读取文件，减少 Web 资源下载的带宽消耗并降低服务器负载
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2016 23:00:00 GMT" />

其他
- 将 CSS 或 JavaScript 放到外部文件中，避免使用标签直接引入
- 避免页面中空的 href 和 src - 阻塞了页面中其他资源的下载进程
- 对js||css文件进行合理拆分或延后加载，保证关键路径的资源能快速加载完成

页面渲染类

开发规范，减少代码混入和冗余
CSS 资源引用放到 HTML 文档顶部，浏览器可以优先下载 CSS 并尽早完成页面渲染
脚本文件可以放在HTML文档底部后面
- 防止 JavaScript 的加载和解析执行对页面渲染造成阻塞
- 除非被标记为异步或者通过其他的异步方式加载
```
<script src="main.js" defer></script>
<script src="main.js" async></script>
```
生产环境下避免使用 CSS import 引用加载 CSS
减少处理循环步骤，避免运行耗时的 JavaScript
减少 DOM 元素数量和深度
尽量减少在 HTML 中直接缩放图片（动画卡顿）
避免使用 CSS 表达式或 CSS 滤镜
生成css雪碧图，更新background-position属性值
小图片一键生成base64编码
尽量避免使用 table，iframe 等慢元素

前端灾备策略

灾备是为了保持线上业务在极端很差网络环境下的高可用性，具体做法如下：

本地缓存：异步接口数据优先使用本地localStorage中的缓存数据
二次请求：接口数据本地无localStorage缓存数据，重新再次发出ajax请求
双层接口：部分接口和域名会上线至CDN，业务调用时优先使用CDN接口，如果一定时间内未请求到数据，会用源站接口再次请求
垫底数据：源站接口万一无法访问，使用预设好的垫底备份数据
接口下线：必要时候，下线非核心业务接口和非核心功能