本文共 2014 字，大约阅读时间需要 6 分钟。

Web???????????????????????????????????????????????????????????????????????????????80%-90%??????????????????????????????????????????????????????

1. CSS sprites

CSS sprites?????????????????????????????????????????????????????CSS sprites??????????????????????????????????HTTP??????????????

??????????HTML????????????li????????????????????????????????????????????????????????????????????????

ul li.nav_1 { background-position: 0 0; }
ul li.nav_2 { background-position: 0 -63px; }
ul li.nav_3 { background-position: 0 -126px; }
ul li.nav_4 { background-position: 0 -189px; }

ul li { background-image: url(../ec_good_index.png); background-repeat: no-repeat; display: block; background-size: 63px 378px; width: 63px; height: 63px; }

?????????????????????????????????

2. ????

????????data:URL????????????????HTTP????????????lazyload???????????src???data:image/png;base64?????????????????????????????????????

????????????

$.fn.lazyload = function(options) {
    var elements = this;
    var $container;
    var settings = {
        event: "scroll",
        effect: "show",
        data_attribute: "original",
        placeholder: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
    };
    if ($self.is("img")) {
        $self.attr("src", settings.placeholder);
    }
};

??????????????HTTP??????????????

3. ?????CSS

?????????????????????????????????????????????????????????????????????????????????????????????????

????????????

$(function() {
    YUNM.init("/components/common/ec.frag.xml", {
        debug: true,
        callback: function() {
            initEnv();
            doBody();
            doSome();
            doSwiper();
            quickNavigation();
            weixinShare();
        }
    });
});

????CSS??????????????????????

??

??CSS sprites?????????????????????????????????????HTTP??????????????????????????????????????????????????????