首页 > 前端技术 > 避免JavaScript阻塞页面逐步显示问题

避免JavaScript阻塞页面逐步显示问题

尽管主流浏览器都支持并行下载,但事实情况是在下载脚本时并行下载是被禁用的,即使使用了不同的主机名,浏览器也不会启动其他的下载,解释是为了保证脚本能够按照正确的顺序执行,以及脚本可能使用document.write来修改页面内容。

在页面使用脚本时,对于所有位于脚本以下的内容,页面的逐步呈现都被阻塞尤其的在调用外部脚本的时候,因为速度原因导致页面半天不能正常显示尤为明显。通常我们会脚本放在页面最靠下标签之前的地方,以期尽可以多的内容能够逐步呈现。

尽管在大多情况下我们可以把动态调用内容的脚本放在之前,但有时候情况并不是那么乐观,在MVC分层流行的今天,模板应用如此普及的情况下,有时候我们不得不把脚本放在页面中间,脚本阻塞内容逐步呈现问题再一次出现。

加载后加载
经过本人验证,通过JavaScript定时语句执行加载动作,”document.createElement(“script”)动态生成内容加载外部JavaScript脚本可以解决页面逐步呈现问题。代码如下:
[code]
<script language="javascript">
setTimeout(‘loadNews()’, 1); //定时执行动态加载
function loadNews(){
var elem = document.createElement("script");
elem.src = "/index.php?m=house&q=news";
document.body.appendChild(elem);
}
</script>
[/code]

这样在页面加载完成之后JavaScript加载未完成之前,页面逐步呈现避免阻塞显示。

此方法的缺陷是脚本加载完之前浏览器一定显示页面加载中,直到脚本加载完成。

脚本通过IE7/Chrome/Firefox验证。

分类: 前端技术 标签: ,
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.

=1加7(必填)请输入两数相加的结果。