门户网站首页,wordpress投稿页面,wordpress 侧边栏 插件,17网店货源网Chrome 开发者工具 介绍控制面板时间线下载信息概要请求列表单个请求时间线优化时间线上耗时项 lighthouse 插件Performance#xff08;性能指标#xff09;Accessibility#xff08;可访问性#xff09;Best Practices#xff08;最佳实践#xff09;SEO#xff08;搜索… Chrome 开发者工具 介绍控制面板时间线下载信息概要请求列表单个请求时间线优化时间线上耗时项 lighthouse 插件Performance性能指标Accessibility可访问性Best Practices最佳实践SEO搜索优化 Performance 面板认识配置面板认识报告页概览面板性能面板 介绍
Chrome 开发者工具非常重要所蕴含的内容也是非常多的熟练使用它能让你更加深入地了解浏览器内部工作原理。
控制面板 时间线
时间线主要用来展示 HTTP、HTTPS、WebSocket 加载的状态和时间的一个关系用于直观感受页面的加载过程。如果是多条竖线堆叠在一起那说明这些资源被同时加载。至于具体到每个文件的加载信息还需用到详细列表。 下载信息概要
下载信息概要面板中需要关注两点
DOMContentLoaded 事件发生后说明页面已经构建好 DOM 了这就意味着构建 DOM 所需要的 HTML 文件、JavaScript 文件、CSS 文件都已经下载完成了Load 说明浏览器已经加载了所有的资源图像、样式表等
通过这个下载信息概要面板可以查看触发这两个事件所花费的时间。 请求列表
单个请求时间线
看一个请求的详细流程可以看它的时间线面板
第一个是 Queuing也就是排队的意思当浏览器发起一个请求时会有很多原因导致该请求不能被立即执行需要排队等待首先页面中的资源是有优先级的比如 CSS、HTML、JavaScript 等都是页面中的核心文件所以优先级最高而图片、视频、音频这类资源就不是核心资源优先级就比较低。通常当后者遇到前者时就需要“让路”进入待排队状态。其次浏览器会为每个域名最多维护 6 个 TCP 连接如果发起一个 HTTP 请求时这 6 个 TCP 连接都处于忙碌状态那么这个请求就会处于排队状态。最后网路进程在为数据分配磁盘空间时新的 HTTP 请求也需要短暂的等到磁盘分配结束。。等待排队完成之后就要进入发起连接的状态了。不过在这之前还有一些原因可能导致连接过程被推迟这个推迟就表现在面板中的 Stalled 上它表示停滞的意思。如果使用了代理服务器还会增加一个 Proxy Negotiation 阶段也就是代理协商阶段它表示代理服务器连接协商所用的时间接下来就是是 Initial connection/SSL阶段也就是和服务器建立连接的阶段还需要一个额外的 SSL 握手时间这个过程主要用来协商一些加密信息和服务器建立好连接之后网络进程会准备请求数据并将其发送给网络这就是 Request sent 阶段。通常这个阶段非常快因为只需要把浏览器缓冲区的数据发送出去就结束了并不需要判断服务器是否接收到。数据发送出去后接下来就是等待接收服务器第一个字节的数据这个阶段称为 Waiting(TTFB)通常也称为第一时间是反映服务器端响应速度的重要指标它包含了 TCP 连接时间、发送 HTTP 请求时间和获得响应消息第一个字节时间。如果 TTFB 时间过大说明服务器性能较差接收到第一个字节之后进入陆续接收完整数据的阶段也就是 Content Download这意味着第一字节时间到接收到全部响应数据所用的时间
优化时间线上耗时项
Queuing 时间过长 Queuing 时间过长大概率是由浏览器为每个域名最多维护 6 个连接导致的。基于这个原因可以让 1 个站点下面的资源放在多个域名下面比如放到 3 个域名下就可以支持 18 个连接了这种方法称为域名切片技术。另外因为 HTTP2 已经没有每个域名最多维护 6 个 TCP 连接的限制了所以把站点升级到 HTTP2 也不失为一个方法。TTFB 时间过长 可能的原因有 服务器生成页面数据的时间过长对于动态网页来说服务器收到用户打开一个页面的请求时首先要从数据库中读取该页面所需的数据然后把这些数据传入到模板中模板渲染后再返回给用户这个处理过程中可能某个环节出现问题、网络的原因使用了低带宽的服务器等、发送请求头时带上了多余的用户信息比如一些不必要的 Cookie 信息服务器接收到这些信息之后可能需要对每一项都做处理加大了服务器的处理时长。 针对每一项采取对应措施例如通过增加各种缓存技术来提高服务器处理速度、使用 CDN 缓存静态文件来解决网络问题、尽量减少不必要的 Cookie 数据信息等。Content Download 时间过长 可能是字节数太多的原因导致的可以减少文件大小比如压缩、去掉源码中不必要的注释等。
lighthouse 插件
chrome 浏览器中添加扩展程序 lighthouse结合页面加载过程来观察页面指标数据 脚本执行结束渲染进程判断该页面的 DOM 生成完毕于是触发 DOMContentLoad 事件。等所有资源都加载完成之后再触发 onload 事件。 Performance性能指标 First Paint (FP) 当渲染进程确认要渲染当前的请求后渲染进程会创建一个空白页面我们把创建空白页面的这个时间称为 FP。 然后渲染进程继续请求关键资源关键资源包括了 JavaScript 文件和 CSS 文件因为关键资源会阻塞页面的渲染所以需要等待关键资源加载完成后才能执行进一步的页面绘制。脚本的执行会修改 DOM引发重绘和重排等操作。First Contentful Paint (FCP) 首次内容绘制浏览器首次绘制来自 DOM 的内容的时间这是用户第一次开始看到页面内容但仅仅是内容并不意味着它是有用的内容例如 Header、导航栏等。Time to Interactive (TTI) 网页第一次完全达到可交互状态的时间点浏览器可以持续性的响应用户的输入。Speed Index首屏时间 速度指数是一个表示页面可视区域中内容的填充速度的指标可以通过计算页面可见区域内容显示的平均时间来衡量Total Blocking Time (TBT) 总阻塞时间度量了 FCP 和 TTI 之间的总时间在该时间范围内主线程被阻塞足够长的时间以防止输入响应。 只要存在长任务该主线程就会被视为“阻塞”是因为浏览器无法中断正在进行的任务如果用户确实在较长的任务中间与页面进行交互则浏览器必须等待任务完成才能响应。Largest Contentful Paint (LCP) 最大内容绘制可视区域中最大的内容元素呈现到屏幕上的时间用以估算页面的主要内容对用户可见时间LCP 考虑的元素包括 img 元素、image 元素内的 svg 元素、video 元素、通过 url() 函数加载背景图片的元素、包含文本节点或其他内联文本元素子级的块级元素。Cumulative Layout Shift (CLS) 累积布局偏移CLS 会测量在页面整个生命周期中发生的每个意外的布局移位的所有单独布局移位分数的总和它是一种保证页面的视觉稳定性从而提升用户体验的指标方案布局偏移发生在可见元素从一个渲染帧到下一个渲染帧改变其位置的任何时候CLS 得分是给开发者的一个信号表明他们的用户没有经历不必要的内容移动分数越低越好。
Accessibility可访问性
Accessibility 辅助功能无障碍设计也称为网站可达性。是指所创建的网站对所有用户都可用/可访问不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。
比如某处文字背景色和蚊子颜色对比度不够对于视障用户可能不好区分。
Best Practices最佳实践
实践性检测如网页安全性如是否开启 HTTPS、网页存在的漏洞等下图是通过审计的项目 SEO搜索优化
比如网页 title 是否符合搜索引擎的优化标准等
Performance 面板
认识配置面板 区域 1 可以设置 Network 来限制网络加载速度CPU 来限制 CPU 的运算速度例如将网络设置为 Fast 3GCPU 运算能力降低到 1/6 。区域 2 中两个按钮可以用来监控加载阶段和交互阶段的性能数据不过是分别通过录制来完成的不同于 lighthouse 只能监控加载阶段的性能数据。 录制加载阶段性能数据时Performance 会重新刷新页面并等到页面完全渲染出来后Performance 就会自动停止录制 录制交互阶段性能数据需要手动停止录制过程
认识报告页
两种方式最终生成的报告都是一样的三个主要部分分别是概览面板、性能指标面板、详情面板。如图所示 概览面板
概览面板提供几个关键指标**页面帧速FPSFrames Per Second、CPU资源消耗、网络请求流量、V8 内存使用量堆内存**等按照时间顺序做成图表的形式展现出来这就是概览面板。根据概览面板如何帮助我们定位可能存在的问题呢
FPS 图中红色块表示附近渲染出一帧所需时间过长如果 CPU 图像占用面积太大表示 CPU 使用了越高有可能因为某个 JavaScript 占用太多的主线程时间如果 V8 内存使用量一直在增加有可能是某种原因导致了内存泄漏
性能面板
我们通过概览面板来定位问题的时间节点然后再使用性能面板分析该时间节点内的性能数据具体来说比如概率面板中的 FPS 图中出现了红色块点击该红色块可以定位到该红色块的时间节点内如图所示 你也可以通过键盘 WASD 四个键来进行缩放和位置移动。这里 Main 指标详细记录了渲染主线程上的任务执行记录通过分析 Main 指标能够定位到页面中所存在的性能问题。下面详细介绍如何分析 Main 指标。Main 指标放大可以看到很多一段一段灰色横条每个灰色横条对应了一个任务长条长度对应了任务的执行时长如下图所示 通常渲染主线程上的任务都是比较复杂的Main 指标不仅记录了一个任务的时长同时记录了任务执行过程中的一些关键细节这些细节就是任务的过程灰色下面的横条就是一个个过程同样这些横条的长度就代表这些过程执行的时长。下面我们结合一个简单的页面来分析页面加载过程
style.area{border: 2px ridge;}.box{background-color: rgba(106, 24, 238, 0.26);height: 5em;margin: 1em;width: 5em;}
/stylediv classareadiv classbox rAF/div
/div
brfunction setNewArea() {let el document.createElement(div)el.setAttribute(class, area)el.innerHTML div classbox rAF/divdocument.body.append(el)
}
setNewArea()解析 HTML 数据阶段它的主要任务就是通过解析 HTML 数据、解析 CSS 数据、执行 JavaScript 来生成 DOM 和 CSSOM结合下图分析 在 ParseHTML 过程中如果解析到了 script 标签便进入脚本执行过程也就是图中的 Evaluate Script。我们知道执行一段脚本首先需要编译该脚本也就是图中对应的 Compile Script。编译好后进入程序执行阶段在执行全局代码时V8 会构造一个 ananymouse 过程在执行 ananymouse 过程中会调用 setNewArea在调用 setNewArea 过程中又调用了 createElement由于之后调用了 document.append 方法触发了 DOM 内容的修改所以又强制执行了 Parse HTML。DOM 生成完成后会触发相关的 DOM 事件比如典型的 DOMContentLoaded 和 readyStateChange 事件。
