他们的工程项目基本上加进了上面大部份的强化计划。
后端分项
1、FP，First Paint。
2、FCP，First Content Paint。
3、FMP，First Meaning Paint。
4、ATF，Above The Fold，井字天数
5、TTI，Time To Interact，首度可视化天数，能用DomReady天数。
6、天然资源总浏览天数。Load天数 >= DomContentLoaded天数
（1）Dom读取完天数，DomContentLoaded。
（2）网页天然资源读取完天数，Load，主要包括相片，音频等触发器天然资源。但天然资源读取完后，网页还没全然平衡，全然平衡的天数由finish下定决心。
7、服务器端关键USB读取速率。
8、应用程序开启罐子（WebView）天数。
强化路径
后端操控性强化分成三个路径，其一产业化路径，另两个是技术细节路径。那个基本概念源自于chanLucas HC。
产业化路径
1、应用程序Gzip离线包，服务器天然资源Gzip填充。
2、JS减肥，Tree shaking，ES Module，静态Import，静态Polyfill。
3、相片读取强化，Webp，考量相容性，能提早读取两张相片，巴列德与否全力支持Webp。
4、延后读取不必长文本。透过阻攻，看这类快捷方式内或是子文本与否要调用读取。
6、服务器端渲染，应用程序预渲染。
7、CDN静态天然资源
8、Webpack Dll，通用优先打包抽离，利用浏览器缓存。
9、骨架图
10、数据预取，主要包括USB数据，和读取详情页相片。
11、Webpack本身提供的强化，Base64，天然资源填充，Tree shaking，拆包chunk。
12、减少重定向。
技术细节路径
1、相片，相片占位，相片懒读取。 雪碧图
2、使用 prefetch / preload 预读取等新特性
3、服务器合理设置缓存策略
4、async（读取完当前js立即执行）/defer(大部份天然资源读取完后执行js)
5、减少Dom的操作，减少重排重绘
6、从应用程序层面，井字减少和应用程序可视化，合并USB请求。
7、数据缓存。
8、首页不读取不可视组件。
9、防止渲染抖动，控制时序。
10、减少组件层级。
11、优先使用Flex布局。
卡顿问题解决
1、CSS动画效率比JS高，css能用GPU加速，3d加速。如果非要用JS动画，能用requestAnimationFrame。
2、批量进行DOM操作，固定相片罐子大小，避免屏幕抖动。
3、减少重绘重排。
4、节流和防抖。
5、减少临时大对象产生，利用对象缓存，主要是减少内存碎片。
6、触发器操作，IntersectionObserver，PostMessage，RequestIdleCallback。
操控性强化API
1、Performance。performance.now()与new Date()区别，它是高精度的，且是相对天数，相对于网页读取的那一刻。但不一定适合单网页场景。
2、window.addEventListener(“load”, “”); window.addEventListener(“domContentLoaded”, “”);
3、Img的onload事件，监听井字内的相片与否读取完成，判断井字事件。
4、RequestFrameAnmation 和 RequestIdleCallback。
5、IntersectionObserver、MutationObserver，PostMessage。
6、Web Worker，耗时任务放在里面执行。
检测工具
1、Chrome Dev Tools
2、Page Speed
3、Jspref
