onload事件和js的defer設置


onload事件在html文檔中所有的節點都下載完成後執行,包括js,css,圖片的資源完全下載後才執行。
如果js 設置了defer之後,js的解析執行在瀏覽器生成了html文檔後執行,不包括圖片的資源下載

如果js沒有設置defer,將一個js放在head加載,會阻塞後面的內容加載。
如下面的例子
如果將defer=true去掉,直到x1.jscript和x2.jscript下載完成後,後面的alert('inline script');纔會執行。
alert('win onload');會在圖片加載完成後纔會執行。

因爲瀏覽器對資源加載的並行下載有限制,如果js和圖片的資源是同一個host,js的加載會阻塞圖片的加載,只有等js下載完成後纔開始下載圖片。

在firefox中對同一種資源的並行下載是5個。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>test defer and onload</title>
		
        <script type="text/javascript" src="http://localhost:9080/temp/x1.jscript?delaySec=10" defer=true></script>
        <script type="text/javascript" src="http://localhost:9080/temp/x2.jscript?delaySec=5" defer=true></script>
        
		<script type=text/javascript charset=utf-8 >
			alert('inline script');
            window.onload = function(){
                alert('win onload');
            }
		</script>
			
	</head>
	<body>
        <img src="http://localhost:9080/temp/test.img?delaySec=10&x=1" alt="long loading">
        <img src="http://localhost:9080/temp/test.img?delaySec=10&x=2" alt="long loading">
        <img src="http://localhost:9080/temp/test.img?delaySec=10&x=3" alt="long loading">
        <img src="http://localhost:9080/temp/test.img?delaySec=10&x=4" alt="long loading">
        <img src="http://localhost:9080/temp/test.img?delaySec=10&x=5" alt="long loading">
	</body>
</html>
.jscript通過一個java servlet來實現,模擬一個需要一個比較長時間的javascript文件下載
public class JSProcessor extends HttpServlet {

	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	
			try {
				System.out.println("begin processing");
				
				String delaySec = req.getParameter("delaySec");
				Thread.currentThread().sleep(Integer.parseInt(delaySec)*1000);
				
				PrintWriter writer = resp.getWriter();
				writer.write("alert('done,delay + " + delaySec + "seconds')");
				System.out.println("end processing");
			} catch (InterruptedException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
	}


	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		doGet(req, resp);
	}
}
.img也是通過一個java servlet來實現,模擬一個需要一個比較長時間的圖片下載

public class ImageProcessor extends HttpServlet {
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	
			try {
				resp.setContentType("image/jpeg;charset=GB2312");
				
				System.out.println("begin processing");
				
				String delaySec = req.getParameter("delaySec");
				Thread.currentThread().sleep(Integer.parseInt(delaySec)*1000);
				
				String imageFile = getServletContext().getRealPath("/blog_logo.jpg");
				
				System.out.println(imageFile);
				
				InputStream imageIn = new FileInputStream(new File(imageFile));

				JPEGImageDecoder decoder = JPEGCodec.createJPEGDecoder(imageIn);

				BufferedImage image = decoder.decodeAsBufferedImage();
				
				JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(resp.getOutputStream());

				encoder.encode(image);
				imageIn.close();
							
				System.out.println("end processing");
			} catch (Exception e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
	}

	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {		
		doGet(req, resp);
	}
}

發佈了262 篇原創文章 · 獲贊 50 · 訪問量 274萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章