前端圖片優化

時間 2019-11-08

標籤前端圖片優化简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="" id='myimg' width="50" height="50">
    <script type="text/javascript">        
        //先讓瀏覽器加載img標籤，而後在JS中爲img標籤指定圖片 
        document.getElementById("myimg").src="vichin.jpg";
    </script>
</body>
</html>

優化頁面圖片加載

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>添加圖片緩存</div>
    <img src="vichin.jpg" id="img2" width="100" height="100">
    <script type="text/javascript">        
        window.onload=function () {
             var myimgs=new Image();
             myimgs.src="vichin.jpg"
             myimgs.onload=function () {
                  alert('hi、vichin!');
             }            
        }
//這樣圖片只會在頁面初次請求時被加載
    </script>
</body>
</html>

爲頁面添加圖片緩存

當<script>標籤變多的時候，也會影響性能。（下載一個100K的文件比下載4個25K的文件速度要快，由於瀏覽器向服務器發送的請求次數也會影響到性能）減小<script>標籤，有助於減小對服務器的請求。so,儘量的將頁面上的腳本放到一個腳本文件中。可是當腳本過大時，頁面在加載完全部的標籤以後，進行腳本加載時，因爲腳本過大，會鎖定瀏覽器一大段時間，爲了不這種狀況的發生，須要向頁面逐步添加腳本（window的load事件開始後加載腳本）。

儘可能將多個腳本合併成一個腳本

儘量避免使用document.write()，而是使用innerHTML或直接操做DOM代替。
若沒法避免使用document.write()，則能夠在文件末尾處設置絕對位置調用腳本，或者在隱藏的div裏調用腳本，而後經過操做DOM將該div裏的內容移到須要的位置。

一、絕對位置調用腳本
    <style type="text/css">
        .content,.banner{
            position: absolute;
            left: 10px;
        }
        .content{
            top:40px;
        }
        .banner{
            top:10px;
        }
    </style>
    <div class="content">
        lorem ipsum
    </div>
    <div class="banner">
        <script type="text/javascript"></script>
    </div>


二、隱藏的div裏調用腳本
        <div id="banner" style="height: 20px;width:16px">
        
    </div>
    <div class="temp">
        <div id="mystuff">
            <script type="text/javascript" src=xxx.js></script>
        </div>
    </div>
    <script type="text/javascript">
        var ba=document.getElementById("banner");
        var ms=document.getElementById("mystuff");
        if ((ba!=null)&&(ms!=null)) {
            ba.appendChild(ms)
        }
    </script>

儘量避免使用document.write()

當一個頁面須要有多個圖片的時候，能夠將多張圖片合成一張圖片，再以切片的形式使用它們。CSS精靈生成器。

        <input type="button"  style="width: 20px;height:20px;background:url(pic/pic4btn.png) no-repeat 0 -20px; "/> 

在pic文件夾下存在一張名爲pic4btn.png的圖片

每一個小圖標的大小爲20px*20px，圖片的左上角爲0，0處，向右畫一條線爲X軸，向下爲Y軸。由於input標籤的大小爲20px*20px，因此，將這個圖片放到input標籤中做爲背景，就只能顯示百度的logo，如果須要使用第二張圖片，須要將這個圖片往上移動20px,因此在no-repeat 0 後面是-20px。

將多個圖片合併成一個圖片

　　pic4btn.png javascript