onload 属性到底是资源加载完成还是渲染完成测试

最新推荐文章于 2023-07-06 14:10:10 发布

automation13

最新推荐文章于 2023-07-06 14:10:10 发布

阅读量2.7k

点赞数

分类专栏： Web前端文章标签： javascript window onload web script

本文链接：https://blog.csdn.net/automation13/article/details/79916779

版权

Web前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

测试图片加载代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <script>
        alert('first');
    </script>
    <body >
            <img class="currentImg" id="currentImg" οnlοad="alert('img1')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523532560732&di=f4440f7230c3ac36bd87c4cb0534d56d&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F35a85edf8db1cb1353fd8b78de54564e93584bc0.jpg"/>
            <img class="currentImg" id="currentImg" οnlοad="alert('img2')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523532612561&di=b7a445d548cce0bb0a833e51e034e882&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D529043615%2C3919346002%26fm%3D214%26gp%3D0.jpg"/>
    </body>
    <script>
        window.onload = function(){
            alert('last')
        }
    </script>
</html>

原理：

利用alert阻断浏览器渲染

结果：

1、输出依次是 “first”、“img2”、“img1”、“last”, 竟然先加载了第二个图片，说明资源加载时并行的

2、浏览器弹屏“img2”、“img1”时图片并未展示，说明onload调用时机是资源加载而非资源渲染结束后

3、去掉两个<img>中的onload属性发现弹屏“last”时图片尚未渲染，即window.onload表示资源加载而非渲染结束后调用

4、将<img>中的URL改成错误的URL发现window.onload同样调用了，但此时发现浏览器控制台已经输出了图片加载失败的error，而该<img>中的onload函数未调用

5、将两个<img>中的URL都改成错误的URL，发现window.onload同样调用了，说明其表示的是资源加载完了，至于成功与否无所谓

再测下js文件的加载

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <script>
        alert('first');
    </script>
    <body >

    </body>
    <script type="text/javascript" src="../js/a.js" οnlοad="alert('javascript')"></script>
    <script>
        window.onload = function(){
            alert('last')
        }
    </script>
</html>

a.js文件的代码：