# :-: 高性能极致用户体验前端开发实战
## 了解业务
作为一名合格的前端开发,我们的开发工作不是盲目的,我们的优化目标需要明确,所以首先要了解你所做的业务。不仅要知道整个业务背景,还需要了解业务需求,业务目的,最后最好能拿到业务结果。
了解业务的目的是能让你更好的分配开发的权重,合理安排开发的重点。比如开发的是视频类网站,那么开发的重点自然在于播放器加载和流畅播放以及降级方案。如果是天气类业务,那么核心业务是要保障稳定快速的展示出天气相关数据,然后是加载展示其他内容。如果是博文类网站,那么重点在于首屏的信息加载和展示。
## 了解用户
了解用户也是至关重要,如果连自己所做业务的受众都不知道,那么何谈用户体验,何谈极致性能? 这一部分至少你要知道现在做的业务主要是面向PC用户还是移动web用户,PC用户所用的浏览器都是什么版本,比例分布是怎样?移动端用户android和ios比例多少,各自平台版本分布情况如何?这是最基本的要求,因为我们开发的代码是在这些平台运行的。
**如果不知道怎么办?没关系,从今天开始统计起来,做个埋点日志服务,前端写个脚本上报下useragent就可以了。**
* 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"
- 第1章 介绍
- 01 介绍与基础要求
- 02 章节内容介绍
- 第2章 性能体验评判模型
- 03 RAIL 评估模型介绍
- 04 RAIL评估模型解析
- 05 加载性能指标
- 06 稳定性和操作体验指标
- 07 Performance High Resolution Time API
- 08 Performance Navigation Timing API
- 09 Performance User Timing API
- 10 Performance Resource Timing 和 Timeline API
- 11 Performance Timing 参数介绍和 FID 指标
- 12 性能和体验指标计算
- 13 页面性能指标数据采集架构
- 第3章 前端网页加载链路优化
- 14 静态资源链路优化
- 15 资源加载过程优化
- 16 浏览器解析渲染过程优化
- 17 Memory/Client/Http/Net/WebViewCache 方案介绍
- 18 Memory/Client/Http/Net/WebViewCache 应用实例
- 19 数据埋点反馈优化和常用软件
- 第4章 前端极致性能体验编码优化
- 20 优化策略和首屏渲染 PRPL 方案
- 21 LazyLoad 懒加载策略与组件案例
- 22 滚动加载分页组件案例
- 23 web worker 思路与方案案例
- 24 task 拆分原理和方案
- 25 代码分割与打包优化
- 26 前端项目架构优化思路与 ES6 原生模块架构案例
- 27 web components 和轻 React 、Vue 和微前端架构思想
