网站制作完成后为了,东莞好的网站建设效果,艾特思成都网站建设,九江市建设工程质量监督站网站经常会听到比如为什么我的js代码没执行啊#xff1f;,我明明发送了请求#xff0c;为什么反应#xff1f;,我这个网站怎么加载的这么慢#xff1f;这类的问题#xff0c;那么问题既然存在#xff0c;就需要去解决它#xff0c;需要…经常会听到比如为什么我的js代码没执行啊,我明明发送了请求为什么反应,我这个网站怎么加载的这么慢这类的问题那么问题既然存在就需要去解决它需要解决它首先我们得找对导致问题的原因才能对症下药。 每个文件的载入、每次发送的请求也都是一次网络交互所以在这个面板中我们能够看到我们所需要的js文件是否被加载我们所请求的接口到底返回了没有我们能够知道哪个文件拖慢了整个web页的加载过程Netwrok面板中会记录应用程序的每一次网络交互信息每次交互的详细时间、HTTP请求头和响应头、cookies、WebSocket的数据等等... 面板的资源数据依赖的是javascript的资源计时api对于每一个资源的加载都提供详细的同步数据。比如明确列出当一个http开始请求的时间及最后字节接收完的时间以及详细过程。我们也可以通过window.performance.getEntries()方法获取资源加载列表下面给出列表中第一个对象的属性截图。 简单过一遍这些属性的含义(这些属性都是只读的) connectEnd浏览器与服务器完成建立用以检索资源的网络连接的时间戳 connectStart浏览器与服务器开始建立用以检索资源的网络连接的时间戳 damainLookupEnd浏览器完成资源的域名解析的时间戳 damainLookupStart浏览器开始进行资源的域名解析的时间戳 duration资源请求从开始到结束的时间差 entryTypePerformanceEntry对象的类型该对象封装一个单一的性能指标作为性能表的一部分此类型值 是frame,mark,measure,navigation,resource,server的其中一个。 fetchStart浏览器开始获取资源的时间戳 initiatorType资源文件的类型 name资源的url redirectEnd接收到重定向资源的最后一个响应字节的时间戳 redirectStart启动重定向以获取资源的开始时间戳 requestStart浏览器从服务器请求资源的开始时间戳 responseEnd浏览器接收到资源最后一个字节的时间戳或者关闭传输连接的时间戳 responseStart浏览器接收到服务器的响应的第一个字节的时间戳 secureConnectionStart浏览器开始握手协议以保护当前连接的安全性握手开始的时间 startTime浏览器开始获取资源前的时间戳(整个过程的开始时间) workerStart如果当前上下文是worker返回开始获取资源的时间戳否则返回0(应该是应用于双工通信的) 回到Network我们来看看这个面板 认识Network 记录按钮 处于打开状态时会在此面板进行网络连接的信息记录关闭后则不会记录。 清除记录 清除当前的网络连接记录信息。 捕获截屏 记录页面加载过程中一些时间点的页面渲染情况截图根据可视窗口截取如下图所示。 过滤条件 自定义 选择框内可输入过滤关键字进行资源列表的过滤如下图所示。 图中regex选择框勾选可支持正则匹配。 也可进行指定条件的搜索如下图。 指定条件有哪些 domain资源所在的域即url中的域名部分。如 domain:api.github.com has-response-header资源是否存在响应头无论其值是什么。如 has-response-headerAccess-Control-Allow-Origin is当前时间点在执行的请求。当前可用值running larger-than显示大于指定值大小规格的资源。单位是字节(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K method使用何种HTTP请求方式。如 GET mime-type也写作content-type是资源类型的标识符。如 text/html scheme协议规定。如 HTTPS set-cookie-name服务器设置的cookies名称 set-cookie-value服务器设置的cookies的值 set-cookie-domain服务器设置的cookies的域 status-codeHTTP响应头的状态码 按钮组 根据按钮规定的条件进行筛选比如下图过滤出图片。 显得太高端竟然还可以浏览图片。 按钮组有: All,XHR,JS,CSS,Img,Media,Font,Doc(Document),WS(WebSocket),Manifest,Other。 资源列表样式 资源列表详细信息和缩略信息的显示。 保存日志 在页面重新加载或者url改变时保留日志(包括资源列表和时间轴上的数据)。 是否缓存 当打开开发者工具时生效打开这个开关则页面资源不会存入缓存可以从Status栏的状态码看文件请求状态。 限流控制(网速模拟) 模拟不同网速下的环境加载当前页面直接看图就能知道怎么用了。 时间轴 图中有两条线一条蓝色的一条橙色的。 蓝色线代表DOM已加载完成红色线表示页面加载完(包括资源引用)也可以用代码对这两个事件进行监听在这两个事件完成的时间点做对应的操作。 window.addEventListener(DOMContentLoaded,function(e){e.cancelBubble true;console.log(window.performance.now());},true);window.addEventListener(load,function(e){e.cancelBubble true;console.log(window.performance.now());},true); 回到时间轴来探查它给我们提供了什么信息。 配合资源列表的timeline使用我们选中一段时间内的资源加载情况来看看。 图中截取的大致时间是5.2~5.75左右的一小截没一条多色线代表一个资源的网络交互情况上面的时间轴中有2个资源是刚开始进行网络连接有3个资源已经加载完毕还有1个资源全程都在加载过程中然后对应资源列表中的timeline字段能够发现情况其实和上面是一样的并且在这里还能够明确的看到这是哪个文件及其详细信息。 然后将鼠标放到timeline中的多色线上还能够看到资源请求的详细信息如图所示。 可以明确的看出一条资源的列队、停滞、代理协议、初始化连接、SSL协议、发送request、等待及内容下载所耗的时间。 既然都说这么多了就将timeline从资源列表中提取出来提前讲了吧点击timeline列的标题会有一些选项这里介绍下这些选项。 Start Time根据每个网络请求的发送时间排序也是默认排序 Respone Time根据每个网络请求的响应时间排序 End Time根据每个网络请求的完成时间排序 Total Duration根据每个网络请求的总耗时排序 Latency根据每个网络请求的发送请求时间点和得到响应时间点的时间差排序 资源列表 资源列表展示了所有资源请求的信息字段也是很多在下面都会列出来但不会每一个都进行详细探讨(以详细模式的为案例吧缩略模式的也包含在里面)。 Name(Path)资源的名称和url Status(Text)HTTP请求状态码及文字说明 Type所请求的资源的MIME类型 MethodHTTP请求发送方式 Domain资源所在域 Cookies网络请求所产生的cookies的数量 Size(Content)size是响应头和响应体相加的大小规格content是资源解码内容的大小规格 Time(Latency)time是整个网络交互所耗的总时间从发送请求到接收最后一个字节latency是响应时加载第一个字节的时间Timeline时间轴(已介绍略过...) 此外还有Cache-Control(缓存操作网页缓存由 HTTP消息头中的Cache-control控制)、Connection(连接状态如 keep-alive)、Connection Id(连接id)、Content-Encoding(连接解码如 gzip)、Content-Length(内容长度)、ETag(Entity Tag资源的实体标签)、Initiator(触发点)、Keep-Alive(据说功能是使客户端到服务器端的连接持续有效)、Last-Modified(最后修改时间)、Priority(优先级)、Protocol(协议)、Remote Address(远程地址)、Scheme(协议模式)、Set-Cookies(服务端设置cookies)、Vary(浏览器与服务器的编码协议规定) 以上各个知识点可自行搜索网上资料不少哦(指的是google...) 资源的详细信息 HeadersHeader面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等。如图所示 Preview预览面板用于资源的预览。 Response响应信息面板包含资源还未进行格式处理的内容如常见的json数据当然下面的截图不符合之前说的json数据而是jsonp的... Cookiescookies面板显示该资源请求中所传输的所有cookies信息并以表格形式展示。 Timing资源请求的详细信息上面有描述。如图 还有WebSocket面板在需要实现双工通信的时候会有暂时未涉及到不是很了解之后如有理解到再做补全。 右键菜单 Copy Request Headers复制HTTP请求头到系统剪贴板 Copy Response Headers复制HTTP响应头到系统剪贴板 Copy Response复制HTTP响应内容到系统剪贴板 Copy as cURL将网络请求作为一个curl的命令字符复制到系统剪贴板(curl是一种开源的命令行工具和库用于配合url语法进行数据传输) Copy All as HAR将网络请求记录信息以HAR格式复制到系统剪贴板(what is HAR file) Save as HAR with Content将资源的所有的网络信息保存到HAR文件中(.har文件) Clear Browser Cache清除浏览器缓存 Clear Browser Cookies清除浏览器cookies Open in Sources Panel当前选中资源在Sources面板打开 Open Link in New Tab在新tab打开资源链接 Copy Link Address复制资源url到系统剪贴板 Save保存当前资源文件到本地 信息归总 主要展示了一些基本的统计信息请求总次数、传输总大小总耗时多少、DOM加载完的时间、页面加载完的时间(包含资源)如图 就这些吧如有不正之处敬请指出~ 同时欢迎交流~转载于:https://www.cnblogs.com/dullsky/p/5631088.html