高性能极致用户体验前端开发实战

时间 2019-11-29

标签高性能极致用户体验前端开发实战繁體版

原文原文链接

课程介绍

高性能极致用户体验前端开发实战课程适合全部前端开发学习或者从业者，结合目前前端开发的最佳实践，提供前端网页性能分析优化知识，结合实际项目经验分析能够采用的优化思路，并给出开发高性能极致体验网页的通用方法和技巧。课程官方博客：前端学堂 javascript

在开始学习本课程以前，先提2个基本要求：php

了解业务

做为一名合格的前端开发，咱们的开发工做不是盲目的，咱们的优化目标须要明确，因此首先要了解你所作的业务。不只要知道整个业务背景，还须要了解业务需求，业务目的，最后最好能拿到业务结果。html

了解业务的目的是能让你更好的分配开发的权重，合理安排开发的重点。好比开发的是视频类网站，那么开发的重点天然在于播放器加载和流畅播放以及降级方案。若是是天气类业务，那么核心业务是要保障稳定快速的展现出天气相关数据，而后是加载展现其余内容。若是是博文类网站，那么重点在于首屏的信息加载和展现。前端

了解用户

了解用户也是相当重要，若是连本身所作业务的受众都不知道，那么何谈用户体验，何谈极致性能？这一部分至少你要知道如今作的业务主要是面向PC用户仍是移动web用户，PC用户所用的浏览器都是什么版本，比例分布是怎样？移动端用户android和ios比例多少，各自平台版本分布状况如何？这是最基本的要求，由于咱们开发的代码是在这些平台运行的。若是不知道怎么办？不要紧，从今天开始统计起来，作个埋点日志服务，前端写个脚本上报下useragent就能够了。vue

navigator.userAgent
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36"

课程大纲

评判标准
- RAIL评估模型
- 性能指标
- 体验指标
- 指标数据采集
优化实战
- 链路优化
- 编程优化
链路优化
- 链路阶段分析
- 阶段指标数据
- 各阶段优化手段
- 案例分析和经常使用工具
编程优化
- 首屏渲染
- 懒加载功能组件
- 滚动加载分页组件
- web worker计算
- Task切分
- 代码分割与打包
- 前端开发架构优化

前端开发架构优化
- ES6 module+template
- web component
- 轻react或vue
- 微前端架构

课程官方博客：前端学堂 html5

视频教程：云课堂视频课程java

评判标准

无规矩不成方圆，因此这里先说说评判标准。评判标准主要指的是用户打开网页、浏览网页的体验和感觉。咱们须要一种客观的评估模型来统一量化用户体验的各个环节，这样才能找到须要优化的方向，找到开发极致用户体验网页的捷径。react

RAIL评估模型

RAIL 是一种以用户为中心的性能模型。每一个网络应用均具备与其生命周期有关的四个不一样方面，且这些方面以不一样的方式影响着性能。以用户为中心；最终目标不只是让您的网站在任何特定设备上都能运行很快，而是使用户满意。android

Response，当即响应用户；在 100 毫秒之内确认用户输入，超过100ms建议加上动效或者loading，经过视觉冲击减小用户等待的焦虑。
Animation，设置动画或滚动时，在 10 毫秒之内生成帧。
Idle，最大程度增长主线程的空闲时间。主线程空闲才能随时均可以及时响应。
Load，持续吸引用户；在 1000 毫秒之内呈现交互内容。

让用户成为您的性能工做的中心。用户花在网站上的大多数时间不是等待加载，而是在使用时等待响应。了解用户如何评价性能延迟：webpack

延迟与用户反应
0 – 16 毫秒	流畅；人们特别擅长跟踪运动，若是动画不流畅，他们就会对运动心生反感。用户能够感知每秒渲染 60 帧的平滑动画转场。也就是每帧 16 毫秒（包括浏览器将新帧绘制到屏幕上所需的时间），留给应用大约 10 毫秒的时间来生成一帧。
0 – 100 毫秒	快，在此时间窗口内响应用户操做，他们会以为能够当即得到结果。时间再长，操做与反应之间的链接就会中断。
100 – 300 毫秒	可感受慢，须要loading，用户会遇到轻微可觉察的延迟。
300 – 1000 毫秒	慢，须要作loading和占位。在此窗口内，延迟感受像是任务天然和持续发展的一部分。对于网络上的大多数用户，加载页面或更改视图表明着一个任务。
1000+ 毫秒	很慢，超过 1 秒，用户的注意力将离开他们正在执行的任务。
10,000+ 毫秒	放弃，用户感到失望，可能会放弃任务；以后他们或许不会再回来。

响应：在 100 毫秒之内响应

在用户注意到滞后以前您有 100 毫秒的时间能够响应用户输入。这适用于大多数输入，无论他们是在点击按钮、切换表单控件仍是启动动画。但不适用于触摸拖动或滚动。若是您未响应，操做与反应之间的链接就会中断。用户会注意到。尽管很明显应当即响应用户的操做，但这并不老是正确的作法。使用此 100 毫秒窗口执行其余开销大的工做，但须要谨慎，以避免妨碍用户。若是可能，请在后台执行工做。对于须要超过 500 毫秒才能完成的操做，请始终提供反馈机制，好比loading，进度条等。

动画：在 10 毫秒内生成一帧

动画不仅是奇特的 UI 效果。例如，滚动和触摸拖动就是动画类型。若是动画帧率发生变化，您的用户确实会注意到。您的目标就是每秒生成 60 帧，每一帧必须完成如下全部步骤：

从纯粹的数学角度而言，每帧的预算约为 16 毫秒（1000 毫秒 / 60 帧 = 16.66 毫秒/帧）。但由于浏览器须要花费时间将新帧绘制到屏幕上，只有 10 毫秒来执行代码。在像动画同样的高压点中，关键是不论能不能作，什么都不要作，作最少的工做。若是可能，请利用 100 毫秒响应预先计算开销大的工做，这样您就能够尽量增长实现 60fps 的可能性。如需了解详细信息，请参阅渲染性能。

空闲：最大程度增长空闲时间

利用空闲时间完成推迟的工做。例如，尽量减小预加载数据，以便您的应用快速加载，并利用空闲时间加载剩余数据。推迟的工做应分红每一个耗时约 50 毫秒的多个块。若是用户开始交互，优先级最高的事项是响应用户。

要实现小于 100 毫秒的响应，应用必须在每 50 毫秒内将控制权返回给主线程，这样应用就能够执行其像素管道、对用户输入做出反应，等等。以 50 毫秒块工做既能够完成任务，又能确保及时的响应。

加载：在 1000 毫秒之内呈现内容

在 1 秒钟内加载您的网站。不然，用户的注意力会分散，他们处理任务的感受会中断。侧重于优化关键渲染路径以取消阻止渲染。实际操做中，咱们无需在 1 秒内加载全部内容以产生完整加载的感受，而是启用渐进式渲染和在后台执行一些工做，默认只加载和渲染首屏内容，将非首屏、非必需的加载推迟到空闲时间段处理。

关键 RAIL 指标汇总

要根据 RAIL 指标评估您的网站，请使用 Chrome DevTools Timeline 工具记录用户操做。而后根据这些关键 RAIL 指标检查 Timeline 中的记录时间。

RAIL 步骤	关键指标	用户操做
响应	输入延迟时间（从点按到绘制）小于 100 毫秒。	用户点按按钮（例如打开导航）。
动画	每一个帧的工做（从 JS 到绘制）完成时间小于 16 毫秒。	用户滚动页面，拖动手指（例如，打开菜单）或看到动画。拖动时，应用的响应与手指位置有关（例如，拉动刷新、滑动轮播）。此指标仅适用于拖动的持续阶段，不适用于开始阶段。
空闲	主线程 JS 工做分红不大于 50 毫秒的块。	用户没有与页面交互，但主线程应足够用于处理下一个用户输入。
加载	页面能够在 1000 毫秒内就绪。	用户加载页面并看到关键路径内容。

这是Google工程师提出来的RAIL优化模型，在实际前端业务监控中，咱们能够拆分红更多的数据指标进行统计分析。

性能和体验数据指标

数据驱动业务开发，咱们的目标是高性能和极致用户体验，那么咱们首先须要制定符合咱们目标的性能数据指标和体验数据指标。在制定数据指标以前，咱们分析下页面加载过程，咱们分为这四个部分：

用户体验	描述
它在发生吗？happening	网页浏览顺利开始了吗？服务端有响应吗？
它是否有用？useful	用户是否能看到足够的内容？
它是否可用？usable	用户是否能够和页面交互，仍是页面仍在忙于加载？
它是否使人愉快的？idle	交互是否流程和天然，没有卡段或闪烁？

性能指标：加载呈现又快又稳。加载到展示的性能指标和稳定性指标。

体验指标：操做反应灵敏。点击，滑动等交互响应及时，操做流畅，动画运行流畅。

加载性能指标：

秒开率：页面首屏加载时间小于1s的比例，也就是页面加载到onload事件触发时所消耗的时间。
FP（first paint）和 FCP（first content paint）分别是指页面首次绘制和首次内容绘制。FP（首次绘制）包括了任何用户自定义的背景绘制，它是首先将像素绘制到屏幕的时刻。FCP（首次内容绘制）是浏览器将第一个 DOM 渲染到屏幕的时间。该指标报告了浏览器首次呈现任何文本、图像、画布或者 SVG 的时间。这两个指标其实指示了咱们一般所说的白屏时间。
FMP(first meaningful paint)首次有意义绘制, 是页面可用性的度量标准。由于很难有一个通用标准来指示全部的页面当前时刻的渲染达是否到了有用的程度，因此当前并无制定标准。对于开发者，咱们能够根据本身的页面来肯定那一部分是最重要的，而后度量这部分渲染出的时间做为FMP。
TTFB(time to first byte, 首字节时间)，是指从浏览器发起第一个请求到数据返回第一个字节所消耗的时间，这个时间包含了网络时间，后端处理时间等等，能够做为一个链路数据综合参考指标。

稳定性指标

资源错误：静态资源加载错误，常见的就是404，资源地址不正确或者远程服务有问题。
JS报错：页面运行时抛出来的异常信息。好比变量未定义，函数报错等等。
Crash：页面白屏不展现内容，极可能是页面某个模块报错致使整个页面不展现。
内存堆栈：监控页面内存和堆栈使用状况，常见如页面内存泄露等缘由会直接致使APP闪退。
接口报错：接口挂了，请求超时。或者接口返回了错误信息。或者接口返回数据错误，好比空数据，不符合预期。

操做体验指标：

交互延迟：用户点击后页面没有响应或者响应时间超过100ms，用户感受此次点击操做是延迟的（可称为无效点击）。经过EventTiming API咱们能够统计用户交互操做后的浏览器响应时间。
卡顿：统计浏览器中执行时间超过 50 ms 的任务，都是 long task（Long tasks API ），可能会形成页面卡顿。
滚动流畅性：滚动过程是否流畅，监测用户开始操做到页面开始滚动的时间差，按照前面的标准，小于100ms才会体验流畅。
动画流畅性：监测动画开始到动画结束，计算帧率FPS。按照前面的标准，每帧计算时间小于10ms才会体验流畅。
TTI（time to interactive, 可交互时间)：指页面已渲染出内容，同时能够响应用户的输入的时间。
FID（First Input Delay），首次输入延迟，从用户看到页面到第一次输入的延迟，通常都是由于主线程阻塞，会致使响应慢。这个指标反映用户对当前页面的第一感受，若是用户好久没有交互，说明首屏内容比较吸引人，或者用户很快就切走了，说明对用户没有吸引力。

性能指标数据采集

介绍上面咱们总结的性能和体验指标如何准确有效的采集。

优化实战

咱们已经全面分析总结了评估页面性能和用户体验的各个指标参数。那么怎么来优化呢？open signal官方提供了2018年2月份统计的全世界4G网络覆盖率和通讯速率的统计分布图以下，在目前移动互联网的浪潮下，咱们要利用好用户终端设备的每一个字节的流量。

固然页面性能和体验优化并非一蹴而就的，须要不断的研究、跟踪，发现问题，解决问题。可是咱们能够在一开始编写业务代码的时候就作的更好，作到极致。因此，关于优化实战咱们主要分为两部分：加载渲染链路优化 和 编程代码优化。

加载渲染链路优化

从访问url到页面呈现，整个加载和渲染链路能够作优化的思路。

加载链路：浏览器导航开始->检查缓存->DNS->HTTP->解析

渲染链路：浏览器内核或者webview（对于ios区分wkwebview和早期版本的uiwebview）渲染流程

具体详情参看下面这篇文章：

前端网页加载渲染链路优化

编程代码优化

咱们说的“快”，并不只仅指浏览器器加载页面快，就是常说的秒开率，通常指DomContentLoad时间。可是“快”其实包含更多的含义，除了前面说的浏览器加载快，还包含浏览器解析快（Javascript脚本发布时一般都会作代码压缩混淆，不只是减小体积，也为了安全性），JS脚本编译快（咱们知道javascript在浏览器的javascript虚拟机【managed runtime environment for JavaScript，JavaScript托管运行时环境】中运行的，因此也须要编辑JS脚本成字节码，才能运行），最后一个就是javascript执行快。

链路优化中，咱们已经解决了JavaScript下载加速的问题，那么剩下的优化工做主要集中在优化浏览器解析、编译并执行JS脚本。影响浏览器解析和执行JS脚本的因素主要是JS脚本的体积大小和代码的复杂程度。因此编程代码优化实践主要是减小代码的体积和按需下降代码复杂度，实现浏览器解析快，JS脚本编译快。

代码体积大，加载就会耗时，并且占用cdn存储资源和http请求资源，浏览器解析时暂用内存多，分析代码耗时。
代码复杂度高，代码解析就比较耗时。若是依赖一些复杂的类库，还要考虑库的解析和执行时间。浏览器解析代码会占用更多内存，使用堆栈更深，执行耗时。

优化策略：

首屏渲染与PRPL
懒加载组件
滚动加载分页组件
web worker
task拆分
代码分割与打包
项目架构优化

具体详情参看下面这篇文章：前端极致性能体验编码框架优化