【转】chrome devtools protocol——Web 性能自动化

前言

在测试Web页面加载时间时,可能会是这样的:

  1. 打开chrome浏览器。
  2. 按F12打开开发者工具。
  3. 在浏览器上打开要测试的页面
  4. 查看开发者工具中Network面板的页面性能数据并记录
  5. 或者在开发者工具中Console面板运行performance.timingperformance.getEntries()收集数据

performance相关信息看这里PerformanceTiming

几十上百个页面,每个版本都这样来,估计疯了,所以就想怎么把它做成自动化呢?

chrome devtools protocol

chrome devtools protocol允许第三方对基于chrome的web应用程序进行调试、分析等,它基于WebSocket,利用WebSocket建立连接DevTools和浏览器内核的快速数据通道。一句话,有了这个协议就可以自己开发工具获取chrome的数据

协议详细内容看这里chrome devtools protocol

目前已经有很多大神针对这个协议封装出不同语言(nodejs,python,java...)的库,详细信息看这里awesome-chrome-devtools

这边我选择的是python的pychromegithub地址,使用方法很简单,直接看github上它的Demo

这个库依赖websocket-client

获取performance api数据

这里使用Runtime Domain中运行JavaScript脚本的APIRuntime.evaluate

# 开始前先启动chrome,启动chrome必须带上参数`--remote-debugging-port=9222`开启远程调试否则无法与chrome交互browser = pychrome.Browser(‘http://127.0.0.1:%d‘ % 9222)tab = browser.new_tab()tab.start()tab.Runtime.enable()tab.Page.navigate(url={你的页面地址})# 设置等待页面加载完成的时间tab.wait(10)# 运行js脚本timing_remote_object = tab.Runtime.evaluate(            expression=‘performance.timing‘        )# 获取performance.timing结果数据timing_properties = tab.Runtime.getProperties(            objectId=timing_remote_object.get(‘result‘).get(‘objectId‘)        )timing = {}for item in timing_properties.get(‘result‘):            if item.get(‘value‘, {}).get(‘type‘) == ‘number‘:                    timing[item.get(‘name‘)] = item.get(‘value‘).get(‘value‘)# 获取performance.getEntries()数据entries_remote_object = tab.Runtime.evaluate(            expression=‘performance.getEntries()‘        )entries_properties = tab.Runtime.getProperties(            objectId=entries_remote_object.get(‘result‘).get(‘objectId‘)        )entries_values = []for item in entries_properties.get(‘result‘):  if item.get(‘name‘).isdigit():    url_timing_properties = tab.Runtime.getProperties(                    objectId=item.get(‘value‘).get(‘objectId‘)                )     entries_value = {}     for son_item in url_timing_properties.get(‘result‘):                    if (son_item.get(‘value‘, {}).get(‘type‘) == ‘number‘or                            son_item.get(‘value‘, {}).get(‘type‘) == ‘string‘):                        entries_value[son_item.get(‘name‘)] = son_item.get(‘value‘).get(‘value‘)                entries_values.append(entries_value)

获取Network数据

实际上performance.getEntries()不会记录404的请求信息,另外当前页面通过js触发新html页面请求时它只会记录第一个页面的请求,在这些情况下就需要通过Network Domain的API来收集所有请求信息,先介绍用到的API:

  1. Network.requestWillBeSent每个http请求发送前回调
  2. Network.responseReceived首次接送到http响应时回调
  3. Network.loadingFinished请求加载完成时回调
  4. Network.loadingFailed请求加载失败时回调
    # 封装上面4个事件对应的回调方法class NetworkAPIImplemention(object):
    
    def __init__(self):    self.request_dict = {}    # 首个请求开始时间    self.start = None
    
    def request_will_be_sent(self, **kwargs):    if self.start is None:        self.start = time.time()    dict_http = {        ‘url‘:kwargs.get(‘request‘).get(‘url‘),        ‘start‘:kwargs.get(‘timestamp‘)    }    self.request_dict[kwargs.get(‘requestId‘)]=dict_http    #print "loading:%s" % kwargs.get(‘request‘).get(‘url‘)
    
    def loading_finished(self, **kwargs):    # 服务器返回code 例如404也是finished    self.request_dict[kwargs.get(‘requestId‘)][‘end‘] = kwargs.get(‘timestamp‘)    self.request_dict[kwargs.get(‘requestId‘)][‘size‘] = kwargs.get(‘encodedDataLength‘)
    
    def response_received(self, **kwargs):    self.request_dict[kwargs.get(‘requestId‘)][‘type‘] = kwargs.get(‘type‘)    self.request_dict[kwargs.get(‘requestId‘)][‘response‘] = kwargs.get(‘response‘)
    
    def loading_failed(self, **kwargs):    self.request_dict[kwargs.get(‘requestId‘)][‘end‘] = kwargs.get(‘timestamp‘)    self.request_dict[kwargs.get(‘requestId‘)][‘error_text‘] = kwargs.get(‘errorText‘)network_api = NetworkAPIImplemention()browser = pychrome.Browser(‘http://127.0.0.1:%d‘ % 9222)tab = browser.new_tab()# 绑定回调函数tab.Network.requestWillBeSent = network_api.request_will_be_senttab.Network.responseReceived = network_api.response_receivedtab.Network.loadingFinished = network_api.loading_finishedtab.Network.loadingFailed = network_api.loading_failedtab.start()tab.Network.enable()tab.Runtime.enable()# 是否禁用缓存if disable_cache:tab.Network.setCacheDisabled(cacheDisabled=True)tab.Page.navigate(url={你的页面地址})tab.wait(10)tab.stop()self.browser.close_tab(tab)# 获取的所有url详细信息print network_api.request_dict

监听页面事件

有时候特别是一些复杂的页面,页面依赖js和后端资源数据,并不是通常意义上页面loadEventEnd事件触发完就表示页面加载完成,这种情况可能需要依赖开发打点。
这里以开发设计了一个Loaded事件为例

# 具体事件注册方式和注册时机询问开发,所谓注册时机即要求在js对象生成后注册,我们项目中page是在一个js文件中声明的,需要等这个js文件请求完成后再注册# 这边使用Promise方式,这种方式awaitPromise参数必须是Truejs = """    new Promise((resolve, reject) => {        page.getController().getPageEvent().addEventListener("Loaded",                function(){                    resolve(new Date().getTime());                });        });   """custom_result = tab.Runtime.evaluate(    expression=js,    awaitPromise=True,    timeout=timeout * 1000)print custom_result.get(‘result‘).get(‘value‘)

有个坑peformance.now()获取与chrome开发者工具协议一样类型的时间时,这个时间不准确,只好用new Date().getTime()

写在最后一开始是使用nodejs的chrome-remote-interface,但是发现Page.loadEventFired回调后不会再记录请求,事实上有些页面仍然有请求没有完成,不懂是不是我使用姿势不对附赠W3C的一幅图

原文地址:https://www.cnblogs.com/Ronaldo-HD/p/9907447.html

时间: 2024-11-06 03:50:32

【转】chrome devtools protocol——Web 性能自动化的相关文章

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能

来源: http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles 我们都希望创建高性能的Web应用程序.由于我们的应用程序变得越来越复杂,我们可能想要支持丰富的画面以及理想的60帧/秒,这能保证我们的应用程序响应灵敏且生动流畅. 知道如何衡量和提高性能,是一个有用的技能,在这短短的文章中,我会带您简单回顾关于如何通过 Chrome DevTools的 Timeline和Profiles做到这一

使用Chrome DevTools的Timeline分析页面性能

随着webpage可以承载的表现形式更加多样化,通过webpage来实现更多交互功能,构建web应用程序已经成为很多产品的首要选择.这种方式拥有非常明显的优势:跨平台.开发便捷.便于部署和维护等等,但随着功能的不断积累,web应用程序也会变得越来越复杂.但是,我们仍然想要在webpage支持丰富的呈现形式的同时,让页面效果能够达到>=60fps(帧)/s的刷新频率以避免出现卡顿,就需要我们使用一些比较直观的方式来分析衡量页面的性能问题,为性能优化方案提供依据. 为什么是60fps?我们的目标是保

http/2时代的web性能

http/2时代的web性能 近几年来,Web性能的话题逐渐升温,大家开始认识到它在设计过程中的重要性.今天,随着HTTP/2这个新协议的采用,Web已经进入HTTP/2时代. 一直以来我们耳熟能详的那些Web性能优化技术,很可能会成为历史.这次分享将带大家重温当前最佳实践,哪些技术在HTTP/2时代会发生变化,以及如何恰到好处地实现从1向2的过渡. 本文是为分享的PPT做准备的.叙述可能不具体和不到位.分享:Lecture 01 HTTP/2时代的Web性能 Slider: http://sl

开发者应该了解的 web 性能

网站的快和慢有什么区别呢? 存在一种正确答案吗?没有,很不幸,还没有.原因在于网站具备很多因素,每种因素都有可能减慢网站.因此,本文不会给你提供一份需要完成的清单,而是打算解释清楚,某些因素是怎样减慢网站的,以及相应地你能做些什么.正如谚语所说的: 授人以鱼,不如授之以渔:授人以鱼只救一时之及,授人以渔则可解一生之需. 除了让你给脚本增加 "async" 标签,或按照特定顺序布局页面之外,我还打算解释这些修改所带来的差异.这样,你就能折腾你的应用程序,并确认哪些修改是有用的. 一. 加

WEB性能优化【资料】

为了解决近期项目遇到的性能瓶颈,花费不少功夫恶补了web性能的相关优化方案,整理了一些资料,分享给大家. 博客 网页性能管理详解 - 阮一峰的网络日志 页面性能优化的利器 - Timeline - 云加社区 - 博客园 什么是CDN,为什么你的网站需要它? 网站开发动静分离实践 - BruceFeng 网页性能优化 - 小方. - 博客园 16毫秒的优化--Web前端性能优化的微观分析--O'Reilly Velocity China 2013 Web 性能与运维大会 全新Chrome Devt

Chrome DevTools的使用

一.Chrome DevTools 简介 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析 手册:Chrome 开发者工具中文手册.Chrome 开发者工具官网 打开Chrome开发者工具 在Chrome菜单中选择:更多工具->开发者工具 在页面元素右键点击,选择检查 快捷键:Ctrl+shift+I(最近关闭)或Ctrl+shift+C(Elements)或 Ctrl+shift + J(console) 或 F12 二.

Chrome DevTools的15个使用技巧(译)

谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须掌握的工具.大多数前端开发者可能熟悉关于chorme的许多特点,例如使用console和debugger在线编辑CSS.在这篇文章中,我们将分享15个很酷的技巧,让你能够更好的改进工作流程.看完这些技巧你会惊奇而又兴奋的发现是不是很像Sublime Text. 1.快速文件转换 如果Sublime Text没有“Go to anything”这个功能你不可能

gzip压缩tomcat服务器响应包,大幅提升web性能

忘记是第几次读<高性能网站建设指南>的"规则4──压缩组件"一章了,之前一直搞得浑浑噩噩,今天才恍然有所觉悟,原来通过减小HTTP响应大小来减少响应时间应用到tomcat服务器上是这么一回事,结果令人欣慰万分,同时令我感到羞愧.gzip压缩率高达70%左右,这对于提升web性能来说简直就是逆天的表现,而今天之前的我,却不曾知晓!想必很多大牛都已经不屑于整理这样的资料,然而对于我来说,"像张白纸,爱情才刚刚开始,我要写的字太多!" 一.效果展示 对于js.

Web性能--TCP的构成

前言:阅读<Web性能权威指南>摘录笔记 内容大纲: 1.因特网有两个核心的协议:IP和TCP. 2.三次握手 正文: 1.因特网有两个核心的协议:IP和TCP. IP,即Internet Protoco(因特网协议),负责联网主机之间的路由选择和寻址 TCP,即Transmission Control Protocol(传输控制协议),负责在不可靠的传输信道之上提供可靠的抽象层. TCP/IP也常被称为"因特网协议套件"(Internet Protocol Suite)