JS的加载和执行

在遇到script标签,会阻断页面的其它的操作(其它文件的下载,页面渲染和用户交互),需要等脚本下载、解析和执行完后才能进行其它的操作.

老版的部分浏览器会完成了一个,才能去下载另一个script文件,新版的可以并行的去下载js,但是下载的同时还是会阻断其它的操作

浏览器在解析到标签之前不会渲染页面的任何部分,把脚本放到页面顶部将会导致明显的延迟,表现为显示空白页面

为了提升性能

1. script 放到的前面,以减少对其它的影响

2. 减少用script标签,每个script标签初始下载时都会阻塞页面渲染,而且对于外链还要考虑HTTP请求带来的性能开销,下载单个100Kb的文件比下载4个25KB的文件更快

3. 无阻塞下载JavaScript的方法,无阻塞下载,下载script时不会阻止其它的操作

   • 使用script标签的defer属性,会在onload事件被触发前才会执行,这个只有IE 4+和Firefox 3.5+的浏览器支持
   • 动态创建script标签,来下载并执行,文件在该元素被添加到页面时开始下载,但是它的下载和执行的过程不会阻塞页面的其它进程.但是需要确认该文件是否下下载完成

   function loadScript(url,cb) {
   	var script = document.createElement('script');
   	script.type = 'text/javascript';
   	
   	if(script.readyState) {//IE 
   		script.onreadystatechange = function() {
   			if(script.readyState == 'loaded' || script.readyState == 'complete') {//loaded和complete有可能不会同时存在
   				script.onreadystatechange = null;
   				cb();
   			}
   		}
   	}else {
   		script.onload = function() {
   			cb();
   		}
   	}
   	script.src = url;
   	document.getElementsByTagName('head')[0].appendChild(script);
   }
   

   • 使用XHR对象下载js代码并注入页面中