关于 yahoo首页优化 的新启示：
1.脚本动态加载
以往将脚本一股脑放在底部的做法已经 out 了，在页面不载入 javascript 可用的情况下，等待页面 dom 树解析完成后（甚至直接可在body底部开始加载），异步载入功能脚本，可防止浏览器因为fetch,parse,execute脚本而带来的硬直（类似），用户可以尽快使用页面。
旧：
<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="/yui/yui_0.2.4.js"></script>
<script type="text/javascript">
YUI.namespace("presentation");
//基础库以及应用脚本，动态载入列表
YUI.presentation.lazyScriptList = ["/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&"];
</script>
2.尽早 flush
将页面分成并列的区域块状：
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
区域间进行服务器端flush，如 java 端在前一个区域块中进行
out.flush()
再进行对应下一区域块的数据读取操作。
原理：flush 可将已产生内容推送到浏览器端，如果区域块经解析判断已闭合，浏览器可 先 对区块html内包含的资源文件(css,script,)进行下载渲染。
本文发布于:2024-02-01 16:50:00，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170677739938059.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
