前端性能工程化：优化策略

一、优化网络传输

1.开启HTTP2.0
2.使用CDN部署静态资源
3.使用DNS预解析
4.提前建立网络连接
5.域名收敛，把页面的静态资源部署在尽可能少的域名下，节省DNS解析、TCP建连等网络成本
6.使用brotli压缩，google在15年发布的Brotli压缩算法，比gzip具有更高的压缩比和更快的压缩性能。
7.优化https,https多次握手和TLS相关算法会造成额外的开销导致没有优化过的https性能相比http差距较大。、优化方法如下：
1.Session Resume，把昂贵的计算结果保存在Session中复用
2.OCSP Stampling 由服务端直接返回OCSP内容，而不需要客户端额外查询
3.使用TLS1.3 只需要一次RTT即可完成握手
4.TCP Fast Open 一个RTT得时间内syn包发出的同时捎上应用层的数据
5.HSTS 强制客户端（浏览器）使用HTTPS与服务器创建连接。

二、优化使用缓存

1.DNS缓存
2.宿主浏览器缓存 (1)Memory缓存(2)Cache API缓存
3.运行时缓存(1)cookie(2)localstorage(3)db(4)memory

三、静态资源加载

1.资源预加载 预加载下级页面的资源
2.HTML加载 控制HTML体积（传输体积不要超过30kb，减少DOM节点和属性，压缩HTML代码，少使用内联）
3.使用骨架屏（骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面。）
4.JS加载
异步加载 控制加载时机动态添加js脚本
优化文件体积 (1)压缩(2)按需加载(3)精准控制Polyfill(4)充分使用tree shaking(5)谨慎引入第三方库
优化网络请求 (动静分离)尽可能利用http持久化缓存(主次分割)先加载处理主要模块后加载处理次要模块 打包优化
5.CSS加载
优化文件体积 (1)压缩，启用Brotli/Gzip网格压缩(2)精准控制Prefix，只生成需要的样式(3)取出冗余样式，使用PurifyCSS 或 CSS Module
6.图片加载 控制加载时机 懒加载 使用webp、png、jpg等格式，避免使用bmp，gif等格式， 图面大图拆分，小图合并，媒体查询，使用缓存等
7字体加载 控制加载时机，主要字体体积小就内联到html中，体积大使用预加载，次要字体常规加载或者懒加载 控制加载策略 关键字配置为font-display：block，次要字体配置为font-display：swap
考虑兼容性和字体大小 PC:woff格式字体，移动端：ttf格式字体
字体剪裁 使用工具剪裁字体，生成字体子集

四、代码运行时

HTML需注意减少DOM元素数量，使用innerHTML来增删多个元素，使用getElementByXX 来选择元素，不用document.write引入脚本
JS需注意代码拆分，网络请求提前，避免出现CPU高占用，合理使用内存避免内存泄漏，使用Chrome调试工具发现CPU和内存性能问题
CSS需注意不使用@import，使用现代布局方案，谨慎使用昂贵的属性，优先使用CSS来实现动画，动画尽可能触发GPU硬件渲染优化避免高频回流重绘

五、服务接口

1.网络链路：api动态加速，HTTPDNS，避免跨机房
2.存储：Mysql，Redis，Local Cache