前端优化——按需加载

滚动加载

        很多大型网站都采用了这一技术，例如日访问量很高的新浪微博，当滚动到页面底端的时候会自动加载新的页面，分段加载可减轻服务器的压力，边浏览边加载，节省线性时间减少等待。

首先，记录所有需要滚动加载对象的纵坐标值到一个数组。然后使用JS的监听方法（IE是attachEvent，其他浏览器是 addEventListener），监听页面的scroll事件。当需要加载的对象处于浏览器的当前一屏内，浏览器将发起加载请求；否则继续监听。当页面内的所有对象都被加载后，取消监听。

点击加载

        常见的点击加载有选项卡、翻页、展开、下拉等形式。之前的做法一般是把暂时不想给用户看到的东西写入页面，然后用CSS处理隐藏。假如用户没有去切换那些暂时隐藏的内容把他们显示出来，毫无疑问我们就浪费了这些流量。

延时加载

        常见的图片轮播广告等一组有加载时间间隔的资源，按照其前后出现的顺序，在时间间隔后即时加载下一个资源。

        以往轮播广告的加载模式是一次性全部加载，虽然采用延迟加载，但用户可能不会浏览到所有的轮播广告。当用户在首页只停留5秒时（例如轮播广告设置的是5秒切换一次），第二张广告图片以后的图片加载就没有必要了。

        可以试试下面的做法：第一次加载第一张广告图片，当5秒后，判断第二张图片是否加载过，如果没有，加载第二张图片，以此类推。判断的方式很简单，我们只要在初期生成轮播广告结构的时候，不设置img的src属性，然后加载时判断这张图片是否有src属性，如果没有，加载图片并设置这个属性。

模糊加载

       对于图片等大文件，可以考虑先加载图片的低像素低画质版本，等到用户感兴趣时候再通过点击事件请求加载高清的图片，节省加载流量的同时也提高用户体验。例如新浪微博目前的做法。