JavaScript性能优化（1）——加载与执行

来源：互联网发布：冠新软件版本编辑：程序博客网时间：2024/05/25 18:12

JavaScript的阻塞特性即：在大多数浏览器中，使用单一进程来处理用户界面的更新以及JavaScript脚本的加载执行。因此，当浏览器在执行JavaScript代码的同时，不能同时处理其他的任务。

当浏览器解析到<script>标签时，浏览器会停止处理用户界面，进而先执行JavaScript代码。如果JavaScript代码采用src属性加载的外链形式，则浏览器会优先下载外链文件中的代码，并解释执行它。整个过程中，页面的渲染将被浏览器阻塞。在比较现代的浏览器中（如IE8,、Firefox 3.5、Chrome2等），都支持并行下载外链的JavaScript文件。浏览器可以同时并行下载多个JavaScript文件，<script>标签在下载外部资源是不会相互阻塞。但是，在下载JavaScript代码的过程中，仍然会阻塞其他资源的下载、如图片。

通常，采用如下几种方法可以提高JavaScript代码在加载执行过程中的性能：

1. 将<script>标签尽可能放在<body>标签底部，减小下载JavaScript代码对页面下载的影响。

2. 减少外链JavaScript文件数量，可将多个JavaScript文件合并成单个文件。这是因为：浏览器在解析HTML页面过程中的<script>标签时，会因为执行脚本导致一定延时。其次，JavaScript文件下载是通过HTTP请求的形式，会带来额外的性能开销。文件的合并可以通过离线的打包工具，或者实时在线服务来实现。

3. 采用动态加载JavaScript脚本的方式。这种技术核心在于：任何时刻的JavaScript文件下载都不会阻塞页面等其他进程。常用的类库如LazyLoad和LABjs。动态加载的实现方式如下：

function loadScript(url, callback){var script = document.createElement(“script”);script.type = “text/javascript”;if (script.readyState) { //for IEscript.onreadystatechange = function(){if (script.readyState === “loaded” || script.readyState === “complete”){script.onreadystatechange = null;callback();}};}else{ //for other browserscript.onload = function(){Callback();};}script.src = null;document.getElementByTagName(“head”)[0].appendChild(script);}

4. 延迟的脚本加载。通过在<scriptdefer>方式加载JavaScript文件。通过此方式加载的JavaScript文件将在解析到<script>标签后下载，但不立即执行。而是在DOM加载完成后才执行。注意defer属性只有IE4+ 和Firefox3.5+ 的浏览器支持。

5. 通过XMLHttpRequest脚本注入。通过此方式下载JavaScript文件但不立即执行，几乎所有浏览器都支持此方式。具体实现如下：

var xhr = new XMLHttpRequest();xhr.open(“get”, “script_file.js”, true);xhr.onreadystatechange = function(){if (xhr.readyState === 4){if (xhr.status >= 200 && xhr.status < 300 || xhr.status ===304){var script = document.createElement(“script”);script.type = ”text/javascript”;script.text = xhr.responseText;document.body.appendChild(script);}}}

总结：关于JavaScript加载执行的性能优化有多种，比较好的方式为：先添加动态加载所需的代码，然后加载初始化页面所需的其他代码。并将<script>标签尽可能放在<body>的底部。其次还可以采用YUI Compressor对代码进行压缩。


	
					
					   JavaScript性能优化（1）——加载与执行
	  	   JavaScript的性能优化：加载和执行
	  	   JavaScript的性能优化：加载和执行
	  	   JavaScript的性能优化：加载和执行
	  	   JavaScript 的性能优化：加载和执行
	  	   JavaScript 的性能优化：加载和执行
	  	   JavaScript 的性能优化：加载和执行
	  	   JavaScript的性能优化：加载和执行
	  	   JavaScript 的性能优化：加载和执行
	  	   JavaScript 的性能优化：加载和执行
	  	   JavaScript 的性能优化：加载和执行
	  	   JavaScript 的性能优化：加载和执行 .
	  	   JavaScript 的性能优化：加载和执行
	  	   JavaScript 的性能优化：加载和执行
	  	   JavaScript 的性能优化：加载和执行
	  	   JavaScript 的性能优化：加载和执行
	  	   JavaScript 的性能优化：加载和执行
	  	   JavaScript 的性能优化：加载和执行
	     		  
	  	   确定系统可用性量表SUS的个体分数：添加一个形容词评定量表
	  	   【FPGA黑金开发板】Verilog HDL那些事儿--串口模块（十一）
	  	   struts2 <s:select/>默认key
	  	   系统可用性量表（SUS ）
	  	   深入了解ViewState
	  	   JavaScript性能优化（1）——加载与执行
	  	   Eclispe+CDT+gdb调试android ndk程序----包括CDT组件跟Sequoyah Android Native Code Support组件安装
	  	   定制puttygen
	  	   shell 字符串截取
	  	   linux tar解压bz2, gz,zip压缩文件
	  	   sqlite 存储和读取图片
	  	   孙鑫MFC笔记之十三--多线程编程
	  	   iOS高效开发必备的10款Objective-C类库
	  	   <Effective C++: 习惯C++> 笔记