JS的阻塞特性_第1页
JS的阻塞特性_第2页
JS的阻塞特性_第3页
JS的阻塞特性_第4页
JS的阻塞特性_第5页
已阅读5页，还剩7页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、JS 的阻塞特性JS 具有阻塞特性，当浏览器在执行 js 代码时，不能同 时做其它事情，即 <script> 每次出现都会让页面等待脚 本的解析和执行（不论 JS 是内嵌的还是外链的） ， JS 代码 执行完成后，才继续渲染页面。由于， JS 的这种阻塞特性， 每次遇到 <script> ，页面都必须停下来等待脚本下载并 执行，这会停止页面绘制，带来不好的用户体验。所以，有 必要减少 JS 阻塞特性造成的困扰。 1 优化脚本位置 HTML4 规范中， <script> 可以放在 <head> 或 <body> 中。你可能习惯性的在 &

2、lt;head> 中放置多个外链 JS、CSS ， 以求优先加载它们。 浏览器在继续到 <body> 之前， 不会 渲染页面，所以，把 JS 放在 <head> 中，会导致延迟。 为了提高用户体验， 新一代浏览器都支持并行下载 JS ，但是 JS 下载仍然会阻塞其它资源的下载 （eg. 图片）。尽管脚本的 下载过程并不会相互影响，但页面仍然必须等待所有 JS 下 载并执行完成才能继续。显见，所有 <script> 应该尽可 能放到 <body> 的底部，以减少对页面下载的影响。 注意： CSS 文件本身是并行下载， 不会阻塞页面的其他进程。

3、 但是， 如果把一段内嵌脚本放在引用外链 CSS 的 <link> 之后 会导致页面阻塞去等待 CSS 的下载。这样做是为了确保内 嵌脚本在执行时能够获得正确的样式信息。所以，最好不要 把内嵌脚本放在 CSS 的 <link> 之后。2 减少外链脚本数 量以改善性能 原因很简单，额外的 HTTP 请求会带来额外 的开销， 所以减少页面中外链脚本的数量， 有助于改善性能。 3 使用无阻塞下载 JS 方法无阻塞脚本的秘诀在于，在页面 加载完成后才加载 JS ，即在 window 对象的 load 事件触发 后在下载脚本。 3.1 使用 <script> 的 de

4、fer 属性(仅 IE 和 Firefox3.5 以上)； defer 属性指明本元素所含的脚本不会 修改 DOM ，因此代码能安全的延迟执行。 defer 属性的 <script> ，对应的 JS 文件将在页面解析到 <script> 时开始下载，但并不会执行， 直到 DOM 加载完成，即 onload 事件触发前被调用。 当一个带有 defer 属性的 JS 文件下载时， 他不会阻塞浏览器的其它进程，因此这类文件可以与页面中 的其他资源并行下载。 <!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN

5、 ><html xmlns=; <head><title>DeferredScripts</title></head><body> <script type=text/javascript defer> alert(defer);</script><script type=text/javascript>alert(script);</script><script type=text/javascript>window.onload = function() al

6、ert(load);</script></body></html> 对于支持 defer 的浏览器弹出顺序是： script>defer>load ；而不支持该属性的浏览器的弹出顺 序为： defer>script>load 。 3.2 使用动态创建的 <script> 元素来下载并执行代码实例代码如下： <!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN ><html xmlns=; <head><title>Dyn

7、amicScriptElements</title></head><body> <script type=text/javascript>function loadScript(url, callback) var script =document.createElement(Script);script.type = text/javascript;/IE 验证脚本是否下载完成if (script.readyState) script.onreadystatechange = function() /readyState 属性有 5 种取值 /

8、uninitialized ：初始状态 /loading ：开始下载 /interactive ：数据完成下载但尚不可用 /complete ：数据已经准备就绪 /实际使用时， readyState 的值并不像我 们预想的那样有规律，实践发现使用 readyState/最靠谱的方式是同时检查以下 2 个状态， 只要其中 1 个触发，就认为脚本下载完成。if (script.readyState = loaded | script.readyState = complete) /移除事件处理器，确保事件不 会处理 2 次script.onreadystatechange =null;callba

9、ck(); / 其他浏览器else script.onload = function() callback();script.src = url;/把新建的 <Script> 添加到 <head> 里 比添加到 <body> 里更保险。document.getElementsByTagName(head)0.appendChil d(script);/ 动态加载多个 JS 文件/ 优先加载 Common.js ，等待 Common.js 加载完毕 后加载 Costom.js/不同浏览器的执行顺序不同/Firefox 、 Opera 能够保证按照你脚本的加载顺

10、序 来执行/其他浏览器会按照从服务端返回的顺序执行代码，因此使用嵌套的方法保证调用顺序loadScript(Common.js, function() loadScript(Costom.js, function() alert(all load););）;</script></body></html> 文件在该元素被添加到页面时开始下载。 这种技 术的重点在于：无论在何时启动下载，文件的下载与执行不 会阻塞页面的其他进程。使用动态脚本节点下载文件时，根 据浏览器不同， 多数浏览器， 返回的代码会立即执行 （Firefox 、 Opera ，会等待此前所有动

11、态节点执行完毕） 。当脚本”自执 行“时，这种机制运行正常， 但是当代码内只包含供其它脚本 调用的接口时，就必须确保脚本下载完成并准备就绪，在上 例中列举了不同浏览器的验证方法。注意：如果多个文件的 顺序很重要，更好的做法是把它们按正确顺序合并为一个文 件。此外，说把新建的 <Script> 添加到 <head> 里比 添加到 <body> 里更保险是因为要尽量避免页面报错 （在 低版本的 IE 中使用不当会发生 操作已中止 错误。 3.3 使用 XHR 对象下载 JS 代码并注入页面中实例代码如下： <!DOCTYPE html PUBLIC -/W

12、3C/DTD XHTML 1.0 Transitional/EN ><html xmlns=;<head><title>XhrScriptInjection</title></head><body> <script type=text/javascript>var xhr = new XMLHttpRequest();xhr.open(get, JScript.js, true); xhr.onreadystatechange = function() if (xhr.readyState = 4) /2XX

13、表示有效响应， 304 表示从缓存读 取if (xhr.status >= 200 &&xhr.status < 300 | xhr.status = 304) /创建内嵌脚本 var script = document.createElement(script);script.type = text/javascript; script.text = /一旦新创建的 <script> 被添加到页面， 代码就立刻执行 然后准备就绪。; xhr.send(null);</script></body></html> 这种方

14、法的优点是，你可以下载 JS 代码但不立 即执行。由于代码是在 <script> 标签之外返回的，因此 它下载后不会自动执行，这使得你可以把脚本的执行推迟到 你准备好的时候。另一个优点是，同样的代码在所有主流浏 览器中都能正常工作。这种方法的主要局限性是 JS 文件必 须与所有请求的页面处于相同的域。 综上所述，向页面中添加大量 JS 的推荐做法只需两步：先 添加动态加载的所需代码，然后加载初始化页面所需的剩下 代码。 <script type=text/javascript src=Common.js></script> <script type=t

15、ext/javascript>loadScript(Costom.js, function() /Do Something);</script> 优化前：优化后： 操作已中止 错误<html><head><title>Operation Aborted Example</title></head><body><p>The following code should cause anOperation Aborted error in IE versions prior to 8.</p&

16、gt; <div><script type=text/javascript>v);</script></div></body></html> 上述代码在低版本 IE 中会报 操作已中止 错误。 出现此问题的原因是子容器 HTML 元素包含试图修改父容 器元素的子容器的脚本。脚本试图使用 innerHTML 方法或 appendChild 方法修改父容器元素。例如对于如果 DIV 元 素是一个 BODY 元素中的子容器，并且在 DIV 元素中的 一个 SCRIPT 块试图修改 DIV 元素的父容器的 BODY 元素可能会出现此问题。最简单的解决方法：将脚本移到 body 元素的范围。 <html><head><title>Operation Aborted Exa

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论