desempenho monitoramento de desempenho

Veja detalhes no MDN

setTimeout(() => {
    
    
const {
    
    
	fetchStart, // 开始访问
	requestStart, // 请求的开始
	responseStart, // 响应的开始
	responseEnd, // 响应的结束
	domIntereactive, // 可交互的时间的点
	domContentLoadedEventEnd, // dom加载完毕 + domContentLoad完成的事件 $(function(){})
	loadEventStart // 开始访问
} = performance.timing
	
	let TTFB (time to first bate) = requestStart - requestStart  // 首字节返回的事件 服务器的处理能力
 
 	let TTI (time to Intereactive) = domIntereactive - fetchStart // 整个的一个交互的时长
 
 	let DCL (DOMContentLoaded)= domContentLoadedEventEnd - fetchStart // DOM整个加载完毕
 
 	let L (onLoad)= loadEventStart - fetchStart // 所有资源加载完毕用的时长

	const paint = performance.getEntriesByType('paint')

	console.log(paint[0].startTime) // FP只是画像素的
	console.log(paint[1].startTime) // FCP dom元素要有内容才行
}, 3000)

// 监听有意义的元素渲染时间
new performanceObserver((entryList, observer) => {
    
    
	console.log(entryList.getEntries()[0])
	observer.disconnect()
}).observe({
    
     entryTypes:['element'] })

// LCP 监听最大元素渲染时间
new performanceObserver((entryList, observer) => {
    
    
	const list = entryList.getEntries()
	console.log(list[list .length - 1])
	observer.disconnect()
}).observe({
    
     entryTypes:['largest-contentful-paint'] })

Otimização da política de rede

1. Reduza as solicitações de http
2. Defina razoavelmente o cache do servidor para melhorar a velocidade de processamento do servidor. (Cache obrigatório, cache de comparação)
3. Evite o redirecionamento O redirecionamento reduzirá a velocidade de resposta
4, o dns-prefetch executa a pré-análise do DNS e adiciona o dns-prefetch ao rótulo do link
5. Use a tecnologia de fragmentação de nome de domínio para colocar recursos em diferentes nomes de domínio. Entrar em contato com o mesmo nome de domínio lida com até 6 problemas de conexão TCP.
6. Usando a aceleração CDN para acelerar a velocidade de acesso. (Recentemente atribuído, altamente disponível)
7. Otimização de compactação gzip para compactar o volume de recursos de transmissão (html, js, css)
8. Prioridade de carregamento de dados: pré-carregamento (pré-solicitação) pré-busca (carregamento pré-julgamento quando o navegador está ocioso) dados de cache no cache HTTP

Caminho de renderização chave: js—estilo de cálculo—layout (refluxo)—redesenho—síntese

Reflow (reorganização) Reflow: adicionar elementos, excluir elementos, modificar tamanho, mover posições de elementos, obter informações relacionadas à posição
Redesenhar Repintar: alterações no estilo dos elementos na página não afetam sua posição no fluxo do documento

Como reduzir as recaídas

1. Quebre o fluxo do documento
2. Adicione uma largura e altura fixas à imagem ao renderizar
3. Use animação css3 mais
4. Você pode usar style="will-change: transform;"> para extrair o dom em uma camada separada

O tempo de rearranjo é depois que o js é executado, então tente colocar essas operações na função o mínimo possível. Por exemplo, se você obtiver a posição do dom várias vezes na função, você deve obtê-la fora e usá-la no navegador.