Web 前端性能优化之一：性能模型及网页原理

为面试吹牛做功课。

https://juejin.cn/post/6850037273312886797

前端性能优化02RAIL测量模型什么是RAILRAIL的目标 RAIL测量模型 RAIL是google提出的一个量化性能测试的标准，我们通过这个模型就可以指导我们性能优化的目标。我们可以看到许多测试优化的建议，但是始终没有一个量化的结果。我们需要有人告诉我们，我们做什么可以，做到怎样才算好。这个就是RAIL测量模型给我们带来的东西。一些量化的指标。它不光有指导性的作用，并且也是后面优化必备知识点的基础。 什么是RAIL 我们的web出现了已经有二三十年的背景，在过去很长的一段时间里，技术工程师不断的去追求让

一、Web 性能优化 进行 Web 性能优化，因为性能是 Web 网站和应用的支柱，流量、搜索、转换率和用户体验的关系。 寻找性能瓶颈，如下所示： 了解性能指标，多快才算快 利用测量工具和 APIs 优化问题，重新测量迭代 移动端挑战多，如下所示： 设备硬件、网速、屏幕尺寸、交互方式 用户更缺少耐心，大于 3 秒加载导致 53% 的跳出率 持续增长的移动用户和移动电商业务 二、性能指标和优化目标 性能优化加载，如下所示： 理解加载瀑布图 基于 HAR 存储与重建性能信息 速度指数 Sp

性能优化 一、RAIL性能模型 1. 什么是RAIL R - Response响应： 并非网络请求的响应，而是Web应用给用户的响应体验； A - Animation动画：动画是为了提高用户体验，但是添加的动画是否流畅； I - Idle空闲：让浏览器（主线程）有足够的空闲时间处理用户的交互，而不是一直在繁忙状态； ​ 浏览器控制台有一个performance选项卡，列出了所有和性能相关的指标。 L - Load加载：网络加载 2. RAIL的目标 ​ Rail的目标就是提高用户体验

性能测量工具都有一些关键的时间节点，比如：TTFB、首屏，这些时间节点是通过浏览器实现特定的API获取的，所以我们也可以通过API来直接获取这些数据。3.希望所有的异步请求要足够快（1秒之内把数据返回回来） 如果不行，做压缩，还是不行，先考虑前端交互上的优化（比如加一个loading动画）假如你做的是视频网站，如果用户不再看你这个页面了，这时候需要考虑节流，不再进行视频内容的加载（可以在页面上进行 Tab 切换测试）例如，尽可能减少预加载数据，以便您的应用快速加载，并利用空闲时间加载剩余数据。

RAIL模式 概念 RAIL是一个以用户为中心的性能模型，它把用户的体验拆分成几个关键点（例如，tap，scroll，load），并且帮你定义好了每一个的性能指标。 分为四个方面： Response Animation Idle Load 用户体验 用户对性能延迟的感知： 延迟时间 用户感知 0-16ms 很流畅 0-100ms 基本流畅 100-1000ms 感觉到网站上有一些加载任务 1000ms or more 失去耐心了 10000ms or m

当浏览器知道高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容，从而优化加载时间，提升浏览体验）。加载优化分两种情况，一种是新用户第一次打开我们页面，这里面临的挑战是各种缓存都无法起作用，怎么保证将加载速度控制在用户可以接受的范围，提升转化率。如果图片展示区域小于图片的真实大小，则应在服务器端根据业务需要先行进行图片压缩，图片压缩后，图片大小与展示的就一致了。如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩得特别小的缩略图，以提高用户体验。

RAIL, 是 Response, Animation, Idle, 和 Load 的首字母缩写, 是一种由Google Chrome团队与2015年提出的性能模型, 用于提升浏览器内的用户体验和性能. RAIL模型的理念是 "以用户为中心；最终目标不是让您的网站在任何特定设备上都能运行很快，而是使用户满意。 也就是说，RAIL模型的目的是通过合理的处理手段提高用户的使用体验。 缩写 全称 描述 R Response 在100ms内响应用户的操作。虽说是100ms，但预算只有50m.

背景性能是网站和应用的支柱，网站性能高，用户体验会更好，同时，网站速度也是搜索引擎排名的一个因素。因此，好的网站性能直接影响我们的收益指标，因此有必要提高网站的性能，从而从技术角度拿到业务收益。性能优化的指标RAIL模型是Google给出的一套以用户为中心的性能模型，它提供了一种考虑性能的结构。该模型将用户体验分解为关键操作（例如，点击、滚动、加载）并帮助您为每个操作定义性能目标。RAIL分别代表：Response:响应Animation:动画Idle:空闲。

rail是一种以用户为中心的性能模型，又google提出，其主要目标是让用户满意，主要分为response animation idle load四个部分 response 输入延迟时间小于100毫秒，超过这个时间用户能感知到延迟 animation 每一帧完成时间小于16毫秒，因为人眼可以感知到每秒渲染渲染60帧的平滑动画，也即每帧约16毫秒 idle 为了实现响应时间小于10...