性能优化之 - 按需加载

　　按需加载是网站性能优化立竿见影的其中一项，按需加载可以了解为 当用户触发某个动作的时候，才主动去请求资源，这样带来的优化好处：减少了HTTP请求，节省宽带，让页面首屏的内容更快展现在用户的视线范围内，可见极大提高了用户体检。触发的动作有很多，如鼠标点击，拉动页面滚动条，鼠标经过等等。

 

【一】 图片按需加载　

<img src="伪装的图片" width="990" height="90" data-src="http://dummyimage.com/990x90/333/fff">

　　原理：把图片的真实资源地址存放在标签自定义的属性里面，如 'data-src'，那么src属性就用一张透明的图片占用（1K左右），当触发动作时，交换属性，就可以达到按需加载。常见的交互效果是图片滚动按需加载，可参考我之前所写的插件讲解，进入。

 

【二】内容按需加载

　　（1）利用textarea标签，将你需要按需加载的HTML结构全放到这标签里面，这样页面解析的时候会忽略它们，如图：

<div>
        <textarea id="lazy-a">
            <p>
                <img src="http://dummyimage.com/990x90/259/fff">
                <span>title</span>
            </p>
        </textarea>
</div>

　　谷歌开发工具截图：

　　

　　如上图所示，网络里面没有图片的资源加载。

var target = document.getElementById('lazy-a');
　　target.parentNode.innerHTML = target.value;

　　当触发的时候，将textarea的value赋值给父元素的innerHTML,就达到了按需加载，在太平洋汽车网的滚动效果里面的按需加载就用到此做法，链接：

　　　　你可以把全部的内容都放到textarea标签里面，如 样式，图片，脚本，它们都不会被解析。

 　　（2） script标签的 type="text/html" 有着异曲同工，但常常是用来当js代码片段模板处理，如弹窗框等等　

<script type="text/html" id="j-tips">
        <div class="ui-pop">
            <div class="ui-pop-hd"></div>
            <div class="ui-pop-bd">
                <p class="tips-txt">{tipstxt}</p>
            </div>
        </div>
</script>

 　　（3）调用程序生成的ajax接口，通过触发动作往页面添加内容，如瀑布流布局，点击加载更多等等，如太平洋汽车网的图库，链接，通过滚动触发，请求ajax接口，加载更多的图片资源

 

　　总结：按需是提高网速的重要方法之一，要点就是通过触发动作去加载资源，这些资源很多，如图片，样式，HTML，iframe，flash等等