首页 > 代码库 > onload事件和js的defer设置

onload事件和js的defer设置

2024-08-10 03:35:41   223人阅读


onload事件在html文档中所有的节点都下载完成后执行，包括js,css,图片的资源完全下载后才执行。
如果js 设置了defer之后,js的解析执行在浏览器生成了html文档后执行，不包括图片的资源下载

如果js没有设置defer，将一个js放在head加载，会阻塞后面的内容加载。
如下面的例子
如果将defer=true去掉，直到x1.jscript和x2.jscript下载完成后，后面的alert(‘inline script‘);才会执行。
alert(‘win onl oad‘);会在图片加载完成后才会执行。

如果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 onl oad</title>
		
        <script type="text/javascript" src=http://www.mamicode.com/"http://localhost:9080/temp/x1.jscript?delaySec=10" defer=true></script>>.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);
	}
}

onload事件和js的defer设置


联系
我们