Falando do mecanismo de carregamento de dados, um tópico inevitável é o desempenho do front-end. Na verdade, a página inicial de muitos portais de comércio eletrônico fará algumas customizações e otimizações verticais, como permitir que a solicitação seja carregada o mais cedo possível no página ou pré-carregamento na página anterior, etc. Com o lançamento do react18, o mecanismo de solicitação foi constantemente discutido e uma direção clara foi dada no acompanhamento.
Se houver três componentes C1, C2 e C3 aninhados em sequência em nossa página, e cada componente tiver uma solicitação correspondente F1, F2 e F3, geralmente a maioria das pessoas usará variáveis de estado e efeito de uso para obter a aquisição de fluxo de dados, o que significa significa que a requisição deve ser iniciada quando o componente é carregado, e toda aquisição de dados ocorre no ciclo de vida do componente, conforme a figura abaixo, podemos chamar esse método de obtenção de renderização em cascata de dados, mas há um problema com this method. , neste método, a aquisição de dados entre os componentes é realizada sequencialmente, o que na verdade significa que eles se bloqueiam e, se a hierarquia do componente estiver profundamente aninhada, isso fará com que a página demore muito para carregar.
Para evitar esse bloqueio sequencial de aquisição de dados entre os componentes, outro método é usar Promise.all para obter todos os dados solicitados antes do carregamento do componente, de modo que todos os dados sejam obtidos quando o componente for carregado. Este método resolve o problema da ordem de carregamento dos componentes bloqueando a aquisição do fluxo de dados um do outro, mas também cria um novo problema, a página ficará em branco até que a solicitação seja concluída.
Com base no segundo método de solicitação e renderização, o Suspense também pode ser usado para paralelizar a solicitação e a renderização.Suspense pode permitir que os componentes "aguardem" o término de certas operações antes da renderização. E se este método for usado em projetos reais, também é necessário considerar onde as requisições correspondentes de C1, C2 e C3 são escritas.Se forem escritas em componentes, o carregamento ainda é lento. Se for dividido, você precisa considerar questões de engenharia, como divisão de arquivo e divisão de código.
Depois de analisar cuidadosamente os três métodos acima, descobri que cada um tem suas próprias vantagens e desvantagens. Ao mesmo tempo, com base no esquema acima, também forneço uma ideia de otimização de solicitação. Primeiro, divida o JS solicitado separadamente e digite um arquivo request .js, no cabeçalho html Apresente request.js no início e use o atributo async para permitir que o script seja executado em paralelo (conforme mostrado no código abaixo), o que pode garantir que nossa solicitação seja emitida logo no início, e não pode bloquear a execução do arquivo js empacotado pelo código React subseqüente, que é uma solicitação e o código de renderização são executados em paralelo.
// html头部引入request.js
<script async src="/js/request.js"></script>
Após o envio da requisição, os dados retornados precisam ser injetados no componente React, como injetar esta parte? Um exemplo de código simples é o seguinte:
// request.js 中请求部分 evt是发布订阅模式的一个实例
window.InitData = {
data: null,
on: (msg, fn) => evt.on(msg, e => fn(e)),
emit: (msg, data) => evt.emit(msg, data),
};
fetch().then(rs => {
InitData.data = rs;
InitData.emit("init_data", rs);
return rs;
});
// index.js react代码逻辑
…….
useEffect(() => {
if (InitData.data !== null) {
// 这里已经获取到了请求的返回值
doSomething();
} else {
InitData.on("init_data", (data) => {
// 利用发布订阅模式获取到数据
doSomething();
});
}
}, []);
…….
A ideia geral é primeiro carregar o arquivo de solicitação empacotado separadamente em html e adicionar o atributo async para fazer o script executar em paralelo, montar os dados retornados na janela ou usar o modo de publicação-assinatura para injetar os dados no componente react. Na verdade, isso é semelhante ao modo de renderização durante a solicitação, usando solicitações antecipadas para reduzir o tempo de carregamento. No seguimento, também esperamos resolver o mecanismo de solicitação de dados de forma de engenharia.
No futuro, o desenvolvimento definitivamente estará mais inclinado para o modo de renderização durante a solicitação. O site oficial do React também menciona que planeja permitir mais cenários no futuro, incluindo a obtenção de dados, etc. Suspense também é suportado no recém-lançado React18 . A renderização do lado do servidor, incluindo o recente remix de código aberto, também está otimizando o mecanismo de solicitação para tornar o carregamento do aplicativo mais rápido. Parceiros interessados também são bem-vindos para discutir e praticar juntos. Suspense 处理更
O Maya OS autodesenvolvido pelo Ministério da Defesa da Índia, substituindo totalmente o Windows Redis 7.2.0, e o site oficial da versão 7-Zip de maior alcance foi identificado como um site malicioso pelo Baidu. O Go 2 nunca trará alterações destrutivas para o Go 1 Xiaomi lançou CyberDog 2, mais de 80% taxa de código aberto ChatGPT custo diário de cerca de 700.000 dólares americanos, OpenAI pode estar à beira da falência Software de meditação será listado, fundado por "primeira pessoa Linux da China" versão Apache Doris 2.0.0 lançado oficialmente: desempenho de teste cego 10 vezes melhorado, experiência de análise mais unificada e diversificada extremamente rápida A primeira versão do kernel Linux (v0.01) interpretação de código-fonte aberto Chrome 116 é lançada oficialmenteAutor: JD Retail Liang Fengfeng
Fonte: JD Cloud Developer Community