2024年最新Vue进阶（幺陆伍）PhantomJS 实战讲解_vue phantomjs，2024年最新字节跳动上千道精选面试题还不刷起来-CSDN博客

本文链接：https://blog.csdn.net/2401_84616191/article/details/138881937

最后

推荐一些系统学习的途径和方法。

路线图

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

html5知识

css基础知识


其中，使用了`PhantomJS`作为无头浏览器测试环境。`PhantomJS`具体作用是什么呢？本篇博文带你一探究竟。


### 二、PhantomJS



> 
> PhantomJS is a headless WebKit scriptable with a JavaScript API.
> 
> 
> 


`PhantomJS`是一个基于`webkit`的`javaScript API`。它使用`QtWebKit`作为核心浏览器的功能，使用`webkit`来编译解释执行`javaScript`代码。任何可以基于在`webkit`浏览器做的事情，它都能做到。


它不仅是个隐性无头浏览器，提供了诸如css选择器、支持web标准、DOM操作、json、HTML5等，且同时也提供了处理文件I/O的操作，从而可以向操作系统读写文件等。`phantomJS`的用处可谓非常广泛，诸如**网络监测**、**网页截屏**、无需浏览器的web测试、页面访问自动化等。



> 
> **无头浏览器**：一个完整的浏览器内核,包括js解析引擎,渲染引擎,请求处理等,但是不包括显示和用户交互页面的浏览器。
> 
> 
> 


#### 2.1 PhantomJS 使用场景


`PhantomJS`的适用范围就是无头浏览器的适用范围。通常无头浏览器可以用于页面自动化，网页监控，网络爬虫等：


* **页面自动化测试**：希望自动登陆网站并做一些操作然后检查结果是否正常。
* **网页监控**：希望定期打开页面，检查网站是否能正常加载，加载结果是否符合预期。加载速度如何等。
* **网络爬虫**：获取页面中使用js来下载和渲染信息，或者是获取链接处使用js来跳转后的真实地址。


#### 2.2 PhantomJS 项目实战


##### 2.2.1 环境配置


首先， 下载 [PhantomJS](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)。


![在这里插入图片描述](https://img-blog.csdnimg.cn/8a2251ec7d184bf19b9806c2a6d17bd6.png)


下载完成后，直接解压到桌面。然后找到文件夹`bin`目录下的exe文件的路径。


![在这里插入图片描述](https://img-blog.csdnimg.cn/47c7dc35a93843ffbd2fcef1f486d4cb.png)


复制该路径，找到环境变量中的`path`，然后把刚才复制的路径粘贴，然后确定。


![在这里插入图片描述](https://img-blog.csdnimg.cn/384719f0c65142c4b527a1261bb76e0b.png)  
 最后，打开`phantomjs\bin`文件夹，双击运行`phantomjs.exe`，如出现如下界面，就可以运行JS代码了。


![在这里插入图片描述](https://img-blog.csdnimg.cn/89b78a63d691433b8eac408acaf0e668.png)


##### 2.2.2 Demo: 自动化截图


首先，编写截屏程序。

var webPage = require(‘webpage’);
var page = webPage.create();

page.open(“http://www.baidu.com”, function start(status) {
page.render(‘baidu.jpeg’);
phantom.exit();
});


保存为helloWorld.js，然后我在控制台内输入：

phantomjs.exe helloWorld.js


接下来，解读下上述代码的实现逻辑：

var webPage = require(‘webpage’);
var page = webPage.create();


这一句是告诉`Phantomjs` 我们需要`webpagae`模型，第二句是创建具体使用对象page。目前`Phantom`提供的模型有：


* `webpage`：最重要的模型，包括打开URL，回退，获取正文、标题，发送事件等；
* `child_process`：子进程，在不影响主进程情况下。可以用来输入输出，执行JS等操作；
* `fs`：文件系统，用于写本地文件；
* `system`：系统，接受参数等；
* `webserver`：开放一个端口，搭建一个`Phantom`的服务。

page.open(“http://www.baidu.com”, function start(status) {…});


以上语句是告诉`PhantomJS`我们要打开的页面是<http://www.baidu.com>，并在打开完成后调用`start`回调函数。在所有的`PhantomJS`的对象内，函数都是回调的。

page.render(‘baidu.jpeg’);
phantom.exit();


`render`这个函数是表示将当前页面绘制回来，并保持到baidu.jpeg内。  
 `Phantom.exit()`是退出程序。

#### 总结

*   对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

*   算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈...（最好多刷一刷，不然影响你的工资和成功率????）

*   在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。



*   要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！



![](https://img-blog.csdnimg.cn/img_convert/41a409bca685b4ea0e0aa1a5589c3e09.png)



第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。**如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说**，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。