如何抓取页面所有内容

基本需求

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

页面内元素

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

页面内所有资源

页面所有资源包含本页面所在域资源以及第三方域资源，同主域的资源也认为第三方域资源，这种资源一般是以绝对路径的方式标识，同域下资源主要有三种表现方式（以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:前缀。

当前实现方案

基本流程

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

不足之处

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

新的实现方案

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

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

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

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

拦截所有网络请求，对资源请求以及构建dom相关请求进行处理
对同域名下资源进行相对路径处理，在本地创建对应的相对路径
对不同域名下资源（第三方资源）以第三方域名为名建立新的目录，用来存储第三方资源
资源处理，处理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，不过这有其它改进的方案，比如可以把同域名的路径做的更灵活一点，可以让接口消费者修改。

秒客网

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