网站性能优化

    0

video

概述

前端性能优化主要从加载性能和渲染性能两个方面去优化。

性能指标

几个基本概念

  1. FCP

First Contentful Paint 首次内容绘制,即白屏时间,页面有了第一个内容开始绘制

  1. LCP

Largest Contentful Paint 最大内容绘制,即当页面的所有内容都已显示时。

  1. CLS

Cumulative Layout Shift 加载时页面元素移动了多少。

  1. FID

First Input Delay 页面对用户的第一次交互做出反应的时间。

性能测试

优化加载性能

缓存 -> 发送请求 -> 等待响应 -> 解析 -> 处理各类静态资源 -> 运行时 -> 预加载(等待后续的请求)

主要思路是压缩资源,提高传输速度

  • 静态资源压缩,精灵图

  • 图片、路由懒加载 预加载

  • 强制缓存和协商缓存

  • 压缩图片、css、js

  • cdn、oss

  • 做缓存

  • Gzip压缩

优化渲染性能

  • CSS:基于CSS规则

  • DOM:基于DOM操作

  • 阻塞:基于脚本加载

  • 异步更新:基于异步更新

  • 减少回流和重绘制

  • css和js脚本阻塞渲染,可以懒加载或者SSR加快首屏时间,css,js放置正确位置

性能监控

性能优化不是一蹴而就,需要性能监控体系去持续优化

评论区
共有评论 0
暂无评论