前端性能优化策略
一、硬件服务
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接口，如果一定时间内未请求到数据，会用源站接口再次请求
- 垫底数据：源站接口万一无法访问，使用预设好的垫底备份数据
- 接口下线：必要时候，下线非核心业务接口和非核心功能
