静态资源加载失败导致的问题

静态资源加载失败的时候，会有哪些问题会出现呢。资源加载失败会直接造成白屏、页面渲染不全、页面卡死、样式错乱、图片无法显示等等。而且这些都是很难复现的错误，那么这时候就会有小伙伴得意地说 “你不能复现，我就无法解决啊”，留下测试的小伙伴在那里一脸懵逼。嗯，真是甩的一口好锅，当然，这也不一定就是你的锅。

资源加载失败的问题解决难度大

静态资源加载错误，对有些前端小伙伴来说可能还是有些陌生的。因为这个问题大部分出现在线上环境，本地环境也会出现，只不过你的网络一般比较好，没事再来个强制刷新，基本上就解决了。所以你可能不会注意到这个问题。它不易发生，也不易发现，一旦发生，页面应该就直接歇菜了。由于这种问题经常发生在生产环境，很难被大家注意到，被发现了之后也不容易复现，所以无形中就增加了它的解决难度

资源加载失败的情况有哪些

举一个比较常见的例子：大家应该都用过Jquery.js（下面简称Jq），他们的官网上也提供了一个CDN的地址，专门供用户使用的。可是用过的小伙伴应该都知道，加了他们的CDN以后，整个项目都不好了，慢，但是慢得很特别，也就是特别的慢 。为啥啊？因为你既然是基于Jq，那你就得等人家加载完啊，要是你的网络再差点，就有可能出现静态资源加载失败的情况，那么你的页面基本上就很难呈现给用户了，我相信用过的小伙伴都会有过这种感觉。

还有一些比较常见的问题：比如阿里云的CDN、微信的SDK、等等一些依赖第三方js的情况下都会出现。什么？你没遇到过？你没监控过，又怎么会遇到呢。

本文由 www.webfunny.cn 前端监控提供；只需要简单几步就可以搭建一套属于自己的前端监控系统，快来试试吧（记得收藏哦）。

哈哈，扯了这么多，进入正题吧，先看看我们监控的效果。

虽然静态资源加载失败的时候会造成如此严重的问题，但是我们却没有一个特别好用的API来帮我们捕获这种错误，手动表示一下无奈。 ╮(╯▽╰)╭

方法一：Object.onerror定义指定对象资源加载错误时的回调函数，说实话，不好用，因为太麻烦了。

方法二：利用 performance.getEntries()方法，获取到所有加载成功的资源列表，在onload事件中遍历出所有页面资源集合，利用排除法，到所有集合中过滤掉成功的资源列表，即为加载失败的资源。 此方法看似合理，也确实能够排查出加载失败的静态资源，但是检查的时机很难掌握，另外，如果遇到异步加载的javascript（下面简称js）文件也就歇菜了，不好用。

方法三：通过window.addEventListener来实现，这个方法会监控到很多的error, 所以我们要从中筛选出静态资源加载报错的error, 代码如下：

window.addEventListener('error',function(e){  
  // 你的逻辑代码 
}, true);

了解线上项目的报错趋势

首先，我们需要有个报错趋势总览的功能，报错趋势图中添加了对7天前，同一时间段的数据做了对比，可以作为参考。另外，我们还需要一个警报系统，这样，我们就能够实时掌握线上项目的健康状况了。最后，我加了评分功能，辅助我们对项目健康状况的判断。

静态资源加载失败的分类聚合

其实静态资源析到这里，基本上也就完结了。因为静态资源加载不出来一般都是第三方，运营商和网络的问题，这些都是非我们力所能及的因素，失败就是失败，没必要分析个所以然出来了。

解决方案

如果是第三方服务商（比如CDN），那你需要想个办法在两个CDN之间做灵活切换，或者加上你们自己的服务器做三方切换，提高容错率。

如果是网络问题，就只能提示用户去网络好点的地方了，既然能监控，那提示的时机也就容易掌握了。

如果是运营商的问题，(⊙o⊙)…，啊... 嗯...

OM to Image

dom-to-image是一个js库，可以将任意dom节点转换为矢量(SVG)或光栅(PNG或JPEG)图像。

安装

npm install dom-to-image -S

加载

/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage = require('dom-to-image');

用法

所有高阶函数都接受DOM节点和渲染选项options ，并返回promises。

1. 获取PNG图像base64编码的data URL：

<div id="my-node"></div>

var node = document.getElementById('my-node');
// options 可不传
var options = {}  
domtoimage.toPng(node, options)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

2. 获取图像blob：

domtoimage.toBlob(document.getElementById('my-node'))
    .then(function (blob) { 
        console.log('blob', blob)
    });

3. 获取JPEG图像base64编码的data URL并下载：

domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'my-image-name.jpeg';
        link.href = dataUrl;
        link.click();
});

4. 获取SVGdata URL，但筛选出所有元素：

function filter (node) {
    return (node.tagName !== 'i');
}
 
domtoimage.toSvg(document.getElementById('my-node'), {filter: filter})
    .then(function (dataUrl) {
        /* do something */
});

5. 以uint8数组的形式获取原始像素数据，每4个数组元素表示一个像素的RGBA数据：

var node = document.getElementById('my-node');
 
domtoimage.toPixelData(node)
    .then(function (pixels) {
        for (var y = 0; y < node.scrollHeight; ++y) {
          for (var x = 0; x < node.scrollWidth; ++x) {
            pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
            /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
            pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
          }
        }
    });

options参数

原理

dom-to-image使用SVG的一个特性，它允许在标记中包含任意HTML内容。

• 递归地克隆原始DOM节点
• 计算节点和每个子节点的样式，并将其复制到相应的克隆 创建伪元素，因为它们不是以任何方式克隆的
• 嵌入web字体 查找所有@font face声明的web字体 解析文件URL，下载相应文件 base64编码的内联作为data：URLs 将所有已处理的CSS放入中，然后将其附加到克隆
• 嵌入图片 在嵌入图片URL 使用backgroundCSS属性的图片，方法类似于字体
• 将克隆的节点序列化为XML
• 将XML包装到标记中，然后包装到SVG中，然后使其成为data URL
• 或者，要以Uint8Array的形式获取PNG内容或原始像素数据，可以创建一个以SVG为源的图像元素，并将其呈现在已经创建的canvas上，从canvas读取内容

部分源码分析

dom-to-image.js

// Default impl options
var defaultOptions = {
    // Default is to fail on error, no placeholder
    imagePlaceholder: undefined,
    // Default cache bust is false, it will use the cache
    cacheBust: false
};

var domtoimage = {
    toSvg: toSvg,
    toPng: toPng,
    toJpeg: toJpeg,
    toBlob: toBlob,
    toPixelData: toPixelData,
    impl: {
        fontFaces: fontFaces,
        images: images,
        util: util,
        inliner: inliner,
        options: {}
    }
};

if (typeof module !== 'undefined')
    module.exports = domtoimage;
else
    global.domtoimage = domtoimage;

• defaultOptions设置默认options选项
• domtoimage的核心api:
• toSvg
• toPng
• toJpeg
• toBlob
• toPixelData
• 例：toJpeg：将draw函数返回的canvas实例，使用canvas的toDataURL方法生成jpeg图片。toSvg函数将递归地克隆原始DOM节点, 将克隆的节点序列化为XML,将XML包装到标记中，然后包装到SVG中，然后使其转成dataURL。

function toJpeg(node, options) {
   options = options || {};
   return draw(node, options)
       .then(function (canvas) {
           return canvas.toDataURL('image/jpeg', options.quality || 1.0);
       });
}
复制代码

function draw(domNode, options) {
    return toSvg(domNode, options)
        .then(util.makeImage)
        .then(util.delay(100))
        .then(function (image) {
            var canvas = newCanvas(domNode);
            canvas.getContext('2d').drawImage(image, 0, 0);
            return canvas;
        });

    function newCanvas(domNode) {
        var canvas = document.createElement('canvas');
        canvas.width = options.width || util.width(domNode);
        canvas.height = options.height || util.height(domNode);

        if (options.bgcolor) {
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = options.bgcolor;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        return canvas;
    }
}

function toSvg(node, options) {
    options = options || {};
    copyOptions(options);
    return Promise.resolve(node)
        .then(function (node) {
            return cloneNode(node, options.filter, true);
        })
        .then(embedFonts)
        .then(inlineImages)
        .then(applyOptions)
        .then(function (clone) {
            return makeSvgDataUri(clone,
                options.width || util.width(node),
                options.height || util.height(node)
            );
        });

    function applyOptions(clone) {
        if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;

        if (options.width) clone.style.width = options.width + 'px';
        if (options.height) clone.style.height = options.height + 'px';

        if (options.style)
            Object.keys(options.style).forEach(function (property) {
                clone.style[property] = options.style[property];
            });

        return clone;
    }
}

作者：知其
https://juejin.cn/post/6988045156473634852