前端性能优化：如何根据chrome的timing优化

最新推荐文章于 2025-09-20 09:14:55 发布

原创

最新推荐文章于 2025-09-20 09:14:55 发布 · 446 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #性能优化 #chrome

本文探讨了如何利用Chrome的性能API进行前端性能优化，包括分析首屏事件、DNS预解析优化、HTTP请求和响应时间、前端打包压缩、图片优化策略以及资源加载策略如延迟加载和预加载。通过这些技巧，可以提升网页加载速度和用户体验。

性能优化API

Performance。performance.now()与new Date()区别，它是高精度的，且是相对时间，相对于页面加载的那一刻。但是不一定适合单页面场景
window.addEventListener("load", ""); window.addEventListener("domContentLoaded", "");
Img的onload事件，监听首屏内的图片是否加载完成，判断首屏事件
RequestFrameAnmation 和 RequestIdleCallback
IntersectionObserver、MutationObserver，PostMessage
Web Worker，耗时任务放在里面执行

检测工具

Chrome Dev Tools
Page Speed
Jspref

前端指标

在这里插入图片描述

window.onload = function(){
   
   
    setTimeout(function(){
   
   
        let t = performance.timing
        console.log('DNS查询耗时 ：' + (t.domainLookupEnd - t.domainLookupStart).toFixed<