标题：*
140 字

TAG标签：（用空格隔开）
30 字

恢复历史版本：

HTML转MD HTML转MD2

原文&nbsp;<a href="https://www.jianshu.com/p/11d519e2d0cb">https://www.jianshu.com/p/11d519e2d0cb</a> <img data-original-src="//upload-images.jianshu.io/upload_images/618241-fbc4471c5a9bfcf2.png" data-original-width="650" data-original-height="453" data-original-format="image/png" data-original-filesize="163264" data-image-index="0" class="" src="https://upload-images.jianshu.io/upload_images/618241-fbc4471c5a9bfcf2.png?imageMogr2/auto-orient/strip|imageView2/2/w/650/format/webp" style="box-sizing: border-box; vertical-align: middle; border: 0px; max-width: 100%; width: auto; height: auto; transition: all 0.15s linear 0s; z-index: 95; opacity: 1; cursor: zoom-in;"/>headless chrome.png<blockquote style="box-sizing: border-box; margin: 0px 0px 20px; padding: 20px; background-color: rgb(250, 250, 250); border-left: 6px solid rgb(230, 230, 230); word-break: break-word; line-height: 30px; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal;">Headless Browser(无头的浏览器)是什么鬼?</blockquote><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">简而言之，Headless Browser是没有图形用户界面(GUI)的web浏览器，通常是通过编程或命令行界面来控制的。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">Headless Browser的许多用处之一是自动化可用性测试或测试浏览器交互。如果您正在尝试检查页面在不同的浏览器中呈现的方式，或者确认页面元素在用户启动某个工作流之后出现，那么使用Headless Browser可以提供大量的帮助。除此之外，如果内容是动态呈现的(比如通过Javascript)，web抓取等传统的面向web的任务就很难做了。使用Headless Browser可以方便地访问这些内容，因为内容的呈现方式与完全浏览器中的内容完全相同。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">基于不同的浏览器，有不同的浏览器引擎。(<a href="https://link.jianshu.com/?t=http%3A%2F%2Fwww.cnblogs.com%2Fwangjunqiao%2Fp%2F5212561.html" target="_blank" rel="nofollow" style="box-sizing: border-box; color: rgb(6, 129, 208); text-decoration-line: none; background-color: rgba(0, 0, 0, 0); outline: none; cursor: pointer; transition: color 0.3s ease 0s; touch-action: manipulation;">http://www.cnblogs.com/wangjunqiao/p/5212561.html</a>)<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">主流浏览器所使用的内核分类<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等 Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等 Presto内核：Opera7及以上 Webkit内核：Safari,Chrome等<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">先让我们看看浏览器处理过程中的每一个步骤：<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">1.处理HTML脚本，生成DOM树 2.处理CSS脚本，生成CSSOM树 （DOM和CSSOM是独立的数据结构） 3.将DOM树和CSSOM树合并为渲染树 4.对渲染树中的内容进行布局，计算每个节点的几何外观 5.将渲染树中的每个节点绘制到屏幕中<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">Headless Browser实际就是节约了第4,5步的时间。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">3年前，无头浏览器 PhantomJS 已经如火如荼出现了，紧跟着 NightmareJS 也成为一名巨星。无头浏览器带来巨大便利性：页面爬虫、自动化测试、WebAutomation...用过PhantomJS的都知道，它的环境是运行在一个封闭的沙盒里面，在环境内外完全不可通信，包括API、变量、全局方法调用等。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">Headless Chrome和Python 在发布Headless Chrome之前，当你需要自动化浏览器的时候随时都有可能涉及多个窗口或标签，你必须担心CPU和/或内存的使用。这两种方式都与必须从被请求的URL中显示显示的图形的浏览器相关联。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">当使用一个无头的浏览器时，我们不用担心这个。因此，我们可以预期我们编写的脚本的内存开销会降低，执行速度也会更快。 而Chrome从59版本开始 推出了 headless mode（当时仅支持Mac和Linux），而目前最新的Chrome63版已经开始在windows上支持headless mode。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">安装Headless Chrome 在windows Selenium操作chrome浏览器需要有ChromeDriver驱动来协助。 什么是ChromeDriver？<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">ChromeDriver是Chromium team开发维护的，它是实现WebDriver有线协议的一个单独的服务。ChromeDriver通过chrome的自动代理框架控制浏览器，建议从以下地址直接下载最新的版本：<a href="https://link.jianshu.com/?t=https%3A%2F%2Fchromedriver.storage.googleapis.com%2Findex.html%3Fpath%3D2.34%2F" target="_blank" rel="nofollow" style="box-sizing: border-box; color: rgb(6, 129, 208); text-decoration-line: none; background-color: rgba(0, 0, 0, 0); outline: none; cursor: pointer; transition: color 0.3s ease 0s; touch-action: manipulation;">ChromeDriver 2.34</a> 它才可以支持Chrome v61-63。 可以将此driver放置于：C:\Program Files\Google\Chrome\Application\ （对应的Chrome安装目录下）<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">安装Selenium 在windows cmd命令里面运行： $pip install selenium<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">编写对应的脚本 编写一个对应的百度搜索的脚本<pre class="line-numbers language-python" style="box-sizing: border-box; font-size: 12px; font-family: Consolas, Monaco, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, monospace; margin-bottom: 20px; overflow: auto; overflow-wrap: normal; word-break: break-all; border-radius: 4px; padding: 1em 1em 1em 3.8em; line-height: 1.5; color: rgb(204, 204, 204); background-color: rgb(45, 45, 45); tab-size: 4; hyphens: none; position: relative; counter-reset: linenumber 0;">import&nbsp;osfrom&nbsp;selenium&nbsp;import&nbsp;webdriverfrom&nbsp;selenium.webdriver.common.keys&nbsp;import&nbsp;Keysfrom&nbsp;selenium.webdriver.chrome.options&nbsp;import&nbsp;Optionsimport&nbsp;time

chrome_options&nbsp;=&nbsp;Options()chrome_options.add_argument(&quot;--headless&quot;)base_url&nbsp;=&nbsp;&quot;http://www.baidu.com/&quot;#对应的chromedriver的放置目录driver&nbsp;=&nbsp;webdriver.Chrome(executable_path=(r&#39;C:\Program&nbsp;Files\Google\Chrome\Application\chromedriver.exe&#39;),&nbsp;chrome_options=chrome_options)driver.get(base_url&nbsp;+&nbsp;&quot;/&quot;)start_time=time.time()print(&#39;this&nbsp;is&nbsp;start_time&nbsp;&#39;,start_time)driver.find_element_by_id(&quot;kw&quot;).send_keys(&quot;selenium&nbsp;webdriver&quot;)driver.find_element_by_id(&quot;su&quot;).click()driver.save_screenshot(&#39;screen.png&#39;)driver.close()end_time=time.time()print(&#39;this&nbsp;is&nbsp;end_time&nbsp;&#39;,end_time)</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">以上的脚本运行完成后，你会在你的当前目录看到一个类似于下面画面的screen.png.<br style="box-sizing: border-box; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"/><img data-original-src="//upload-images.jianshu.io/upload_images/618241-e3d8deff450aa43c.png" data-original-width="800" data-original-height="600" data-original-format="image/png" data-original-filesize="73100" data-image-index="1" class="" src="https://upload-images.jianshu.io/upload_images/618241-e3d8deff450aa43c.png?imageMogr2/auto-orient/strip|imageView2/2/w/800/format/webp" style="box-sizing: border-box; vertical-align: middle; border: 0px; max-width: 100%; width: auto; height: auto; transition: all 0.15s linear 0s; z-index: 95; opacity: 1; cursor: zoom-in;"/>screen.png<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">可以看出上面的写法和直接使用Selenium调用Chrome浏览器的时候极其类似，只是多添加了对chrome_options的重写。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">据运行的试验表明，Headelss 的确比Headed的浏览器在内存消耗，运行时间，CPU占用上面都有一定的优势。<img data-original-src="//upload-images.jianshu.io/upload_images/618241-1a0846f6b318549d.png" data-original-width="814" data-original-height="118" data-original-format="image/png" data-original-filesize="21138" data-image-index="2" class="" src="https://upload-images.jianshu.io/upload_images/618241-1a0846f6b318549d.png?imageMogr2/auto-orient/strip|imageView2/2/w/814/format/webp" style="box-sizing: border-box; vertical-align: middle; border: 0px; max-width: 100%; width: auto; height: auto; transition: all 0.15s linear 0s; z-index: 95; opacity: 1; cursor: zoom-in;"/>headless对比.png<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">使用Headless Chrome也许能让你的自动化测试运行更快，而且在视觉测试上面也有一定的优势。感兴趣的朋友可以上手试试。