前端性能优化——性能监控 迷南。 2022-11-29 11:54 298阅读 0赞 ### 文章目录 ### * * 基础概念 * 代码监控 * Lighthouse使用 ## 基础概念 ## **网页出现白屏原因** ![在这里插入图片描述][20200820135016897.png_pic_center]**网页从白屏到内容展示经历的过程** ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center] TTFB：Time To First Byte，首字节时间 FP：First Paint，首次绘制，绘制Body FCP：First Contentful Paint，首次有内容的绘制，第一个dom元素绘制完成 FMP：First Meaningful Paint，首次有意义的绘制 TTI：Time To Interactive，可交互时间，整个内容渲染完成 对应如下图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 1] FP仅有一个div根节点 FCP包含页面的基本框架，但没有数据内容 FMP包含页面的所有元素及数据 这与vue的几个生命周期类似： created：触发数据获取，页面内容为空节点 mounted：页面首次渲染，包含基本的框架结构 updated：数据获取完成，触发视图更新，视图内容会发生变化 **长任务** 简单来说，任何在浏览器中执行超过50ms的任务，都是long task long task会长时间占据主线程资源，进而阻碍了其他关键任务的执行和响应，造成页面卡顿 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 2] ## 代码监控 ## 调用PerformanceObserver来获取性能指标数据 <script> const observer = new PerformanceObserver((list) => { for(const entry of list.getEntries()){ console.groupCollapsed(entry.name); console.log(entry.entryType); console.log(entry.startTime); console.log(entry.duration); console.groupEnd(entry.name); } }) observer.observe({ entryTypes:['longtask','frame','navigation','resource','mark','measure','paint']}); </script> 获取结果： ![在这里插入图片描述][20200820152603736.png_pic_center]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 3] 开始了吗？页面开始加载了吗？得到了服务端的回应吗？ 首次绘制、首次内容绘制 First Paint (FP) / First Contentful Paint (FCP) 有用吗？有足够用户期望看到的内容被渲染出来了吗？ 首次有效绘制、主要元素时间点 First Meaningful Paint (FMP) / Hero Element Timing 能用吗？用户能够与我们的页面交互了吗？还是依然在加载？ 可交互时间点 Time to Interactive (TTI) 好用吗？交互是否流畅、自然、没有延迟与其他的干扰？ 慢会话 Long Tasks (从技术上来讲应该是：没有慢会话) ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 4] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 5] ## Lighthouse使用 ## npm install -g lighthouse lighthouse https://www.baidu.com/ --view 基于node环境，node版本10+以下会报下面错误，更新node版本即可 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 6] 性能检测结果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 7] [20200820135016897.png_pic_center]: /images/20221124/ba81839ded09488bb44f35a5aa96abf6.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/3175aa2ee18942aa88cc7afbf05f3b22.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/8722d1eb436f47498b1ca0f9085f0224.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/cfb2bff5699d450ba8c295dd1077763b.png [20200820152603736.png_pic_center]: https://img-blog.csdnimg.cn/20200820152603736.png#pic_center [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/20f82536ca2646b6977a8e11b88b6866.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221124/10ee09b0d59e40328fbb4fcc8f7685d6.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221124/717a4cb2a019437684291b9f3f5e246b.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221124/f6993f6a61e4415bbfec038b3f5dd730.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221124/d4a5ea3675d749c29e337c653e08dd13.png
相关 前端性能监控 根据W3C性能小组引入的新的API(目前IE9以上的浏览器)--window.performance，实现前端性能监控 以下是fast3G情况下数据展示 ![598aa6d 末蓝、/ 2022年12月31日 07:28/ 0 赞/ 244 阅读
相关 前端性能监控 根据W3C性能小组引入的新的API(目前IE9以上的浏览器)--window.performance，实现前端性能监控 以下是fast3G情况下数据展示 ![598aa6d 柔情只为你懂/ 2022年12月29日 14:13/ 0 赞/ 255 阅读
相关 【前端性能优化】Webpack性能优化 目录 1. 什么是Webpack？ 2. 提高构建速度 2.1 npm install 过程中的优化 ゞ 浴缸里的玫瑰/ 2022年12月04日 02:27/ 0 赞/ 500 阅读
相关 前端性能优化——性能监控 文章目录 基础概念 代码监控 Lighthouse使用 基础概念 网页出现白屏原因 ![在这里插入图片描述][2020 迷南。/ 2022年11月29日 11:54/ 0 赞/ 299 阅读
相关 前端性能优化-CSS性能优化 文章目录 一、内联首屏关键CSS 二、异步加载CSS 异步加载的几种方式 1.js动态创建样式表link元素，并插入到DOM中 ゞ 浴缸里的玫瑰/ 2022年11月13日 14:26/ 0 赞/ 459 阅读
相关 前端性能优化 前端性能优化的方法：合并、压缩、缓存或者在服务器上开启gzip之类的，目的都是为了让页面加载的更快 资源预拉取（prefetch）则是另一种性能优化的技术。通过预拉取可以告诉 Dear 丶/ 2022年06月06日 10:25/ 0 赞/ 407 阅读
相关 前端性能监控 1.什么是前端 对于网站来说，通常是指网站的前台部分，也就是Web应用中用户可以看得见碰得着的东西。 2.为什么要做前端性能监控 根据《高性能网站建设指南》上的 约定不等于承诺〃/ 2022年06月06日 05:36/ 0 赞/ 692 阅读
相关 前端性能优化 1. 减少 HTTP 请求数量 在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文 拼搏现实的明天。/ 2021年11月01日 21:20/ 0 赞/ 593 阅读
相关 前端性能——监控起步 前端性能 1.关键点 分页面、区域、浏览器、性能指标 页面的性能指标详解： 白屏时间（first Paint Time）——用户从打开页面开始到页面 女爷i/ 2021年09月19日 13:38/ 0 赞/ 565 阅读
末蓝、
柔情只为你懂
ゞ 浴缸里的玫瑰
迷南。
还没有评论，来说两句吧...