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

最新推荐文章于 2024-06-06 17:06:48 发布

小码哥・Martin

最新推荐文章于 2024-06-06 17:06:48 发布

阅读量278

点赞数

分类专栏：性能优化文章标签：前端性能优化 chrome

本文链接：https://blog.csdn.net/php_martin/article/details/125873828

版权

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

摘要由CSDN通过智能技术生成

性能优化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