Web测试之浏览器调试

按键操作

F12 调试JS脚本文件和HTML文件

Ctrl+F5 清理浏览器缓存，重新从服务器上下载JS脚本文件和重新加载

（应用于实时开发调整JS文件）

Network属性

 

Timing

是分析浏览器在处理网络请求时的各个阶段所花费时间的重要工具

请求处理流程：

当浏览器发起一个HTTP请求时，首先会查找缓存。如果缓存中没有所需资源，浏览器会进行DNS查询以获取目标服务器的IP地址。

接着，浏览器会利用获取到的IP地址与服务器建立TCP连接，并发送HTTP请求。

服务器收到请求后，会处理该请求并返回响应。浏览器接收到响应后，会开始下载响应内容。

Timing的关键阶段：

Queueing（排队）：浏览器为每个域名最多维护6个TCP连接（HTTP/1.1）。当页面中的链接很多时，请求可能会因为等待可用的TCP连接而排队。

Stalled（阻塞）：这表示浏览器从得到要发出请求的指令到请求可以实际发出的等待时间。它通常包括代理协商、等待可复用的TCP连接释放的时间等。

DNS Lookup（DNS查询）：浏览器需要通过DNS解析器获取目标服务器的IP地址。在DNS查询完成之前，浏览器无法从主机名下载任何内容。如果本地DNS缓存中有该域名的记录，则DNS查询时间会很短。

Initial connection / SSL：这包括建立TCP连接所花费的时间。如果使用HTTPS协议，则还需要额外的SSL握手时间，用于协商加密信息。

Request sent（请求发送）：从请求的第一个字节发出到最后一个字节发出所花费的时间，即上传时间。

Waiting (TTFB)：请求发出后，到收到响应的第一个字节所花费的时间，即首字节时间（Time To First Byte, TTFB）。它包括了服务器的处理时间和网络传输时间。

Content Download（内容下载）：从收到响应的第一个字节到接收完最后一个字节所花费的时间，即下载时间。

优化措施：

将资源合理分布到多台主机上，可以提高并发数，但过多的并行下载可能会降低性能，取决于带宽和CPU速度。

将脚本置于页面底部，以避免阻塞其他组件的下载。

使用缓存来减少DNS查询和TCP连接的时间。

通过仔细分析浏览器timing，可以识别出网络请求中的瓶颈，并采取相应的优化措施来提高网站的性能。