JavaScript的性能优化加载和执行.docx

JavaScript的性能优化加载和执行.docx

《JavaScript的性能优化加载和执行.docx》由会员分享，可在线阅读，更多相关《JavaScript的性能优化加载和执行.docx（13页珍藏版）》请在冰豆网上搜索。

JavaScript的性能优化加载和执行

JavaScript的性能优化：

加载和执行

2013/09/04|分类：

 WEB前端, 开发 | 0条评论 |标签：

 JAVASCRIPT

分享到：

56

∙AndroidUI模板设计

∙Webapp---Rails10日谈

∙CSS3绚丽照片墙

∙Canvas绘图详解

原文出处：

 蔡愉晟   欢迎分享原创到伯乐头条

简介：

 随着Web2.0技术的不断推广，越来越多的应用使用JavaScript技术在客户端进行处理，从而使JavaScript在浏览器中的性能成为开发者所面临的最重要的可用性问题。

而这个问题又因JavaScript的阻塞特性变的复杂，也就是说当浏览器在执行JavaScript代码时，不能同时做其他任何事情。

本文详细介绍了如何正确的加载和执行JavaScript代码，从而提高其在浏览器中的性能。

无论当前JavaScript代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。

JavaScript执行过程耗时越久，浏览器等待响应用户输入的时间就越长。

浏览器在下载和执行脚本时出现阻塞的原因在于，脚本可能会改变页面或JavaScript的命名空间，它们对后面页面内容造成影响。

一个典型的例子就是在页面中使用document.write（）。

例如清单1

1

2

3

4

5

6

7

8

9

10

11

12

    

        document.write（"Todayis"+（newDate（））.toDateString（））;

当浏览器遇到

Helloworld!

然而这种常规的做法却隐藏着严重的性能问题。

在清单2的示例中，当浏览器解析到

这段代码展示了在HTML文档中放置

带有 defer 属性的

        alert（"script"）;

        window.onload=function（）{

            alert（"load"）;

        };

这段代码在页面处理过程中弹出三次对话框。

不支持 defer 属性的浏览器的弹出顺序是：

“defer”、“script”、“load”。

而在支持 defer 属性的浏览器上，弹出的顺序则是：

“script”、“defer”、“load”。

请注意，带有 defer 属性的