总览

• 前端性能监控：代码监控、工具监控、插件分析工具。
  • **代码监控：**依托于js代码并部署到需监控的页面，手动计算时间差或者使用浏览器的的API进行数据统计。
    • 影响代码监控数据的因素：
      • 浏览器渲染机制；
      • 浏览器对API的实现程度，如：performance API；
  • **工具监控：**不用将统计代码部署到页面中，输入需统计的url并且选择运行次url的浏览器版本，通过工具对 url 进行请求分析后便可以给出各种性能指标，比如瀑布流、静态文件数量、首屏渲染时间等。
  • 插件分析工具： 通过插件分析开发时各依赖包的大小，通过减少主要包体积优化。

在封装 axios 之前，先了解一下 axios 特性和功能，了解为什么需要封装 axios。

axios 功能特性

axios 官网：起步 | Axios中文文档 | Axios中文网 (axios-http.cn)

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

现状

当前版本回滚没有任何流程化管理模式，使用最原始的分支管理和 git 命令直接回滚

当前回滚版本流程：

以某系统为例，目前生产服对应 prod 分支代码，测试服对应 test 分支代码，（master 为保护分支，定期将 prod 代码合并到 master）假如生产服某个版本出现重大问题，需要回滚，通过以下 Git 操作流程回滚：

1. 使用 git checkout prod 切换到 prod 分支，使用 git log 查看提交记录；
2. 创建新的回滚分支：基于发现bug的版本号或提交ID，从prod分支上创建一个新的回滚分支，命名为rollback_xxx（xxx为对应的版本号或提交ID）。
3. 查找到需要回滚的提交记录 hash 值，复制提交记录 hash 值；
4. 使用命令 git reset --hard <commit-hash> 强制回滚，也可以使用 git revert <commit-hash> 去除提交记录（两个命令区别可以参考文章：git 回滚）；
5. 强制推送到远程分支：git push --force origin <branch-name>;
6. 执行命令npm run build重新构建并上传当前分支代码；

React15 的生命周期

• constructor()
• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillMount()
• componentWillUpdate()
• componentDidUpdate()
• componentDidMount()
• render()
• componentWillUnmount()

Babel 编译结果

Babel 可以通过特定的插件（如 @babel/plugin-transform-react-jsx）将 JSX 语法转换为 React.createElement 调用，例如：

<div>
  < img src="avatar.png" className="profile" />
  <Hello />
</div>

提出背景

浏览器渲染限制

浏览器的帧

页面是一帧一帧绘制出来的，当每秒绘制的帧数（FPS）达到 60 时，页面是流畅的，小于这个值时，用户会感觉到卡顿。

上图是一帧内需要完成的任务，浏览器在一帧内可完成如下任务：

• 输入事件捕捉：

  • 浏览器首先会接受用户的输入事件，如点击、滚动、触摸等，并准备将其转换为相应的处理逻辑。
    • Blocking input events（阻塞输入事件）：例如 touch 或 wheel
    • Non-blocking input events（非阻塞输入事件）：例如 click 或 keypress

• 事件回调执行：

  • 对于已注册的事件监听器，浏览器会执行相应的事件回调函数，处理用户输入或页面状态的变化。

• 帧开始（Begin frame）：

  • 每一帧事件（Per frame events），例如 window resize、scroll 或 media query change

• 样式计算和布局：

  • rAF（requestAnimationFrame）
  • 浏览器会解析和计算CSS样式，确定页面中每个元素的尺寸和位置。这个过程称为布局或重排。

• 绘制渲染（Paint）：合成更新（Compositing update）、重绘部分节点（Paint invalidation）和 Record

  • 绘制（渲染）：

    • 在确定了元素的样式和位置后，浏览器会开始绘制页面。
    • 这包括将文本、图像和其他内容绘制到屏幕上。绘制操作可能涉及多个层级的渲染，最终合成到屏幕上显示。

  • 合成：

    • 如果页面使用了硬件加速（如CSS3D转换或WebGL），浏览器会将不同层级的渲染结果合成到一起，形成一个完整的页面图像。

• 空闲回调执行：如果在一帧的剩余时间内还有空闲时间，并且存在待执行的空闲回调（如RequestIdleCallback），浏览器会尝试执行这些回调。这些回调通常用于执行非关键性的、可延迟的任务。

浏览器的渲染过程受到设备刷新率的限制。一般来说，设备的刷新率是60Hz，意味着每秒钟有60帧的渲染机会。因此，浏览器需要在大约16.67毫秒（1000毫秒/60帧）内完成上述所有任务，以确保流畅的动画和用户交互。

总览