深入Picturefill源码：架构设计与实现原理

深入Picturefill源码：架构设计与实现原理

本文深入解析Picturefill响应式图片polyfill的核心实现，涵盖picturefill.js模块的架构设计、核心算法流程、插件系统机制、智能图片选择算法以及性能优化策略。通过分析源码中的IIFE模块化封装、候选图片解析、分辨率计算、缓存机制和浏览器兼容性处理，揭示其如何实现跨浏览器的高性能响应式图片解决方案。

核心模块picturefill.js源码解析

Picturefill作为响应式图片的polyfill解决方案，其核心模块picturefill.js承载了完整的逻辑实现。该模块采用模块化设计，通过立即执行函数(IIFE)封装所有功能，避免污染全局命名空间。

模块架构与初始化

picturefill.js采用经典的模块化架构，通过pf命名空间对象暴露所有公共方法：

(function( window, document, undefined ) {
  "use strict";
  var pf = {}; // 核心命名空间对象
  // ... 其他变量定义
})();

模块初始化阶段完成以下关键工作：

• 创建HTML5 picture元素shim（兼容旧版IE）
• 定义核心配置对象和工具函数
• 检测浏览器对srcset、sizes和picture的原生支持
• 设置类型支持检测（JPEG、GIF、PNG、SVG等）

核心算法流程

Picturefill的核心算法遵循清晰的执行流程，通过多个协同工作的函数实现响应式图片选择：

关键方法深度解析

pf.fillImg - 图片填充核心

pf.fillImg方法是处理单个图片元素的核心入口：

pf.fillImg = function(element, options) {
  var imageData;
  var extreme = options.reselect || options.reevaluate;
  
  // 缓存数据初始化
  if ( !element[ pf.ns ] ) {
    element[ pf.ns ] = {};
  }
  imageData = element[ pf.ns ];
  
  // 避免重复评估（性能优化）
  if ( !extreme && imageData.evaled === evalId ) {
    return;
  }
  
  // 解析图片集配置
  if ( !imageData.parsed || options.reevaluate ) {
    pf.parseSets( element, element.parentNode, options );
  }
  
  // 应用最佳候选图片
  if ( !imageData.supported ) {
    applyBestCandidate( element );
  } else {
    imageData.evaled = evalId;
  }
};

pf.parseSets - 配置解析器

该方法负责解析picture和img元素的srcset、sizes配置：

pf.parseSets = function( element, parent, options ) {
  var srcsetAttribute, imageSet, isWDescripor, srcsetParsed;
  var hasPicture = parent && parent.nodeName.toUpperCase() === "PICTURE";
  var imageData = element[ pf.ns ];
  
  // 处理src属性
  if ( imageData.src === undefined || options.src ) {
    imageData.src = getImgAttr.call( element, "src" );
    // ... 设置data-pfsrc属性
  }
  
  // 处理srcset属性
  if ( imageData.srcset === undefined || options.srcset || !pf.supSrcset || element.srcset ) {
    srcsetAttribute = getImgAttr.call( element, "srcset" );
    imageData.srcset = srcsetAttribute;
    srcsetParsed = true;
  }
  
  imageData.sets = [];
  
  // 处理picture元素的source子元素
  if ( hasPicture ) {
    imageData.pic = true;
    getAllSourceElements( parent, imageData.sets );
  }
  
  // 构建图片集配置
  if ( imageData.srcset ) {
    imageSet = {
      srcset: imageData.srcset,
      sizes: getImgAttr.call( element, "sizes" )
    };
    imageData.sets.push( imageSet );
    // ... 处理w描述符逻辑
  }
  
  // 支持性检测
  imageData.supported = !( hasPicture || ( imageSet && !pf.supSrcset ) || (isWDescripor && !pf.supSizes) );
};

applyBestCandidate - 最佳候选选择

该函数实现智能的图片选择算法：

function applyBestCandidate( img ) {
  var srcSetCandidates;
  var matchingSet = pf.getSet( img ); // 获取匹配的图片集
  var evaluated = false;
  
  if ( matchingSet !== "pending" ) {
    evaluated = evalId;
    if ( matchingSet ) {
      srcSetCandidates = pf.setRes( matchingSet ); // 计算分辨率
      pf.applySetCandidate( srcSetCandidates, img ); // 应用最佳候选
    }
  }
  img[ pf.ns ].evaled = evaluated;
}

分辨率计算与候选排序

Picturefill使用复杂的算法计算和选择最佳图片候选：

算法步骤	方法	功能描述
分辨率计算	pf.setRes	根据sizes属性计算每个候选的实际分辨率
候选排序	ascendingSort	按分辨率升序排列候选图片
最佳选择	pf.applySetCandidate	基于设备像素比选择最合适的图片

pf.applySetCandidate = function( candidates, img ) {
  // ... 算法逻辑
  candidates.sort( ascendingSort ); // 按分辨率排序
  
  for ( i = 0; i < length; i++ ) {
    candidate = candidates[ i ];
    if ( candidate.res >= dpr ) {
      // 智能选择逻辑：考虑缓存、带宽节省等因素
      if (chooseLowRes(candidates[ j ].res, candidate.res, dpr, candidates[ j ].cached)) {
        bestCandidate = candidates[ j ]; // 选择较低分辨率节省带宽
      } else {
        bestCandidate = candidate; // 选择匹配分辨率
      }
      break;
    }
  }
  // ... 应用最终选择
};

性能优化策略

Picturefill实现了多项性能优化措施：

1. 缓存机制：使用evalId标识符避免重复计算
2. 记忆函数：memoize工具函数缓存昂贵计算
3. 延迟执行：DOMReady后执行，避免阻塞渲染
4. 智能选择：考虑缓存状态和网络条件选择图片

// 记忆函数实现
var memoize = function(fn) {
  var cache = {};
  return function(input) {
    if ( !(input in cache) ) {
      cache[ input ] = fn(input);
    }
    return cache[ input ];
  };
};

浏览器兼容性处理

模块包含完整的浏览器特性检测和降级方案：

// 特性检测
pf.supSrcset = "srcset" in image;
pf.supSizes = "sizes" in image;
pf.supPicture = !!window.HTMLPictureElement;

// 旧版IE特殊处理
if ( !("srcset" in image) ) {
  // 降级实现逻辑
}

事件处理与响应式更新

Picturefill监听多种事件以实现动态响应：

// 窗口调整大小事件
on( window, "resize", function() {
  pf.fillImgs( { reselect: true } );
});

// 媒体查询变化事件  
on( window, "matchmedia", function() {
  pf.fillImgs( { reevaluate: true } );
});

通过这种架构设计，picturefill.js能够在各种浏览器环境下提供一致的响应式图片体验，同时保持优秀的性能和资源利用率。

插件系统架构与扩展机制

Picturefill的插件系统采用了模块化设计，通过工厂函数模式和依赖注入机制实现高度可扩展的架构。整个插件系统建立在核心的picturefill对象之上，允许开发者在不修改核心代码的情况下扩展功能。

插件注册与初始化机制

Picturefill的插件采用异步加载和初始化模式，通过工厂函数包装器确保插件在核心库加载完成后执行：

(function( factory ) {
    "use strict";
    var interValId;
    var intervalIndex = 0;
    var run = function() {
        if ( window.picturefill ) {
            factory( window.picturefill );
        }
        if (window.picturefill || intervalIndex > 9999) {
            clearInterval(interValId);
        }
        intervalIndex++;
    };
    interValId = setInterval(run, 8);
    run();
}( function( picturefill ) {
    // 插件实现代码
}));

这种设计确保了插件与核心库的加载顺序无关，即使插件先于核心库加载，也能正确初始化。

插件类型与功能分类

Picturefill提供了多种类型的插件，每种插件处理不同的功能需求：

插件名称	功能描述	技术实现
Mutation插件	DOM变化监听与响应式更新	MutationObserver + 降级方案
TypeSupport插件	图像格式支持检测	Canvas检测 + 异步加载测试
Gecko-Picture插件	Firefox特定优化	浏览器特性检测与polyfill
Intrinsic插件	固有尺寸计算	图像元数据解析
Print插件	打印场景优化	媒体查询监听
OldIE插件	旧版IE兼容	条件注释与降级处理

插件接口与扩展点

Picturefill为插件提供了丰富的扩展接口，主要包括：

核心对象扩展点：

var pf = picturefill._; // 获取内部API对象

// 方法重写（Monkey Patching）
var monkeyPatch = function( name, fn ) {
    sup[ name ] = pf[ name ]; // 保存原始方法
    pf[ name ] = fn;          // 替换为新方法
};

// 配置扩展
pf.cfg = {
    algorithm: "",
    uT: false  // 类型支持测试标志
};

事件钩子扩展：

// 运行周期钩子
monkeyPatch( "setupRun", function() {
    pfObserver.disconnect();
    return sup.setupRun.apply( this, arguments );
});

monkeyPatch( "teardownRun", function() {
    var ret = sup.setupRun.apply( this, arguments );
    pfObserver.observe();
    return ret;
});

Mutation插件深度解析

Mutation插件是Picturefill中最复杂的插件之一，它实现了DOM变化的实时监听和响应式更新：

插件通过多种技术实现跨浏览器的DOM监听：

// 现代浏览器使用MutationObserver
if ( MutationObserver && !pf.testMutationEvents ) {
    observer = new MutationObserver( pf.onMutations );
} 
// 降级方案使用DOM事件
else {
    document.addEventListener( "DOMNodeInserted", function( e ) {
        // 处理节点插入
    }, true);
}

类型支持检测机制

TypeSupport插件实现了先进的图像格式检测功能，支持多种现代图像格式：

picturefill.testTypeSupport = function(types, url, width, useCanvas) {
    var canvas = document.createElement("canvas");
    var img = document.createElement("img");
    
    img.onload = function() {
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        // 通过Canvas检测透明度支持
        supports = ctx.getImageData(0, 0, 1, 1).data[3] === 0;
    };
};

支持的图像格式检测包括：

格式类型	检测方法	应用场景
WebP	Canvas像素检测	高压缩比图像
JPEG 2000	Base64测试图像	医学影像等高分辨率
APNG	动画帧检测	动态图像替代GIF
SVG	Feature检测	矢量图形支持

插件配置与自定义

开发者可以通过全局配置对象自定义插件行为：

window.picturefillCFG = {
    algorithm: "saveData", // 资源选择算法
    uT: true,              // 启用类型支持测试
    // 自定义插件配置
    mutation: {
        enabled: true,     // 启用Mutation监听
        throttle: 100      // 事件节流时间
    }
};

插件开发最佳实践

基于Picturefill的插件架构，开发者可以遵循以下模式创建自定义插件：

1. 工厂函数包装：确保插件与核心库的加载顺序无关
2. 依赖注入：通过参数传递获取核心API引用
3. 方法重写：使用monkey patching模式扩展核心功能
4. 配置驱动：通过全局配置对象控制插件行为
5. 降级方案：为不支持新特性的浏览器提供替代实现

// 自定义插件模板
(function( factory ) {
    "use strict";
    // 异步加载处理
}( function( picturefill ) {
    "use strict";
    
    var pf = picturefill._;
    
    // 1. 扩展配置
    pf.cfg.myFeature = true;
    
    // 2. 重写核心方法
    var originalMethod = pf.someMethod;
    pf.someMethod = function() {
        // 前置处理
        var result = originalMethod.apply(this, arguments);
        // 后置处理
        return result;
    };
    
    // 3. 添加新功能
    pf.myNewFeature = function() {
        // 实现新功能
    };
}));

这种插件架构使得Picturefill能够保持核心的轻量性，同时通过插件机制实现功能的无限扩展，为响应式图像处理提供了强大而灵活的基础设施。

响应式图片选择算法实现

Picturefill的核心价值在于其智能的图片选择算法，该算法能够根据设备特性、网络条件和用户偏好，从多个候选图片中选择最合适的版本。这一算法的实现涉及多个关键组件，包括候选图片解析、分辨率计算、排序策略和智能选择逻辑。

算法架构概览

Picturefill的选择算法采用分层架构，主要包含以下几个核心模块：

候选图片解析与处理

Picturefill首先需要解析srcset属性中的候选图片信息。parseSrcset函数负责将字符串格式的候选列表转换为结构化的数据对象：

function parseSrcset(input, set) {
    var candidates = [];
    // 解析逻辑...
    return candidates;
}

每个候选对象包含以下关键属性：

• url: 图片资源路径
• w: 宽度描述符（如480w）
• d: 密度描述符（如2x）
• h: 高度描述符（未来兼容）
• set: 所属的图片集合

分辨率计算机制

setResolution函数负责计算每个候选图片的实际分辨率值，这是选择算法的核心计算环节：

var setResolution = function(candidate, sizesattr) {
    if (candidate.w) {
        candidate.cWidth = pf.calcListLength(sizesattr || "100vw");
        candidate.res = candidate.w / candidate.cWidth;
    } else {
        candidate.res = candidate.d;
    }
    return candidate;
};

其中calcListLength函数处理sizes属性的复杂计算，支持媒体查询和CSS计算：

pf.calcListLength = function(sourceSizeListStr) {
    // 处理如"(max-width: 30em) 100vw, 50vw"的复杂表达式
    var winningLength = pf.calcLength(parseSizes(sourceSizeListStr));
    return !winningLength ? units.width : winningLength;
};

候选排序策略

所有候选图片按照分辨率进行升序排序，为后续选择算法做准备：

function ascendingSort(a, b) {
    return a.res - b.res;
}

// 在applySetCandidate中使用
candidates.sort(ascendingSort);

智能选择算法

applySetCandidate函数实现了核心的选择逻辑，综合考虑多个因素：

pf.applySetCandidate = function(candidates, img) {
    var bestCandidate, dpr = pf.DPR;
    
    // 检查当前已加载的图片
    if (curCan && curCan.set === candidates[0].set) {
        // 带宽优化：如果图片未完成加载且分辨率过高，考虑中止
        abortCurSrc = (supportAbort && !img.complete && curCan.res - 0.1 > dpr);
        
        if (!abortCurSrc && curCan.res >= dpr) {
            bestCandidate = curCan;
        }
    }
    
    // 如果没有合适的当前候选，从排序列表中查找
    if (!bestCandidate) {
        for (var i = 0; i < candidates.length; i++) {
            if (candidates[i].res >= dpr) {
                // 使用chooseLowRes算法进行智能选择
                if (chooseLowRes(candidates[i-1].res, candidates[i].res, dpr, candidates[i-1].cached)) {
                    bestCandidate = candidates[i-1];
                } else {
                    bestCandidate = candidates[i];
                }
                break;
            }
        }
        // 如果没有找到≥DPR的候选，选择最大的一个
        if (!bestCandidate) {
            bestCandidate = candidates[candidates.length - 1];
        }
    }
    
    return bestCandidate;
};

chooseLowRes智能决策算法

chooseLowRes函数实现了基于密度和缓存状态的智能决策逻辑：

function chooseLowRes(lowerValue, higherValue, dprValue, isCached) {
    var meanDensity;
    
    if (cfg.algorithm === "saveData") {
        // 节省数据模式下的特殊算法
        if (lowerValue > 2.7) {
            meanDensity = dprValue + 1;
        } else {
            var tooMuch = higherValue - dprValue;
            var bonusFactor = Math.pow(lowerValue - 0.6, 1.5);
            var bonus = tooMuch * bonusFactor;
            
            if (isCached) {
                bonus += 0.1 * bonusFactor; // 缓存奖励
            }
            
            meanDensity = lowerValue + bonus;
        }
    } else {
        // 默认算法：几何平均数或直接选择
        meanDensity = (dprValue > 1) ? 
            Math.sqrt(lowerValue * higherValue) : 
            lowerValue;
    }
    
    return meanDensity > dprValue;
}

算法决策流程

Picturefill的选择算法遵循一个清晰的决策流程：

性能优化策略

Picturefill在算法实现中采用了多项性能优化措施：

1. 缓存机制：对计算结果进行缓存，避免重复计算
2. 惰性加载：仅在需要时重新计算和选择
3. 带宽优化：支持中止过高分辨率的图片加载
4. 内存管理：合理管理候选对象生命周期

算法特性总结

Picturefill的响应式图片选择算法具有以下显著特性：

特性	描述	实现机制
设备适配	根据DPR自动选择合适图片	devicePixelRatio检测
网络优化	节省数据模式	chooseLowRes特殊算法
缓存感知	优先使用已缓存图片	cached属性检测
渐进增强	支持多种描述符格式	w, x, h描述符解析
性能优先	最小化计算开销	记忆化缓存和惰性计算

该算法不仅严格遵循W3C标准规范，还在此基础上进行了实用性的扩展和优化，确保了在各种网络环境和设备条件下都能提供最佳的用户体验。

性能优化与浏览器兼容性处理

Picturefill作为响应式图片的polyfill解决方案，在性能优化和浏览器兼容性处理方面采用了多种精妙的技术策略。通过深入分析源码，我们可以发现其在资源加载、执行效率、以及跨浏览器支持等方面的精心设计。

智能资源加载控制

Picturefill实现了智能的图像加载中止机制，避免不必要的带宽浪费。核心的加载控制逻辑如下：

// 检测浏览器是否支持中止图像加载
var supportAbort = (/rident/).test(ua) || ((/ecko/).test(ua) && 
                  ua.match(/rv\:(\d+)/) && RegExp.$1 > 35);

// 在适当条件下中止当前图片加载
abortCurSrc = (supportAbort && !img.complete && curCan.res - 0.1 > dpr);

if (!abortCurSrc) {
    // 正常加载流程
    setImgAttr.call(img, "src", candidate.url);
}

这种机制确保在高DPI设备上，当检测到当前候选图片的分辨率远高于实际需求时（超过设备像素比的10%），会尝试中止加载过程，转而选择更合适的图片资源。

浏览器兼容性分层处理

Picturefill采用了分层的浏览器兼容性处理策略，针对不同浏览器特性提供相应的降级方案：

1. 老旧IE浏览器支持

// 为不支持querySelector的老旧浏览器提供jQuery回退
if (!document.querySelector) {
    pf.qsa = function(context, sel) {
        return jQuery(sel, context);
    };
}

2. 特性检测与渐进增强

高效的缓存机制

Picturefill实现了多层次的缓存系统来提升性能：

CSS计算缓存

var cssCache = {};
var evalCSS = (function() {
    return function(css, length) {
        if (!(css in cssCache)) {
            // 计算并缓存结果
            cssCache[css] = new Function("e", buildStr(css))(units);
        }
        return cssCache[css];
    };
})();

尺寸长度缓存

var sizeLengthCache = {};
pf.calcListLength = function(sizeList) {
    if (sizeList in sizeLengthCache) {
        return sizeLengthCache[sizeList];
    }
    // 计算并缓存尺寸长度
    var length = /* 计算逻辑 */;
    sizeLengthCache[sizeList] = length;
    return length;
};

图片格式支持检测

Picturefill通过异步检测机制来确定浏览器对特定图片格式的支持情况：

function detectTypeSupport(type, typeUri) {
    var image = new window.Image();
    image.onerror = function() {
        types[type] = false;
        picturefill(); // 重新执行以应用新的支持信息
    };
    image.onload = function() {
        types[type] = image.width === 1;
        picturefill();
    };
    image.src = typeUri;
    return "pending";
}

执行优化策略

1. 防抖处理

Picturefill在窗口调整等频繁触发的事件中使用防抖机制：

function debounce(func, wait) {
    var timeout, timestamp;
    var later = function() {
        var last = Date.now() - timestamp;
        if (last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;
            func();
        }
    };
    return function() {
        timestamp = Date.now();
        if (!timeout) {
            timeout = setTimeout(later, wait);
        }
    };
}

2. 批量处理元素

通过一次性处理多个元素来减少重排和重绘：

picturefill = function(opt) {
    var elements = options.elements || pf.qsa((options.context || document), pf.sel);
    var plen = elements.length;
    
    if (plen) {
        pf.setupRun(options);
        for (var i = 0; i < plen; i++) {
            pf.fillImg(elements[i], options);
        }
        pf.teardownRun(options);
    }
};

浏览器特定问题处理

Picturefill针对特定浏览器的已知问题提供了专门的解决方案：

浏览器	问题描述	解决方案
Firefox 38-39	Picture元素解析bug	使用特定的workaround
老旧IE	不支持HTML5元素	使用document.createElement创建picture元素
移动浏览器	双击缩放问题	使用适当的viewport meta标签建议

性能监控与调试

开发模式下，Picturefill提供了详细的警告信息帮助开发者识别问题：

warn = (window.console && console.warn) ?
    function(message) {
        console.warn(message);
    } :
    noop;

这种分层式的性能优化和兼容性处理策略，使得Picturefill能够在各种浏览器环境中提供一致的用户体验，同时最大限度地减少性能开销。通过智能的资源加载控制、高效的缓存机制、以及针对性的浏览器问题处理，Picturefill成功实现了响应式图片的跨浏览器支持，为web开发者提供了可靠的解决方案。

总结

Picturefill通过精心的架构设计和多重优化策略，提供了完整的响应式图片polyfill解决方案。其核心价值在于智能的图片选择算法、高效的插件系统、多层缓存机制和全面的浏览器兼容性处理。从模块化设计到性能优化，从算法实现到跨浏览器支持，Picturefill展现了高质量JavaScript库的设计理念和实现技巧，为Web开发者在不同浏览器环境下提供一致的响应式图片体验。