關於Hikic.js懶加載的深度剖析

時間 2019-11-13

標籤關於 hikic.js hikic 加載深度剖析欄目 JavaScript 简体版

原文原文鏈接

這篇文章主要講解Hikic.js裏的懶加載使用方法和探究如何實現html

那麼首先，咱們新建一個html文件，而且寫好基本結構：性能

<!DOCTYPE>
<html>
    <head>
        <title>關於Hikic.js懶加載的深度剖析</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <script src="Hikic.js"></script>
        <script>
            
        </script>
    </body>
</html>

而後咱們在body裏面插入許多img標籤，向下面同樣：.net

<!DOCTYPE>
<html>
    <head>
        <title>關於Hikic.js懶加載的深度剖析</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <img src="download-1.jpg">
        <img src="download-2.jpg">
        <img src="download-3.jpg">
        <img src="download.jpg">
        <script src="Hikic.js"></script>
        <script>
            
        </script>
    </body>
</html>

咱們用火狐打開看下性能：code

你們能夠看到，在2000ms的位置性能出現了大幅降低，接下來，咱們使用Hikic.js的懶加載來加載它，代碼以下：htm

<!DOCTYPE>
<html>
    <head>
        <title>關於Hikic.js懶加載的深度剖析</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <img id="p1" height="500" width="500" style="display: block;">
        <img id="p2" height="500" width="500" style="display: block;">
        <img id="p3" height="500" width="500" style="display: block;">
        <img id="p4" height="500" width="500" style="display: block;">
        <script src="Hikic.js"></script>
        <script>
            window.onload = function(){
                _("#p1").lazyLoad("download.jpg");
                _("#p2").lazyLoad("download-1.jpg");
                _("#p3").lazyLoad("download-2.jpg");
                _("#p4").lazyLoad("download-3.jpg");
            }
        </script>
    </body>
</html>

如今咱們查看一下性能：圖片

你們能夠看到，再刷新頁面的瞬間，性能是有小幅度波動的，咱們從查看器裏面也能夠看出來他如今只加載了2張圖片（只有2張圖片有src的屬性）ip

當咱們繼續把頁面往下拖時，咱們記錄下性能：it

能夠看到，這是咱們加載剩餘2副圖片的性能消耗，對比上面沒有應用懶加載的圖片，性能着實提高了很多io

最後，歡迎使用Hikic.jsfunction

連接：https://www.oschina.net/p/hikic