页面性能优化之内容加载优化（转）
图片按需加载
现在大部分门户或电子商务网站的产品列表页,都比较长,且图片较多,如果全部加载,通常会耗费较多时间,而且有数据表明长时间的等待页面响应会流失大部分的用户,
所以此时我们就可以考虑只加载第一屏的内容,第一屏内容以外的图片按需加载,用户滚动到该屏时再加载(包括tab切换也可以考虑未显示的区域图片不加载),这样用户在不进行任何操作时,加载页面会很快.
看下面的简单demo:
提示：你可以先修改部分代码再运行。
点运行可查看结果,这里测试代码略显粗糙,其实可以利用JQuery好好的用插件形式封装一下,比如可以判断img是否有src属性,没有再执行赋值操作,避免重要赋值,以及setTimeout的使用可以避免滚动过程中大量scroll事件引起性能损耗.
页面DOM结构按需渲染
按需渲染与按需加载不同, 按需渲染是指DOM结构在浏览器的呈现过程, 这无关网络, 是浏览器构建盒模型,渲染页面的过程,
一个页面通常内容有轻有重,有时候我们会希望最先呈现给用户的是一些重要信息, 这个一方面可以在页面结构上做一些小技巧, 像经典的负边距三列布局,就可以让中间重要内容列,在代码上首先呈现,
另一方面则可以通过把次要内容放置于textarea中并且隐藏它,此时页面会加载相关文本,但不会渲染页面DOM结构,等到需要呈现的时候,再把textarea中的内容赋给相应的容器,再进行渲染..
看下面的代码:
提示：你可以先修改部分代码再运行。
以上代码可以看到实现原理很简单,次要内容在代码上置前,如果不做处理,是会比重要内容先呈现的,此时就先放置于textarea中,需要时再加入到页面渲染.
sprites图片预加载
现在大部分页面上都会使用sprites图片技术, 因sprites图片一般较小, 且对页面显示完整较重要, 可考虑在页面开始时就预加载进sprites图片, 像下面这段代码即可:
var img =newImage();
img.src ="sprites.png";
这样即可达到预加载的效果,也可以在任何你认为需要的地方进行预加载.
script及css的预加载
因为浏览器会缓存外部JS及CSS文件 ，所以script与css文件同样可以进行预加载,
很多门户首页或流量大的页面,为了节省http请求数,常常会把JS及css直接写在页面上, 但子页一般是使用外调的CSS及JS文件,此时就可以考虑在首页加载完毕时, 在用户空闲时,在后台加载子页所需要的CSS及JS文件即可,同时又不影响用户操作，可以使用setTimeout动态加载外部JS及CSS.
动态加载外调 js及CSS可参考 这个Der微型库,提供的方法，用法也很简单:
//加载js带回调
Der.loadScript("http://www.ueder.net/derjs/Der.js",function(){
//这里是加载完毕的回调函数
});
//加载CSS
Der.loadCss("http://www.ueder.net/wp-content/themes/DerStyle/style.css");
预加载与按需加载(或延迟加载)似乎听起来矛盾, 事实上并不冲突, 根据用户体验可以适当的选择预加载或按需加载.
