JS的加载方式对比

JS方法加载有两种事件：

1. ready。表示文档结构已经加载完成（不包含图片等非文字媒体文件）；

2. onload。指示页面包含图片等文件在内的所有元素都加载完成。

一般情况一个页面响应加载的顺序是：域名解析-加载html-加载js和css-加载图片等其他信息。那么document.ready事件在“加载js和css”和“加载图片等其他信息”之间。比如有时我们发现我们的js方法是是没生效的，这就是由于DOM的加载顺序而导致的。比如下代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>index.jsp</title>
    <script src="<%=basePath%>static/js/vue/Vue.js"></script>
    <script type="text/javascript">
    	var app = new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello Vue!'
		  }
		});
    </script>
  </head>
  <body>
            <div id="app">
			  {{ message }}
			</div>
  </body>
</html>

使用Vue在页面输出Hello Vue！是没效果的，页面只输出{{ message }}，若要使其生效，则必须将脚本放置在{{ message }}后面才可以。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>index.jsp</title>
    <script src="<%=basePath%>static/js/vue/Vue.js"></script>
  </head>
  <body>
            <div id="app">
			  {{ message }}
			</div>
  </body>
  <script type="text/javascript">
    	var app = new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello Vue!'
		  }
		});
  </script>
</html>

此时页面才会正常的打印出Hello Vue！的内容，但现在问题来了，如果我就要放置在head标签中呢？这就涉及到我们开始提到的加载顺序。

1.原生js的onload加载方式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>index.jsp</title>
    <script src="<%=basePath%>static/js/vue/Vue.js"></script>
    <script type="text/javascript">
    	window.onload=function(){
    		var app = new Vue({
  			  el: '#app',
  			  data: {
  			    message: 'Hello Vue!'
  			  }
  			});
    	};

        //引入jquery后可使用如下，效果相同
        $(window).load(function (){
            //....
        });
    </script>
  </head>
  <body>
            <div id="app">
			  {{ message }}
			</div>
  </body>
</html>

在元素的 onload 事件中绑定一个处理函数。假设处理函数绑定给 window 对象。则会在全部内容 ( 包含窗体、框架、对象和图像等 ) 载入完成后触发。假设处理函数绑定在元素上，则会在元素的内容载入完成后触发。

2.利用jquery实现的ready加载（需引入jquery.js）

$(document).ready(function(){

});

//上面的代码也可以简写为如下内容

$(function(){ 
      
});

3.DOM元素加载之前执行

(function(){
    		
	   alert("DOM加载之前执行！");
	        
})(jQuery);

上面的代码alert会在DOM加载之前执行

4.总结

window.onload必须等到页面内包含图片的全部元素载入完成后才干运行。

$(document).ready()是DOM结构绘制完成后就运行，不必等到载入完成后。

window.onload不能同一时候编写多个，假设有多个window.onload方法，仅仅会运行一个。

$(document).ready()能够同一时候编写多个。而且都能够得到运行。

JS的加载方式对比

猜你喜欢