前端性能优化--懒加载和预加载

ゝ一世哀愁。 2022-03-08 12:50 384阅读 0赞

# 懒加载 #

## 代码实现 ##

### html ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="lazyload.css">
    </head>
    
    <body>
        <div class="image-list">
            <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/252339290/TB29PYUXnIlyKJjSZFrXXXn2VXa_!!252339290-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp" alt="">
            <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
            <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i3/24687421/TB2Xg1izsyYBuNkSnfoXXcWgVXa_!!24687421-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
            <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/890151842/TB2II1mnZbI8KJjy1zdXXbe1VXa_!!890151842-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
            <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/2096513830/TB2l1W0kRnTBKNjSZPfXXbf1XXa_!!2096513830-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
            <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i3/2586222636/TB2RDGrpqAoBKNjSZSyXXaHAVXa_!!2586222636-0-daren.jpg_250x250xz.jpg" alt="">
            <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/1870112525/TB2Ae.xbOwIL1JjSZFsXXcXFFXa_!!1870112525-2-beehive-scenes.png_250x250xz.jpg" alt="">
            <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/2194952831/TB2PwWty7qvpuFjSZFhXXaOgXXa_!!2194952831-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        </div>
        <script src="./lazyload.js"></script>
    </body>
    
    </html>

### css ###

.image-item {
        display: inline-block;
        width: 100%;
        height: 300px;
        background: gray;
    }

### js ###

## 效果 ##

1.  蓝色为已经请求加载的图片
2.  红色为还没有请求加载的图片

#### 默认打开，没有操作前 ####

![clipboard.png][]

### 向下滚动前 ###

![clipboard.png][clipboard.png 1]

### 向下滚动后 ###

![clipboard.png][clipboard.png 2]

## 冷门属性 ##

### ocument.addEventListener（事件监听） ###

document.addEventListener('scroll', function() {
        console.log('aa')
    })

![clipboard.png][clipboard.png 3]

### dataset ###

用`dataset.original`获取`data-original` 的属性

### img.onload ###

事件在图片加载完成后立即执行

### getBoundingClientRect ###

用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性

### 文档各种高度 ###

`document.documentElement.clientHeight`:视口的大小  
`document.documentElement.scrollHeight`:文档的大小  
`document.documentElement.offsetHeight`:文档的大小

![clipboard.png][clipboard.png 4]

# 预加载 #

## 标签 ##

## new Image() ##

var image = new Image();
    image.src = 'https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg';

## xml ##

[clipboard.png]: /images/20220308/7ed0012b69bf4d7cbfb9106a4929a403.png
[clipboard.png 1]: /images/20220308/dc00353284974463b564ca360b476552.png
[clipboard.png 2]: /images/20220308/a8d86eb96c99469a831f2d36d0f4c5d9.png
[clipboard.png 3]: /images/20220308/78b8e362435349329163b0f8605340fd.png
[clipboard.png 4]: /images/20220308/a62f5854e81c44afb0bc813d0735220f.png