我们都知道对于Web应用来说性能很重要。然而性能优化相关的知识却非常的庞大并且杂乱。对于性能优化需要做些什么以及性能瓶颈是什么，通常我们并不清楚（不包括那些对性能优化有丰富经验的高手）。
事实上关于Web性能有很多可以优化的点，其中涉及到的知识大致可以划分为几类：度量标准、编码优化、静态资源优化、交付优化、构建优化、性能监控。
本文主要介绍性能优化需要做的事以及需要考虑的问题。目的在于给读者脑海中生成一个宏观的地图。
不会介绍每个优化项目具体如何操作。PS：后续会有系列文章针对不同优化分类下的具体优化操作进行更详细的介绍。
1.度量标准与设定目标在进行性能优化之前，我们需要为应用选择一个正确的度量标准（性能指标）以及设定一个合理的优化目标。
并不是所有指标都同样重要，这取决于你的应用。最后根据度量标准设定一个现实的目标。
1.1度量标准下面是一些值得考虑的指标：
首次有效绘制（FirstMeaningfulPaint，简称FMP，当主要内容呈现在页面上）
英雄渲染时间（HeroRenderingTimes，度量用户体验的新指标，当用户最关心的内容渲染完成）
可交互时间（TimetoInteractive，简称TTI，指页面布局已经稳定，关键的页面字体是可见的，并且主进程可用于处理用户输入，基本上用户可以点击UI并与其交互）
输入响应（Inputresponsiveness，界面响应用户输入所需的时间）
感知速度指数（PerceptualSpeedIndex，简称PSI，测量页面在加载过程中视觉上的变化速度，分数越低越好）
自定义指标，由业务需求和用户体验来决定。
FMP与英雄渲染时间非常相似，但它们不一样的地方在于FMP不区分内容是否有用，不区分渲染出的内容是否是用户关心的。
1.2设定目标毫秒的界面响应时间与60FPS
速度指标（SpeedIndex）小于ms
3G网络环境下可交互时间小于5s
重要文件的大小预算小于kb
以上四种指标的设定都有据可循。详细信息请查看RAIL性能模型。
2.编码优化编码优化涉及到应用的运行时性能，本小节介绍几个可以提升程序运行时性能的建议。
2.1数据读取速度事实上数据访问速度有快慢之分，下面列出几个影响数据访问速度的因素：
字面量与局部变量的访问速度最快，数组元素和对象成员相对较慢
变量从局部作用域到全局作用域的搜索过程越长速度越慢
对象嵌套的越深，读取速度就越慢
对象在原型链中存在的位置越深，找到它的速度就越慢
推荐的做法是缓存对象成员值。将对象成员值缓存到局部变量中会加快访问速度
2.2DOM应用在运行时，性能的瓶颈主要在于DOM操作的代价非常昂贵，下面列出一些关于DOM操作相关提升性能的建议：
在JS中对DOM进行访问的代价非常高。请尽可能减少访问DOM的次数（建议缓存DOM属性和元素、把DOM集合的长度缓存到变量中并在迭代中使用。读变量比读DOM的速度要快很多。）
重排与重绘的代价非常昂贵。如果操作需要进行多次重排与重绘，建议先让元素脱离文档流，处理完毕后再让元素回归文档流，这样浏览器只会进行两次重排与重绘（脱离时和回归时）。
善于使用事件委托
2.3流程控制下面列出一些流程控制相关的一些可以略微提升性能的细节，这些细节在大型开源项目中大量运用（例如Vue）：
避免使用for...in（它能枚举到原型，所以很慢）
在JS中倒序循环会略微提升性能
减少迭代的次数
基于循环的迭代比基于函数的迭代快8倍
用Map表代替大量的if-else和switch会提升性能
3.静态资源优化Web应用的运行离不开静态资源，所以对静态资源的优化至关重要。
3.1使用Brotli或Zopfli进行纯文本压缩在最高级别的压缩下Brotli会非常慢（但较慢的压缩最终会得到更高的压缩率）以至于服务器在等待动态资源压缩的时间会抵消掉高压缩率带来的好处，但它非常适合静态文件压缩，因为它的解压速度很快。
使用Zopfli压缩可以比Zlib的最大压缩提升3％至8％。
3.2图片优化尽可能通过srcset，sizes和picture元素使用响应式图片。还可以通过picture元素使用WebP格式的图像。
响应式图片可能大家未必听说过，但响应式布局大家肯定都听说过。响应式图片与响应式布局类似，它可以在不同屏幕尺寸与分辨率的设备上都能良好工作（比如自动切换图片大小、自动裁切图片等）。
当然，如果您不满足这种尺度的优化，还可以对图片进行更深层次的优化。例如：模糊图片中不重要的部分以减小文件大小、使用自动播放与循环的HTML5视频替换GIF图，因为视频比GIF文件还小（好消息是未来可以通过img标签加载视频）。
4.交付优化交付优化指的是对页面加载资源以及用户与网页之间的交付过程进行优化。
4.1异步无阻塞加载JSJS的加载与执行会阻塞页面渲染，可以将Script标签放到页面的最底部。但是更好的做法是异步无阻塞加载JS。有多种无阻塞加载JS的方法：defer、async、动态创建script标签、使用XHR异步请求JS代码并注入到页面。
但更推荐的做法是使用defer或async。如果使用defer或async请将Script标签放到head标签中，以便让浏览器更早地发现资源并在后台线程中解析并开始加载JS。
4.2使用IntersectionObserver实现懒加载懒加载是一个比较常用的性能优化手段，下面列出了一些常用的做法：
可以通过IntersectionObserver延迟加载图片、视频、广告脚本、或任何其他资源。
可以先加载低质量或模糊的图片，当图片加载完毕后再使用完整版图片替换它。
延迟加载所有体积较大的组件、字体、JS、视频或Iframe是一个好主意
4.3优先加载关键的CSSCSS资源的加载对浏览器渲染的影响很大，默认情况下浏览器只有在完成head标签中CSS的加载与解析之后才会渲染页面。如果CSS文件过大，用户就需要等待很长的时间才能看到渲染结果。针对这种情况可以将首屏渲染必须用到的CSS提取出来内嵌到head中，然后再将剩余部分的CSS用异步的方式加载。可以通过Critical做到这一点。
4.4资源提示（ResourceHints）ResourceHints（资源提示）定义了HTML中的Link元素与dns-prefetch、preconnect、prefetch与prerender之间的关系。它可以帮助浏览器决定应该连接到哪些源，以及应该获取与预处理哪些资源来提升页面性能。
4.4.1dns-prefetchdns-prefetch可以指定一个用于获取资源所需的源（origin），并提示浏览器应该尽可能早的解析。
linkrel="dns-prefetch"href="//example.