专栏首页Puppeteer学习超越Ctrl+S保存页面所有资源
原创

超越Ctrl+S保存页面所有资源

如何抓取页面所有内容

基本需求

抓取页面所有内容主要包括一下内容:

  1. 页面内元素

页面元素包含服务端直接返回的元素,动态构建的元素

  1. 页面内所有资源

页面所有资源包含本页面所在域资源以及第三方域资源,同主域的资源也认为第三方域资源,这种资源一般是以绝对路径的方式标识,同域下资源主要有三种表现方式 (以https://www.baidu.com举例)

a). 相对路径

<image src="./image/logo.png" />

b). 绝对路径

<image src="https://www.baidu.com/image/logo.png" />

c). 绝对路径2

<image src="//www.baidu.com/image/logo.png" />

这种表示方式会自动根据浏览器打开该页面的协议请求时加入协议(protocol),本地保存后,基于file协议打开同样会加入file:前缀。

当前实现方案

基本流程

  1. 服务端http get 页面
  2. 根据服务端响应的html,遍历需要加载的其它资源,比如javascript、image、css、font、media等资源
  3. 处理html、javascript、css 等文件,进行资源路径替换,保证页面本地化后能正常打开

不足之处

  1. http get 只能拿到原始内容,需要依赖后期再浏览器中加载之后的再渲染(比如依赖本地化的js再次请求数据进行页面构建 或者 直接生成dom进行页面构建)
  2. 请求后得到的资源文件依赖原本相对路径,如果处理有较高的技术难度,比如使用AMD、CMD等模式加载的文件。由于当前方案抓取资源时对当前资源目录层次全部铺平了(纵向目录已经不存在了,相对路径也会变化),所以需要动态修改(拿应用了AMD加载模式的页面举例)require.config.js 文件的内容,否则会导致页面js 无法正常加载,页面无法正常渲染。
  3. 对非html页面直接获取的资源,获取的难度较大,这种非html页面直接获取的资源包括,css 文件中引入的字体资源文件以及图片资源文件,js资源文件中引入的资源文件,比如上述2 中描述的AMD、CMD模式实现的按需加载。

新的实现方案

puppeteer是操作chromnium的上层node api,当浏览器打开一个页面是,可以简单理解细分为如下过程:

  1. 通知浏览器发起请求
  2. 浏览器发起请求
  3. 浏览器获取响应内容
  4. 浏览器把响应内容交给上层渲染引擎
  5. 渲染引擎处理

在整个过程中,puppeteer提供了一种机制让我们有机会拦截到2和3这两个阶段,基于这点,我们可以做更多的事情,比如我们可以拦截页面的所有请求,可以截获所有的响应,而不用关注请求的去向,因为只要请求发出去了,就能受我们的控制,另外,由于是使用浏览器本身,所以跟直接http get 页面最大的区别在于前者是渲染后的,后者是原始的,前者对SPA或者依靠脚本构建的应用比较友好。

使用puppeteer实现完全能处理原始方案的不足,新的实现思路如下:

  1. 拦截所有网络请求,对资源请求以及构建dom相关请求进行处理
  2. 对同域名下资源进行相对路径处理,在本地创建对应的相对路径
  3. 对不同域名下资源(第三方资源)以第三方域名为名建立新的目录,用来存储第三方资源
  4. 资源处理,处理html资源,css资源以及javascript文件中绝对路径为相对路径(这里绝对路径是指直接引入的cdn等模式路径,相对路径是指对cdn域名本地化目录后的路径)

核心代码说明

基于上述新的方案,实现的核心代码如下,代码中加入了详细的注释,不再做过多解释,有疑问欢迎留言讨论

const puppeteer = require('puppeteer');
const URL = require('url');
const md5 = require('md5');
const fs = require('fs');
const util = require('util');
const path = require('path');
const shell = require('shelljs');

//资源保存目录
const BASEDIR = './asserts/';

const start = async () => {

    //初始化删除清理资源目录,仅测试阶段,因为当前目录为时间戳生成
    shell.exec('rm -rf asserts/');
    //因为所有网络请求都会拦截,处理请求和页面资源以及dom构建无关可忽略
    //下面的域名是比较常见的前端采集域名 (有很多没有列出来的)
    const blackList = [
        'collect.ptengine.cn', 
        'collect.ptengine.jp',
        'js.ptengine.cn',
        'js.ptengine.jp',
        'hm.baidu.com',
        'api.growingio.com',
        'www.google-analytics.com',
        'script.hotjar.com',
        'vars.hotjar.com'
    ];
    //用来缓存第三方资源(包括css、javascript),在请求没有结束之前,无法获取完整的第三方资源列,无法保证css、javascript中内容替换完整,所以先缓存,请求结束后再统一替换
    const resourceBufferMap = new Map();
    //第三方资源服务(域名)列表
    const thirdPartyList = {};
    try {
        const browser = await puppeteer.launch();

        const page = await browser.newPage();
        //启用请求拦截
        await page.setRequestInterception(true);
       //以博客园为例子进行页面抓取
        let url = "https://www.cnblogs.com"
        let docUrl = URL.parse(url);
        //获取请求地址的域名,用来确定资源是否来自第三方
        let originUrl = (docUrl.protocol + "//" + docUrl.hostname)
        //@fixme 每次抓取生成的内容目录名称
        let md5_prefix = md5(Date.now());

        page.on('request', async (req) => {
            const whitelist = ['image', 'script', 'stylesheet', 'document', 'font'];
            //如果请求的是第三方域名,只考虑和页面构建相关的资源
            if (req.url().indexOf(originUrl) == -1 && !whitelist.includes(req.resourceType())) {
                return req.abort();

            }
            //采集黑名单中的内容不处理
            if (blackList.indexOf(URL.parse(req.url()).host) != -1) {
                return req.abort();
            }
            req.continue();


        });

        page.on('response', async res => {
            let request = res.request(),
                resourceUrl = request.url(),
                urlObj = URL.parse(resourceUrl),
                filePath = urlObj.pathname, //文件路径
                dirPath = path.dirname(filePath), //目录路径
                requestMethod = request.method().toUpperCase(), //请求方法
                isSameOrigin = resourceUrl.includes(originUrl); //是否是同域名请求

            //只考虑get请求资源,其它http verb 对文件资源请求较少
            if (requestMethod === 'GET') {
                //如果是同一个域名下的资源,则直接构建目录,下载文件
                //创建路径的方式依据请求本身path结构,保证和原资源网站目录结构完整统一,这样即使有CMD、AMD规范的代码再次执行,require相对路径也不会出现问题。
                let dirPathCreatedIfNotExists,
                    filePathCreatedIfNotExists;

                let hostname = urlObj.hostname;

                if (isSameOrigin) {
                    //构建同域名path
                    //同域名的资源 有时会以//www.xxx.com/images/logo.png 这种方式使用,所以,对这种资源需要特殊处理
                    thirdPartyList[`//${hostname}`] = '';
                    dirPathCreatedIfNotExists = path.join(BASEDIR, md5_prefix, dirPath);
                    filePathCreatedIfNotExists = path.join(BASEDIR, md5_prefix, filePath);
                } else {
                    //第三方资源构建正则表达式,替换http、https、// 三种模式路径为本地目录路径
                    thirdPartyList[`(https?:)?//${hostname}`] = `/${hostname}`;
                    dirPathCreatedIfNotExists = path.join(BASEDIR, md5_prefix, hostname, dirPath);
                    filePathCreatedIfNotExists = path.join(BASEDIR, md5_prefix, hostname, filePath);
                }
                //获取扩展名 如果获取不到 则认为不是资源文件
                if (path.extname(filePathCreatedIfNotExists)) {
                    //路径不存在,直接创建多级目录
                    if (!fs.existsSync(dirPathCreatedIfNotExists)) {
                        shell.exec(`mkdir -p ${dirPathCreatedIfNotExists}`);
                        console.log('create dir');
                    }
                    if (res.ok()) {
                        if ((isSameOrigin && dirPath != '/') || !isSameOrigin) {
                            let needReplace = ['stylesheet', 'script'];
                            //@fixme toString 可能会有编码问题
                            let fileContent = (await res.buffer()).toString();
                            //第三方域名还获取,先缓存再处理
                            if (needReplace.includes(request.resourceType())) {
                                //js css 文件中可能包含需要替换的内容,需要处理
                                //所以暂时缓存不写入文件
                                resourceBufferMap.set(filePathCreatedIfNotExists, fileContent);
                            } else {

                                fs.writeFileSync(filePathCreatedIfNotExists, await res.buffer());
                            }
                        }
                    }
                }

            }

        });

        await page.goto(url, {
            waitUntil: 'networkidle0'
        });

        let content = await page.content();

        //对css javascript文件 进行替换处理
        resourceBufferMap.forEach((value, key) => {
            value = applyReplace(value, thirdPartyList);
            fs.writeFileSync(key, value);
        })

        // html 内容处理
        content = applyReplace(content, thirdPartyList);

        fs.writeFileSync(`./asserts/${md5_prefix}/index.html`, content);

        await page.close();
        await browser.close();
    } catch (error) {
        console.log(error);
    }


}

function applyReplace(origin, regList) {
    for (let prop in regList) {
        //进行正则全局替换
        let reg = new RegExp(prop, 'g')
        origin = origin.replace(reg, regList[prop]);
    }
    return origin;
}


start();

总结

上述方案能解决几乎所有原始方案无法解决的问题,但是也并非十全十美,首选,相比原始方案,增加了渲染的步骤,所以性能有所下降;其次如果用户网站比较特殊,比如https://www.xxx.com/admin 这个路径下资源,比如某css文件中有如下写法:'background:url('./xxx.bg.png')' ,这时路径会找不到,因为在资源路径替换阶段,会替换为hostname,即查找资源是会去根目录去找,导致路径not found,不过这有其它改进的方案,比如可以把同域名的路径做的更灵活一点,可以让接口消费者修改。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于puppeteer的网络拦截工具flyover

    我们知道所有请求,无论是页面请求还是js 发起的各种请求,最终都是通过浏览器软件发起的,服务器响应后,都是响应给浏览器的,那么整个工程可以细分为如下流程(个人理...

    Jerremy
  • 实现node端渲染图表的简单方案

    这个题目有点小,本篇博客真正谈论的应该是服务端生成图表的简单方案,这里面有两个关键字:服务端 & 简单,我们知道基于js有很多的图表库,知名的如D3、echa...

    Jerremy
  • 基于puppeteer模拟登录抓取页面

    在网站分析行业中,网站热图能够很好的反应用户在网站的操作行为,具体分析用户的喜好,对网站进行针对性的优化,一个热图的例子(来源于ptengine)

    Jerremy
  • 小型ERP调研:云端转型已成必然 快慢将决定谁最后胜出

    实施服务 移动信息化研究中心发现,在实施服务方面,小型ERP的实施并没有大中型ERP那样繁琐,由于产品较为简单小巧,实施比较快捷,用户对于实施质量表示没有太...

    人称T客
  • chromeF12 谷歌开发者工具详解 Network篇

    这篇文章主要为刚刚接触前端、javaee、php等内容的萌新设计们,对于我本人也是一个对于开发者工具中Network模块使用的一点心得和总结

    前端博客 : alili.tech
  • Android LiveData 使用详解

    本次推出 Android Architecture Components 系列文章,目前写好了四篇,主要是关于 lifecycle,livedata 的使用和...

    用户2965908
  • 10年架构师呕心沥血总结:“道”与架构之间的微妙关系

    以上的问题只是一小部分,问题的答案没有标准,问题的提出,是为了让我们能够从本源出发,认识自己。

    李红
  • 2017年ERP系统华山论剑 谁将入围10强榜?

    T客汇官网:tikehui 撰文 | 卿云 Panorama推出了2017年度十大ERP系统排名报告。根据市场份额,实施成本,实施持续时间,效益实现和软件功能制...

    人称T客
  • MVC 3.0 的新特性 摘要

    MVC经过其1.0和2.0版本的发展,现在已经到了3.0的领军时代,随着技术的不断改进,MVC也越来越成熟。使开发也变得简洁人性化艺术化。

    Isaac Zhang
  • 30分钟学会pyecharts数据可视化

    小明:Echarts 是一个由百度开源的数据可视化javascript库,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可。而 Python 是一门富...

    lyhue1991

扫码关注云+社区

领取腾讯云代金券