web性能是网站或应用程序的客观度量和可感知的用户体验
- 减少加载时间：减少文件体积，减少http请求，使用预加载
- 是网站尽快可用：仅加载首屏内容，其他内容根据需要进行懒加载
- 平滑和交互性：使用css替代js动画、减少UI重绘
- 感知表现：你的页面可能不能做的更快，但你可以让用户感觉更快。好事操作给用户反馈，比如：加载动画，进度条，骨架屏等提示信息
- 性能测定：性能指标，性能测试，性能监控持续优化
性能指标
RAIL
以用户为中心的性能指标，RAIL代表web应用生命周期的四个不同方面：响应、动画、空闲、加载。
- 响应(Response)： 尽可能快速响应用户，应该在100ms内响应用户输入
- 动画(Animation)：在展示动画的时候每一帧应该以16ms进行渲染，这样可以保持动画效果的一致性，并且避免卡顿
- 空闲(Idle)：当使用Javascript主线程的时候，应该把任务划分到执行时间小于50ms的片段中去，这样可以释放线程以进行用户操作
- 加载(load)：应该在1s内的时间加载完成你的网站，并可以进行用户交互
First Contentful Paint (FCP)
首次内容绘制，浏览器首次绘制来自DOM的内容时间，内容必须是文本，图片（包含背景图）、非白色的canvas或SVG，也包括正在加载中的Web字体的文本
Largest Contentful Paint(LCP)
最大内容绘制，可视区域中最大的内容元素呈现到屏幕上的时间，用以估计页面的主要内容对用户可见时间
- image元素
- video元素
- url()加载的背景图片元素
First Input Delay （FID）
首次输入延迟，从用户第一次与页面交互到浏览器能够响应该交互的时间。输入延迟是因为浏览器正在忙于做其他事情，所以不能响应用户。发生这种情况的一个常见原因是浏览器正在忙于解析和执行应用程序加载的大量计算Javascript
Time to Interactive(TTI)
表示网页第一次完全达到了交互的状态的时间点，浏览器已经可以持续性的响应用户输入，完全达到可交互状态的时间带你实在最后一个长任务完成的时间，并且随后的5s内网络和主线程是空闲的。
Total Block Time(TBT)
总阻塞时间，度量了FCP和TTI之间总的时间，在该时间范围内，主线程被阻塞足够长时间以防止输入
Cumulative Layout Shift （CLS）
累计布局偏移。CLS会测量在页面整个生命周期中发生的那个意外的布局移位的所有单独布局移位分数的总和。他是一种保证页面的视觉稳定性从而提升用户体验的指标方案。
Web Vitals
Google 在 2020年5月5日提出了新的用户体验量化方案，一个衡量良好网站的指标
- 加载性能（LCP）：显示最大内容元素所需时间
- 交互性能（FID）：首次输入延迟时间
- 视觉稳定性（CLS）：累计布局配置偏移
测量Web Vitals - 性能测试工具。比如Lightgouse
- 使用web-vitals库
- 使用浏览器插件web vitals
性能测试工具
WebPageTest
WebPageTest 是一款非常专业的 Web 页面性能分析工具，它可以对检测分析的环境配置进行高度自定义化，内容包括测试节点的物理位置、设备型号、浏览器版本、网络条件和检测次数等，除此之外，它还提供了目标网站应用于竞品之间的性能比较，以及查看网络路由情况等多种维度下的测试工具。
可直接打开 WEBPAGETEST 的主页面，在配置好目标网站应用的网址和检测参数后便可启动测试，等待检测运行结束就能查看详细的测试报告。
Chrome DevTools
通过 Chrome 任务管理器我们可以查看当前 Chrome 浏览器中，所有进程关于 GPU、网络和内存空间的使用情况，这些进程包括当前打开的各个页签，安装的各种扩展插件，以及 GPU、网络、渲染等浏览器的默认进程，通过监控这些数据，我们可以在有异于其他进程的大幅开销出现时，去定位到可能存在内存泄漏或网络资源加载异常的问题进程。
-
Network 网络分析
Network 面板是 Chrome 开发者工具中一个经常会被用到的工具面板，通过它可以查看到网站所有资源的请求情况，包括加载时间、尺寸大小、优先级设置及 HTTP 缓存触发情况等信息，从而帮助我们发现可能由于未进行有效压缩而导致资源尺寸过大的问题，或者未合理配置缓存策略导致二次请求加载时间过长的问题等。- 缓存测试
- 网络吞吐设置（模拟低速网络）
- 网络请求阻止
- coverahe 面板
监控并统计出网站应用运行过程中代码执行的覆盖率情况。该面板统计的对象是 JavaScript 脚本文件与 CSS 样式表文件，统计结果主要包括：每个文件的字节大小、执行过程中已覆盖的代码字节数，以及可视化的覆盖率条形图。
根据执行结果我们能够发现，在启动录制的过程中到底有哪些尺寸较大的代码文件执行覆盖率较低，这就意味着有些代码文件中可能存在较多的无用代码，更准确地说是暂时没用到的代码。这些信息对性能优化来说是非常有用的，开发者可以据此将执行覆盖率较低的代码文件进行拆分，将首屏渲染阶段暂时不会执行到的代码部分单独打包，仅在需要的时候再去加载。
同时对规模较大且迭代周期较长的项目来说，工程代码中会包含一些永远都不会执行到的代码，而使用 webpack 的 Tree Shaking 仅能根据 export 进行无关联引用，那么此时 Coverage 面板就为优化提供了一条可以尝试的途径。
-
Memory 面板
前端主要使用 JavaScript 代码来处理业务逻辑，所以保证代码在执行过程中内存的良性开销对用户的性能体验来说尤为重要，如果出现内存泄漏，那么就可能会带来网站应用卡顿或崩溃的后果。
为了更细致和准确地监控网站应用当前的内存使用情况，Chrome 浏览器开发者工具提供了 Memory 面板，通过它可以快速生成当前的堆内存快照，或者查看内存随时间的变化情况。据此我们可以查看并发现可能出现内存泄漏的环节。 -
Performance 面板
使用 Performance 面板主要对网站应用的运行时性能表现进行检测与分析，其可检测的内容不仅包括页面的每秒帧数（FPS）、CPU 的消耗情况和各种请求的时间花费，还能查看页面在前 1ms 与后 1ms 之间网络任务的执行情况等内容。
使用方式：
建议在Chrome 浏览器的匿名模式下使用该工具，因为在匿名模式下不会受到既有缓存或其他插件程序等因素的影响，能够给性能检测提供一个相对干净的运行环境。
- 控制面板
- Screenshots：表示是否截取每一帧的屏幕截图，默认会勾选，并且在概览面板中展示随时间变化的每帧截屏画面，如果取消勾选，则不会在概览面板中展示这部分内容。
- Memory：表示是否记录内存消耗，默认不会勾选，如果勾选则会在线程面板与统计面板之间展示出各种类型资源的内存消耗曲线。
- 网页指标：表示是否展示性能指标信息，默认不会勾选，如果勾选则会在网络和Frames之间展示出核心指标的节点状态。
- Disable javaScript samples：如果勾选则表示关闭 JavaScript 示例，减少在手机端运行时的开销，若要模拟手机端的运行环境时则需要勾选。
- Enable advanced paint instrumentation（slow）：如果选中则表示开启加速渲染工具，用来记录渲染事件的相关细节。因为该功能比较消耗性能，所以开启后重新生成检测报告的速度会变慢。
- Network：在性能检测时，用以切换模拟网络环境。
- CPU：限制 CPU 处理速度，主要用于模拟低速 CPU 运行时的性能。
- 概览面板
在概览面板的时间轴上，可以通过选择一个起始时间点，然后按住鼠标左键滑动选择面板中的局部范围，来进行更小范围内的性能观察。
这部分可观察的性能信息包括：FPS、CPU 开销和网络请求时间。对每秒帧数而言，尽量保持在60FPS才能让动画有比较流畅的视觉体验。
对CPU开销而言，不仅可以在整个检测时间轴上以曲线的形式观察CPU处理任务所花费时间的变化情况，同时还可以在统计面板中查看当前选中时间区域里各个任务花费时间的占比，其中占比较大的部分就有可能存在性能问题，可以进一步检测与分析。
对网络请求时间而言，概览面板提供的信息可能不够清晰，这里建议在线程面板的Network部分中具体查看，比如时间轴上每个请求的耗时及起止时间点都会更加清楚，从而方便开发者发现响应过长的网络请求并进行优化。 - 线程面板
这部分最主要的信息即为主线程执行过程的火焰图，主线程在解析 HTML 和 CSS、页面绘制及执行 JavaScript 的过程中，每个事件调用堆栈和耗时的情况都会反映在这张图上，其中每一个长条都代表了一个事件，将鼠标悬浮其上的时候可以查看到相应事件的执行耗时与事件名。 - 统计面板
- 其中 Summary 页签中会展示各类任务事件耗时的环形图；
- Bottom-Up 页签中可以查看各个事件耗费时间的排序列表，列表会包含两个维度：去除子事件后该事件本身的耗时和包含子事件从开始到结束的总耗时。
- Call Tree页签中可以查看全部或指定火焰图中某个事件的调用栈
- Event Log 页签中可查看关于每个事件的详细日志信息
- 控制面板
-
FPS
可在页面运行时提供对 FPS 的实时估计 -
Performance monitor
出现的明显波动是执行刷新页面操作所产生的，可观察到 JavaScript 堆内存大小与 DOM 节点数的指标都有一个明显的断崖式下跌，这正是刷新操作清除了原有 DOM 节点后，还未重新渲染出新节点的时间点。
前端页面的生命周期
- 网络请求线程开启
- Protocol：请求头，说明浏览器如何处理要打开的文件，常见的有 HTTP、FTP、Telnet 等。
- Host：主机域名/ip地址，所访问资源在互联网上的地址，主机域名或经过 DNS 解析为 IP 地址。
- Post：端口号，请求程序和响应程序之间连接用的标识
- Path：目标路径，请求的目录，文件名
- Query：查询参数，请求所传递的参数
- Fragment：片段，次级资源信息，通常作为前端路由或锚点
进程和线程之间的区别：
（1）只要某个线程执行出错，将会导致整个进程崩溃。
（2）进程与进程之间相互隔离。这保证了当一个进程挂起或崩溃的情况发生时，并不会影响其他进程的正常运行，虽然每个进程只能访问系统分配给自己的资源，但可以通过 IPC机制进行进程间通信
（3）进程所占用的资源会在其关闭后由操作系统回收。即使进程中存在某个线程产生的内存泄漏，当进程退出时，相关的内存资源也会被回收。
（4）线程之间可以共享所属进程的数据。
- 建立HTTP请求
- 前后端的交互
- 关键渲染路径
939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
