博客主页 | 个人博客

当Edge的调试工具打开以后，浏览器无法识别用户操作，导致全屏API触发时，无效果

xzq2025年7月22日小于 1 分钟

性能优化

性能优化指标

FCP:First Contentful Paint

首次内容渲染 (FCP) 是指用户首次导航到网页到网页任何一部分内容呈现在屏幕上的时间。
内容指的是文本、图片、svg元素或非白色的canvas元素。

在JS中衡量FCP

使用Paint Timing API创建一个 PerformanceObserver，用于监听名称为 first-contentful-paint 的 paint 条目并将其记录到控制台。

xzq2025/7/15大约 6 分钟

HTML5

xzq2025/7/9小于 1 分钟

真实DOM和虚拟DOM

Real DOM，真实DOM，意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实DOM结构
Virtual Dom，本质上是以 JavaScript 对象形式存在的对 DOM 的描述
创建虚拟DOM目的就是为了更好将虚拟的节点渲染到页面视图中，虚拟DOM对象的节点与真实DOM的属性一一照应
在React中，JSX是其一大特性，可以让你在JS中通过使用XML的方式去直接声明界面的DOM结构

const vDom = <h1>Hello World</h1> // 创建h1标签，右边千万不能加引号
const root = document.getElementById('root') // 找到<div id="root"></div>节点
ReactDOM.render(vDom, root) // 把创建的h1标签渲染到root节点上

xzq2025年6月30日大约 3 分钟

jsx转为真实DOM

react通过将组件编写的JSX映射到屏幕，以及组件中的状态发生了变化之后 React会将这些「变化」更新到屏幕上
JSX通过babel最终转化成React.createElement这种形式，例如：

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

xzq2025年6月30日大约 4 分钟

React Fiber

背景

JavaScript 引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待
如果 JavaScript 线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿
而这也正是 React 15 的 Stack Reconciler 所面临的问题，当 React 在渲染组件时，从开始到渲染完成整个过程是一气呵成的，无法中断
如果组件较大，那么js线程会一直执行，然后等到整棵VDOM树计算完成后，才会交给渲染的线程
这就会导致一些用户交互、动画等任务无法立即得到处理，导致卡顿的情况

xzq2025年6月29日大约 5 分钟

render

render函数在react中有两种形式：

在类组件中，指的是render方法：

class Foo extends React.Component {
    render() {
        return <h1> Foo </h1>;
    }
}

xzq2025年6月29日大约 3 分钟

key

跟Vue一样，React 也存在 Diff算法，而元素key属性的作用是用于判断元素是新创建的还是被移动的元素，从而减少不必要的Diff

因此key的值需要为每一个元素赋予一个确定的标识

如果列表数据渲染中，在数据后面插入一条数据，key作用并不大，如下：

this.state = {
    numbers:[111,222,333]
}

insertMovie() {
  const newMovies = [...this.state.numbers, 444];
  this.setState({
    movies: newMovies
  })
}

<ul>
    {
        this.state.movies.map((item, index) => {
            return <li>{item}</li>
        })
    }
</ul>

xzq2025年6月28日大约 2 分钟

setState

一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state
当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用
如下例子：

import React, { Component } from 'react'

export default class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            message: "Hello World"
        }
    }

    render() {
        return (
            <div>
                <h2>{this.state.message}</h2>
                <button onClick={e => this.changeText()}>面试官系列</button>
            </div>
        )
    }

    changeText() {
        this.setState({
            message: "JS每日一题"
        })
    }
}

xzq2025年6月28日大约 3 分钟

diff

跟Vue一致，React通过引入Virtual DOM的概念，极大地避免无效的Dom操作，使我们的页面的构建效率提到了极大的提升

而diff算法就是更高效地通过对比新旧Virtual DOM来找出真正的Dom变化之处

原理

react中diff算法主要遵循三个层级的策略：

tree层级
conponent 层级
element 层级

tree层级

DOM节点跨层级的操作不做优化，只会对相同层级的节点进行比较

只有删除、创建操作，没有移动操作，如下图：

xzq2025年6月27日大约 4 分钟

Gunxzq

性能优化指标

FCP:First Contentful Paint

在JS中衡量FCP

背景

原理

tree层级