脚本加载

js脚本会阻塞页面其他资源的下载,直到其下载、解析、执行完毕。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现.

html、css、图片是可以并行加载的。当浏览器从服务器接收到了HTML文档,并把HTML在内存中转换成DOM树,在转换的过程中如果发现某个节点(node)上引用了CSS或者 IMAGE,就会再发1个request去请求CSS或image,然后继续执行下面的转换,而不需要等待request的返回,当request返回 后,只需要把返回的内容放入到DOM树中对应的位置就OK。

下面的代码会先弹出"head js"对话框,浏览器再继续分析文档DOM结构,此时"Hello World"文本才呈现。然后再弹出"body js"对话框,"Try hard!"文本呈现。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>alert("head js")</script>
</head>
<body>
    <h1>Hello World!</h1>
    <script>alert("body js")</script>
<h2>Try hard!</h2>
</body>
</html>

解决方法:

设置<script defer="defer"></script>,脚本会被延迟到整个页面都解析完毕再运行。即告诉浏览器立即下载,但延迟执行。

defer属性只适用于外部脚本,IE4-IE7还支持内联脚本,IE8,FF3.5,Safari5,Chrome会忽略内联脚本的defer属性。

HTML5定义了一个属性async与defer类似,但并不保证它们的先后执行顺序,所以确保它们互不依赖。FF3.6,Safari5,Chrome支持。

还有一种常用的方法,就是把延迟脚本放在页面底部。

最后介绍一种动态脚本方法。

function loadScript(url){
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = url;
     document.body.appendChild(script);
}

脚本加载,布布扣,bubuko.com

时间: 2024-10-06 15:18:35

脚本加载的相关文章

jQuery Mobile 脚本加载问题

刚开始使用jQuery Mobile,发现很多问题需要重新考虑,比如脚本加载问题. 在普通html中,如果a.html中有链接到b.html,b.html中有类似代码: $(document).ready(function() { alert("hello"); }); 则这段代码可以被正常执行. 而在jQuery Mobile中,这样做就行不通了,在浏览器中直接刷新b.html,则代码可以正常执行,而从a.html跳转到b.html时则不会被执行!为什么? 参见: http://ww

浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及其他的细节问题.而除了defer和async特性,动态脚本和Ajax脚本注入也是两种常用的创建无阻塞脚本的方法.总的来看,这两种方法都能达到脚本加载不影响页面解析和渲染的作用,但是在不同的浏览器中,这两种技术所创建的脚本的执行时机还是有一定差异,今天我们再来探讨一下通过动态脚本技术和Ajax注入的脚本在这些方

JavaScript异步编程(二) 异步的脚本加载

异步的脚本加载 问题: <head>标签里的大脚本会滞压所有页面渲染工作,使页面在脚本加载完毕前一直处于白屏: <body>标签末尾的大脚本使用户只能看到静态页面,原本应进行渲染的地方却是空的: 解决方案: 对脚本分而治之; 负责让页面更好看.更好用的脚本立即加载,可稍后再加载的脚本稍后再加载. HTML5的async/defer属性 ?<script标签> 经典型和非阻塞型 理想情况下,脚本的加载应该与文档的加载同时进行,并且不影响DOM的渲染. 这样,一旦文档就绪就

【Hight Performance Javascript】——脚本加载和运行

脚本加载和运行 当浏览器遇到一个<script>标签时,无法预知javascript是否在<p>标签中添加内容.因此,浏览器停下来,运行javascript代码,然后继续解析.翻译页面. 浏览器必须首先下载外部文件的代码,这要占用一些时间,然后解析并运行代码,这又要占用一些时间.此过程中,页面解析和用户交互是被完全阻塞的. 将脚本放在底部 合并脚本减少个数 延迟脚本(defer) <script src="file1.js" defer></s

网站建设之脚本加载

网站建设之脚本加载 网站建设并不是一件简简单单的事情,当然这里说的不会是普通的较小的静态站点.一个网站需要考虑的东西很多,页面整体结构,SEO,css hack, 跨域,脚本加载策略,站点架构,代码压缩等.要成为一名出色的前端开发工程师你除了需要知道上面罗列的这些东西之外还应该具备良好的设计功底,具备后台开发功底.这些都是废话,在这里之谈标题所要表述的内容,那就是脚本加载的问题.脚本在网站开发中可谓是重中之重,在页面交互当中,没有脚本的加入,整个网站也就少了生机.对于javascript这样一个

DBMS_SCHEDULER执行PERL脚本加载数据

1.例子利用oracle 11g 的dbms_scheduler包执行perl脚本加载数据文件,其中主要用到三个过程分别为SET_JOB_ARGUMENT_VALUE,CREATE_JOB,RUN_JOB三个过程,其中三个过程的参数说明如下: create_job参数: Attribute Description job_name Name of the job job_class Name of the job class job_style Style of the job: REGULAR

关于Jquery,js脚本加载执行先后顺序的一些事

好久没用Jquery了,最近有个东西需要写一下,就想了想那些让脚本延缓执行的一些方法有什么区别呢. (1)当然,第一种方式就是将脚本内嵌在html中相应需要执行的地方,需要等到页面加载完成的话就放在最后.当然这已经是大家很不屑的做法,一般也就是一些测试啊什么的时候会用用或者代码就一几句话,其他很少会这么做了.作为外部文件引入的优点也就不赘述了,一般都明白. (2)将<Script>标签从head放到〈/body〉之前,其他html内容之后.这也很好理解,主要的html加载完之后,脚本才开始运行

你不知道的JavaScript--Item26 异步的脚本加载

先来看这行代码: <script src = "allMyClientSideCode.js"></script> 这有点儿--不怎么样."这该放在哪儿?"开发人员会奇怪,"靠上点,放到<head>标签里?还是靠下点,放到<body>标签里?"这两种做法都会让富脚本站点的下场很凄惨.<head>标签里的大脚本会滞压所有页面渲染工作,使得用户在脚本加载完毕之前一直处于"白屏死机&

也说JS脚本加载控制

问题背景 前端采用的 iframe + html 做后台管理系统.现在js.jquery插件非常多,每次页面都是引用就类似这样: <script src="../Scripts/jquery-1.7.1.js"></script> <script src="../Scripts/uploadify/jquery.uploadify.js"></script> <script src="../Script