首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

yahoo主页启示

2012-11-23 
yahoo首页启示关于 yahoo首页优化 的新启示:1.脚本动态加载以往将脚本一股脑放在底部的做法已经 out 了,在

yahoo首页启示

关于 yahoo首页优化 的新启示:


1.脚本动态加载


以往将脚本一股脑放在底部的做法已经 out 了,在页面不载入 javascript 可用的情况下,等待页面 dom 树解析完成后(甚至直接可在body底部开始加载),异步载入功能脚本,可防止浏览器因为fetch,parse,execute脚本而带来的硬直(类似act....),用户可以尽快使用页面。


旧:

?

<body>....<script src='yy'></script><script src='xx'></script></body>

?

改进:

?

<body>....<script >dynamicGetScript('xx','yy',function(){//your action});</script></body>

?

?

随之带来了页面编写的新模式,所有复杂应用以及基础类库后期异步载入激活(页面只静态添加 实现异步加载功能的种子脚本),页面前期尽可能少的引入js功能,并脱离类库使用原生js实现,当然前提是保证页面在javascript禁用下的基本可用性,参见 yahoo首页。

?

//种子文件,实现异步加载<script type="text/javascript" src="http://l.yimg.com/a/combo?arc/yui/yui_0.2.4.js"></script><script type="text/javascript">YUI.namespace("presentation");//基础库以及应用脚本,动态载入列表YUI.presentation.lazyScriptList = ["http://l.yimg.com/a/combo?arc/yui/substitute_0.1.9.js&arc/yui/oop_0.1.10.js&arc/yui/event-custom_0.1.5.js&arc/yui/io-base_0.1.10.js&arc....."];</script>
?

?

?

2.尽早 flush


将页面分成并列的区域块状:

?

<div id="section1"></div><div id="section2"></div><div id="section3"></div>
?

?

区域间进行服务器端flush,如 java 端在前一个区域块中进行

?

out.flush()

?

?再进行对应下一区域块的数据读取操作。


原理:flush 可将已产生内容推送到浏览器端,如果区域块经解析判断已闭合,浏览器可先对区块html内包含的资源文件(css,script,img,flash...)进行下载渲染。

?

?

?

?

热点排行