一个页面性能指标FP（FirstPaint）FirstPaint：标记浏览器在导航之前渲染任何与屏幕内容视觉上不同的内容的时间点。FCP(FirstContentfulPaint)FirstContentfulPaint标记浏览器从DOM渲染第一个内容的点，它可以是文本、图像、SVG，甚至元素。FMP（FirstMeaningfulPaint）首先进行有效绘制：例如在YouTube观看页面上，主要视频是主要元素。看这个csdn网站不是很明显。这些都是时间线。微博截图。从下面的示例图片可以看出，微博博文是主要元素。第二种性能优化方法减少请求数1.请求合并：合并同时需要的js，目的是节省dns查找的时间2.按需加载---(1)根据单页应用下路由的需求（二）缓存3.cssspritebase64iconfont4.cdn托管5.延迟加载：延迟加载图片：（即先不设置img的src属性，等待正确的时间（比如滚动、滑动、出现在窗口中等）然后将图片的真实url放入img属性的src中。）js的延迟加载：reduction1.简化代码（tree-shaking）----(1)去除无用代码(2)规范一些代码(3)引入外部cdn2.懒加载---(1)路由的懒加载3.压缩---(1)webpack压缩UglifyJsPlugin；（2）gzip压缩（3）图片压缩，JPG优化4.缓存http代码：---浏览器的强缓存（max-ageEtag）和协商（弱）缓存（last-modified）5.第三方组件---第三方组件作为外部依赖，会被吹入业务代码。6.按需加载---（1）按需加载第三方库和工具，如echarts（2）选择更好的工具day.js而不是moment（3）可用的代码拆分（Code-splitting)只调用用户需要的生成减少内存消耗1.减少全局变量；2.减少全局组件；3.减少dom操作，减少DOM访问，使用事件代理css样式放在页面前面延迟js加载，避免CSS表达式，避免@import其他1.预加载：预加载（在主渲染前预加载）和prefetch（利用空闲时间），可以使用webpackdePreLoadWebpackPlugin插件SSRprerender同构webpack遇到webpack打包性能问题，先去npmrunbuild--report，然后根据分析结果做相应的优化，谁占一个largevolume会做JS层面的详细扩展，只传输用户需要的代码。代码拆分可用。优化压缩代码（UglifyforES5,babel-minifyoruglify-esforES2015）高压缩（使用Brotli~q11,Zopfliorgzip）。Brotli的压缩率比gzip的好。它可以帮助CertSimple在压缩后的JS字节大小上节省17%，并帮助LinkedIn减少4%的加载时间。删除无用的代码。使用ChromeDevTools代码覆盖功能来查找未使用的JS代码。对于代码缩小，请参阅tree-shaking、ClosureCompiler的高级优化和微调库插件，如lodash-babel-plugin，或Webpack的ContextReplacementPlugin，用于Moment.js等库。使用babel-preset-env和browserlist来避免现代浏览器中现有的转译。高级开发人员可能会发现仔细分析Webpack包可以帮助他们识别和调整不必要的依赖项。缓存HTTP代码以减少网络流量。确定脚本的最佳缓存时间（例如：max-age）并提供身份验证令牌（Etag）以避免发送未更改的字节。使用ServiceWorker缓存一方面可以让应用组网更加灵活，另一方面也可以让你快速访问像V8代码缓存这样的特性。对于长期缓存，您可以了解Webpack文件名哈希。
