图片懒加载

图片按需加载

当用户触发了某项动作才加载对应的功能。比如图片的按需加载，图片默认开始不加载，等接近可视区域范围时再进行加载，俗称懒加载，图片一下子全加载，那请求数必然超级多，肯定会影响性能。当滚动条拉动到某个位置时，即将进入可视范围的图片需要加载。比如内容按需加载，可以先将html结构放在textarea标签中，当触发的时候把textarea的value赋值给父元素的innerHTML。

    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146548605&di=82eda6cab2ddbe0d5d6737320dd43676&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F9825bc315c6034a8f3286855c113495408237618.jpg" alt="">
    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146548605&di=82eda6cab2ddbe0d5d6737320dd43676&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F9825bc315c6034a8f3286855c113495408237618.jpg" alt="">
    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146548604&di=6874ad4d1014bde4402bb09b85252c83&imgtype=0&src=http%3A%2F%2Fpic76.nipic.com%2Ffile%2F20150828%2F19221099_184215679354_2.jpg" alt="">
    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146548602&di=4bebe1a9fb948c74ae89e756849e0e57&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201411%2F23%2F20141123172456_PBcfv.png" alt="">
    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146508677&di=5d4a38c208c2d9f71fd7af7ff81d1532&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3D88c8f471f9039245a1e0e90bb2a488f4%2F9a504fc2d5628535aedbd09d95ef76c6a7ef6356.jpg" alt="">
    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146548605&di=9f7430465b5f9fe411dc96cbb01aa873&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201408%2F26%2F20140826170014_PttJy.jpeg" alt="">
    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146548605&di=82eda6cab2ddbe0d5d6737320dd43676&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F9825bc315c6034a8f3286855c113495408237618.jpg" alt="">
    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146548605&di=82eda6cab2ddbe0d5d6737320dd43676&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F9825bc315c6034a8f3286855c113495408237618.jpg" alt="">
    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146548604&di=6874ad4d1014bde4402bb09b85252c83&imgtype=0&src=http%3A%2F%2Fpic76.nipic.com%2Ffile%2F20150828%2F19221099_184215679354_2.jpg" alt="">
    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146548602&di=4bebe1a9fb948c74ae89e756849e0e57&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201411%2F23%2F20141123172456_PBcfv.png" alt="">
    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146508677&di=5d4a38c208c2d9f71fd7af7ff81d1532&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3D88c8f471f9039245a1e0e90bb2a488f4%2F9a504fc2d5628535aedbd09d95ef76c6a7ef6356.jpg" alt="">
    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146548605&di=9f7430465b5f9fe411dc96cbb01aa873&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201408%2F26%2F20140826170014_PttJy.jpeg" alt="">
    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146548605&di=82eda6cab2ddbe0d5d6737320dd43676&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F9825bc315c6034a8f3286855c113495408237618.jpg" alt="">
    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146548605&di=82eda6cab2ddbe0d5d6737320dd43676&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F9825bc315c6034a8f3286855c113495408237618.jpg" alt="">
    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146548604&di=6874ad4d1014bde4402bb09b85252c83&imgtype=0&src=http%3A%2F%2Fpic76.nipic.com%2Ffile%2F20150828%2F19221099_184215679354_2.jpg" alt="">
    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146548602&di=4bebe1a9fb948c74ae89e756849e0e57&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201411%2F23%2F20141123172456_PBcfv.png" alt="">
    <img src="xxxx" width="990" height="90" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534146508677&di=5d4a38c208c2d9f71fd7af7ff81d1532&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3D88c8f471f9039245a1e0e90bb2a488f4%2F9a504fc2d5628535aedbd09d95ef76c6a7ef6356.jpg" alt="">

有的面试会让手写图片按需加载的js，就算不会写也一定要把思路告诉面试官：

①获得浏览器的总高度clientHeight（可视高度）+scrollTop（滚动条相对于顶部的高度）

②获得每张图片相对于浏览器顶部的高度getBoundingClientRect().top

③最关键的一点，如何判断这个图片出现在了浏览器的可视窗口内？② < ①

最终简化版（chrome下没问题）：

window.onload = function(){
    var oImg = document.getElementsByTagName('img');
    var imgList = [];
    for(var j=0; j<oImg.length; j++){
        imgList.push(oImg[j]);
    }
    var clientH = document.documentElement.clientHeight;//可视区域高度
    var scrollH = document.documentElement.scrollTop;//滚动条相对于顶部的高度  
    function load(){
        for(var i=0; i<imgList.length; i++){
            var offsetT = imgList[i].getBoundingClientRect().top;
            if(offsetT<(clientH+scrollH)){
                var src = imgList[i].getAttribute('data-src');
                imgList[i].setAttribute('src',src);
                imgList.splice(i,1);
                i--;
            }
        }
    };
    setInterval(load,100);
}

懒加载方式给了我们一个灵感，还有什么其他方式可以优化首屏的加载时间吗？

①代码简洁，能用css的就不用js

②压缩js、css文件

③懒加载，防止页面一打开就立即载入图片，从而占用网络带宽；音乐、视频禁止自动播放

④使用CDN，避开网上有可能影响数据传输速度和稳定性的环节，就像是头顶上一个飞机帮你看着哪条路比较通畅。

⑤css放在页面顶部（节省了重绘资源），js放在底部（避免代码执行前的等待时间）

⑥雪碧图sprites，使用background-position background-repeat进行定位。

⑦GZIP压缩从服务器发过来的html、css、js文件体积。

⑧减少重定向次数，重定向会增加额外的http请求。