您现在的位置是:首页 > 电脑技术查询 > web开发

onload事件跟js的defer设置

编辑:chaxungu时间:2022-10-10 23:23:59分类:web开发

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 blocke.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 blocke.printStackTrace();}}protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}}