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);
	}
}
时间: 2024-12-22 01:41:38

onload事件和js的defer设置的相关文章

【JS】怎样同一时候处理多个window.onload事件

有时引用其他js时,其js却使用了window.onload事件,这种话,引入的页面的onload事件就有可能执行不了.如何才干两个都执行呢?除了将两个写到一块儿去的方法外,还有其他的方法 if(window.onload!=null){ eval("theOldFun="+window.onload.toString()); window.onload=function(){theOldFun();addReadResource();}; } eval()函数的作用: 它的功能是把相

JS之ONLoad事件

如果我问你window.load和window.onload分别是什么意思,恐怕你会回答我:“这不是页面加载完就执行吗”. 但是答案是不一定,得看你怎么用.看一下例子吧 例1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <script type="tex

js之onload事件的一点使用心得

刚看到这篇文章,我也犯晕,实际的原因其实是函数赋值时多了个(),这标明是一个表达式,所以会直接执行函数,小小一个(),奥妙真不小. js之onload事件的一点使用心得 window.load和window.onload的意思并不只是页面加载完就执行,那要看你怎么用了,下面做了示例为大家介绍下,感兴趣的朋友可以参考下 如果我问你window.load和window.onload分别是什么意思,恐怕你会回答我:“这不是页面加载完就执行吗”. 但是答案是不一定,得看你怎么用.看一下例子吧 例1: 代

jQuery的document ready与 onload事件——你真的思考过吗?

在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是document.onload? 4. document ready到底是什么ready,DOM渲染完成? 5. jQuery怎么实现$(document).ready? 6. jQuery的ready,还能ready什么? 7. jQuery的document ready就一定比window.onlo

JS高级程序设置笔记(五)

13章:事件 JavaScript与Html之间的交互,是通过事件实现的.可以使用侦听器(或者处理程序)来预定事件. 13.1事件流: 什么是事件流:事件流描述的是从页面中接收事件的顺序. 13.1.1事件冒泡 什么是事件冒泡:可以用一个形象的比喻来描述.小鱼吐泡泡,小鱼在水里,泡泡会从水的最底部一直到水面上结束.事件冒泡和这个意思相近,IE的事件流叫做事件冒泡,是从最具体的元素开始,一直延伸到最顶层的那个结构.意思就是说,比如你创建了一个鼠标点击事件,当你点击这个元素的时候,浏览器会认为你点击

浏览器返回按钮不会触发onLoad事件

最近在做一个移动端项目,发现移动端某些返回和PC端是有差异的, 比如ios中返回按钮是直接使用缓存的, 不会执行任何js代码, 这个问题很蛋疼, 例如, 在提交的时候将按钮设置为loading状态, 如果在提交成功后没有对安装进行处理, 那么返回后按钮依然是loading状态, 这种体验很差, 如下图: 此问题是由于某些浏览器在back的时候是直接使用的之前的视图,页面没有进行重新加载而导致的,在网上找了些资料, 发现这是H5的一些新特性Back-Forward Cache(简称bfcache)

共享onload事件

在做前端工作中,我们想要设置某个函数prepare,让它在网页加载完毕后执行,会触发一个onload事件,这个事件与windows对象相关联,必须把prepare函数绑定到这个时间上,语法如下:window.onload=prepare; 这个方法可以解决我的问题,但是,如果我有两个函数firstfunc和secondfunc,我想让他们两个都在页面加载完成后得到执行,我该怎么做呢? window.onload=firstfunc; window.onload=secondfunc; 像这样逐一

【JavaScript】JS跨域设置和取Cookie

cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值.本文主要JS怎样读取Cookie以及域的设置. AD: 在Javascript脚本里,一个cookie 实际就是一个字符串属性.当你读取cookie的值时,就得到一个字符串,里面当前WEB页使用的所有cookies的名称和值.每个cookie除了 name名称和value值这两个属性以外,还有四个属性.这些属性是:

javascript中onload事件如何绑定及执行顺序

onload事件,顾名思义就是为了js程序能够在网页加载成功过后进行执行.对于放在head里面的js来说,非常必要. 如何给网页绑定onload,主要有三种方式: window.onload=function(){//要执行的代码} window.addEventListener('load',函数名,false) body中添加属性<body > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo