性能指标
-
DCL
:DOMContentLoaded
事件耗时,当HTML
文档完全加载和解析完成之后,DOMContentLoaded
事件被触发 -
L
:onLoad
事件耗时 当依赖的资源全部加载完毕之后才会触发 -
FP
: First Paint (首次绘制) 第一个像素点绘制到屏幕的时间 -
FCP
: First Contentful Paint 首次内容绘制,首次绘制任何文本,图像,非空白节点的时间 -
FMP
: First Meaningful paint 首次有意义的绘制是页面可用性的度量标准 -
LCP
: Largest Contentful Paint 最大内容渲染,在 viewport 中 最大的页面元素加载的时间 -
FID
: First Input Delay 首次输入延迟,用户首次和页面交互 (单机链接,点击按钮等)到页面响应交互时间 -
TTFB
: time to first byte 首字节时间,从请求到数据返回第一个字节所消耗的时间 -
TTI
: Time to Interactive 可交互时间,DOM 树构建完毕,代表可以绑定事件
HTML 优化
- 标签语义化,合适的标签做合适的事情,有利于
SEO
搜索引擎的检索和优化 - 尽可能延迟 JavaScript 执行,将其放到页面底部,合理使用
async
和defer
- 减少 iframe 的使用 (将内容加载到
<iframe>
中比将内容作为同一直接页面的一部分加载要消耗资源得多---不仅需要额外的 HTTP 请求来加载内容,而且浏览器还需要为每个<iframe>
创建一个单独的页面实例。每个<iframe>
实际上是嵌入在顶级网页中的一个独立网页实例。- 每个<iframe>
还需要单独加载所有共享的数据和媒体文件------你无法在不同的页面嵌入之间共享缓存的资源(再次强调,除非嵌入的页面来自同一源)。这可能导致页面使用的带宽比你预期的要多得多。)
为什么要使用 lazy 属性 和 srcset 属性?
lazy
懒加载 srcset
多设备适配、提高页面加载速度、节省带宽和流量、视网膜屏幕支持(提供更清晰和更锐利的图像显示效果)
html
<img src="800w.jpg" alt="家庭合照" loading="lazy" />### [图像的懒加载]
<img
srcset="480w.jpg 480w, 800w.jpg 800w" [### [通过 srcset 提供不同的图像分辨率]
sizes="(max-width: 600px) 480px,
800px"
src="800w.jpg"
alt="家庭照" />
为什么要使用 preload?
preload
预加载资源,以减少后续延迟,并提高页面加载速度
ini
<video controls preload="none" poster="poster.jpg">
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
</video>
为什么要使用 dns-prefetch?
dns-prefetch
可帮助开发人员掩盖 DNS 解析延迟,此延迟可能会大大降低加载性能
CSS 优化
-
删除不必要的样式,推荐 css 模块化,Chrome 的 DevTools 有一个"覆盖率"选项卡,可以告诉您 CSS 和 JavaScript 的使用量。
-
将 CSS 拆分为独立模块:CSS 模块化可以延迟加载在页面加载阶段非必要的 CSS,缩短初始 CSS 的阻塞和加载时间。最简单的方法是将 CSS 拆分为独立的文件,link 标签的 media 属性 按需引入 css 并仅加载所需内容:
-
最小化和压缩你的 CSS gzip 压缩。
-
简化选择器
-
不要将样式应用于不需要的元素,比如 * 通配符操作
-
使用 CSS 精灵图减少图像相关的 HTTP 请求
-
预加载重要资源 :你可以使用 [
rel="preload"
] 将 [<link>
]元素转换为预加载器,用于关键资源,包括 CSS 文件、字体和图片: -
避免重绘和回流 改元素的尺寸,例如 [
width
]、[height
]、[border
] [padding
] 重新定位元素,例如 [margin
]、[top
]、[bottom
]、[left
]和 [right
] 更改元素的布局,例如 [align-content
]、[align-items
] 和 [flex
]。 添加改变元素几何形状的视觉效果,例如 [box-shadow
]。 -
[使用
will-change
优化元素变化]auto
: 浏览器会自行判断应该对哪些元素进行优化。scroll-position
: 优化元素的滚动位置。contents
: 优化元素的内容(例如字体大小、边框等)。transform
: 优化元素的变换效果(例如旋转、缩放等)。opacity
: 优化元素的透明度。 -
[改善字体性能]
-
使用
content-visibility
跳过渲染工作
JS 优化
async
:这会导致脚本获取与 DOM 解析并行进行,因此它将在同一时间准备好,不会阻塞渲染。
defer
:它会导致脚本在文档解析完成之后,但在触发 [DOMContentLoaded
]事件之前执行。这与 async
有类似的效果。
分解长任务
async function main() {
// 创建要运行的函数数组
const tasks = [a, b, c, d, e];
while (tasks.length > 0) {
// 让步给挂起的用户输入
if (navigator.scheduling.isInputPending()) {
await yield();
} else {
// 从任务数组中取出第一个任务
const task = tasks.shift();
// 运行任务
task();
}
}
}
requestAnimationFrame
相较于 setInterval
更加高效。这是因为 requestAnimationFrame
利用了浏览器的优化机制,在执行动画和界面渲染时能够更加平滑地进行操作,同时还能节省 CPU 资源。另一方面,setInterval
在每个设定的时间间隔内都会执行回调,而不管浏览器是否准备好。这可能会导致一些性能问题,尤其是在处理复杂的动画或需要更新频率较高的界面时。
事件性能,不要忘记 removeEventListener
- 简化 HTML 代码 ,减少 DOM 和 JavaScript 操作,创建文档碎片
DocumentFragment
,减少循环代码的数量 - 基于
Promise
实现接口并发 - 如果,不希望阻塞主线程多使用
Web Worker
,允许你打开一个单独的线程来运行一段 JavaScript 代码,并且 Worker 可以与主线程之间发送和接收消息。在Worker
中进行计算,等待结果,并在准备好时将结果发送回主线程。 - 如果使用状态管理类似于
Redux
这些库,组件销毁的时候别忘记清除状态管理的值
服务器 优化
- 加机器 、cdn 、开启 http2、gzip 压缩,配置强缓存、协商缓存