前端性能优化之预加载

最新推荐文章于 2024-04-25 08:30:51 发布

悟空_大师兄_

最新推荐文章于 2024-04-25 08:30:51 发布

阅读量800

点赞数 1

文章标签：前端性能优化

本文链接：https://blog.csdn.net/weixin_39007040/article/details/129931901

版权

预加载： Resource Hints(资源预加载)包括预连接、资源与获取、资源预渲染等。图片预先加载到浏览器
实现预加载的方法

1.仅使用JavaScript实现预加载

纯JavaScript来实现图片的预加载。

只需编辑、加载所需要图片的路径与名称即可，实现：

<script type="text/javascript">
           let images = new Array()
            function preload(array) {
                for (i = 0; i < array.length; i++) {
                    images[i] = new Image()
                    images[i].src = array[i]
                }
            }
            preload(
                ["http://dashixiong.com/image/image-01.jpg",
                "http://dashixiong.com/image/image-02.jpg",
                "http://dashixiong.com/image/image-03.jpg"]
            )
</script>

<script type="text/javascript">
              let img1 = new Image();
              let img2 = new Image();
              let img3 = new Image();
              img1.src = "http://dashixiong.com/image/image-001.gif";
              img2.src = "http://dashixiong.com/image/image-002.gif";
              img3.src = "http://dashixiong.com/image/image-003.gif";
</script>

2.使用Ajax实现预加载

使用Ajax实现图片预加载的方法。该方法利用DOM，不仅仅预加载图片，还会预加载CSS、JavaScript等相关的东西。使用Ajax，比直接使用JavaScript，优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。

window.onload = function() {
    setTimeout(function() {
        // XHR to request a js and a CSS
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://dashixiong.com/utils.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://dashixiong.com/utils.css');
        xhr.send('');
        // preload image
        new Image().src = "http://dashixiong.com/logo.png";
    }, 1000);
};

上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000毫秒的超时是为了防止脚本挂起，而导致正常页面出现功能问题。

下面，我们看看如何用JavaScript来实现该加载过程：

window.onload = function() {
    setTimeout(function() {
        // reference to <head>
        var head = document.getElementsByTagName('head')[0];
        // a new CSS
        var css = document.createElement('link');
        css.type = "text/css";
        css.rel  = "stylesheet";
        css.href = "http://dashixiong.com/utils.css";
        // a new JS
        var js  = document.createElement("script");
        js.type = "text/javascript";
        js.src  = "http://dashixiong.com/utils.js";
        // preload JS and CSS
        head.appendChild(css);
        head.appendChild(js);
        // preload image
        new Image().src = "http://dashixiong.com/logo.png";
    }, 1000);
};

这里，我们通过DOM创建三个元素来实现三个文件的预加载。正如上面提到的那样，使用Ajax，加载文件不会应用到加载页面上