游客

标题:web前端优化之动态加载
正文:
网站最近搞了次优化,效果比较明显,以前不敢用的动态加载(我自己起得,洋名叫lazy load,这样翻译应该也算得体,延迟加载也说得过去..)终于派上了用场.总的来说是这样的:页面加载时不会初始化的脚本不引用,不显示的ui用的样式不加载.用户交互用到时加载.除用户可视区域外的图片不加载,用户有滚屏操作时加载.具体实现:1 . 实现js和css的动态加载适用 : 页面的pv较高,功能模块较多,每次刷新页面都需要重复解析和渲染.缺点 : 用户从点击一个按钮到函数响应,中间会有静态的下载和解析的一段延迟(有客户端缓存会好的多)优化 :　为了尽量让用户感觉不到延迟，我们在登录页面预载的一些经常用到的脚本(由于网站的更新周期固定,所以脚本仅会在更新当天预载)实现 :XN.dynamicLoad(
{
files : [’http://s.xnimg.cn/a2328/csspro/module/poke.css’,
’http://s.xnimg.cn/a2252/jspro/xn.app.poke.js’],
funcs : [’doPoke’]
});以上代码是人人网个人主页中的一段代码,用来动态加载打招呼的功能,files注册需要动态加载进来的静态,funcs注册触发加载的函数名.这个东西以前写过一篇不太成熟的文章(如下)2 . 实现图片的动态加载适用 : 现在仅对新鲜事动了刀，因为新鲜事里图片变动太快，客户端缓存率太低．整个页面图片动态加载没有必要，因为很多模块都是固定的，本来客户端就有缓存．缺点 : 这个东东很冒险,上线之后发现ff3.0刷新之后图片全白了,正在优化实现代码…优化 : 既然问题那么多,为了便于维护,仅对ie和ff两种用户比较多的浏览器才用这种方法.实现 :<img needclip="1" width="50" height="50"
lala="upload/2012/3/201203231635148840.jpg"
src="http://camnpr.com/upload/2012/3/201203231635144451.gif" onload="feed_img_delay_load(this);" />以上是人人网home页新鲜事中的一段代码,图片的src=
[<<][[1]][2][3][>>]

查看评论(0)
发表评论



首页