成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

淺談高性能web前端技術(shù)?！“纵p松做到減少HTTP請求

jayzou / 1925人閱讀

摘要：小白如何輕松寫出高性能前端頁面一從減少請求開始下面分別從以下幾點開篇圖片地圖，，內(nèi)聯(lián)圖片，樣式表合并，腳本文件合并。操作原理通過合并圖片減少請求，并且比圖片地圖更靈活，降低下載量，合并后圖片比分離的圖片總和要小。

小白如何輕松寫出高性能web前端頁面 一.從減少HTTP請求開始

下面分別從以下幾點開篇：圖片地圖，CSS Sprites，內(nèi)聯(lián)圖片，樣式表合并，腳本文件合并。

1.圖片地圖：服務(wù)器端圖片地圖和客戶端圖片地圖。

操作原理：利用用戶點擊圖片的x,y坐標，提交一個目標URL,或者映射一個操作。

> 舉個栗子：頁面的導(dǎo)航欄模塊，由四個圖片組成，用戶點擊每個圖片會鏈接到不同的URL地址。
> 方式一：四個分開的圖片對應(yīng)四個分開的超鏈接，需要四個HTTP請求（效率較低）；
> 方式二：一個圖片由四個導(dǎo)航組成，用圖像映射實現(xiàn)，需要一個HTTP請求，響應(yīng)時間降低（**效率提高**），**圖片地圖中的圖片必須是連續(xù)的**。

代碼實例:

 方法一(效率低)
    
方法二（**效率高**）

2.CSS Sprites：更為靈活的將多幅圖片合并為一幅多帶帶圖片的方式。

操作原理：通過合并圖片減少http請求，并且比圖片地圖更靈活，降低下載量，合并后圖片比分離的圖片總和要小。
優(yōu)點：干凈的標簽，很少的圖片，很短的響應(yīng)時間

代碼實現(xiàn)：

     
     
    #navbar span {
        width: 31px;
        height: 31px;
        display: inline;
        float: left;
        background-image: url(/images/spritebg.gif?t=1526305412);
    }
    .home {
        background-position: 0 0;
        margin-right: 4px;
        margin-left: 4px;
    }
    .gifts {
        background-position: -32px 0;
        margin-right: 4px;
    }
    .cart {
        background-position: -64px 0;
        margin-right: 4px;
    }
    ......

3.內(nèi)聯(lián)圖片：更為靈活的將多幅圖片合并為一幅多帶帶圖片的方式。

通過使用 data:URL模式 缺點：IE8以下不支持，受數(shù)據(jù)大小的限制，整體下載量會增加，不會被緩存
其格式如下：data:,
data可以用于內(nèi)聯(lián)圖片，需要指定URL的地方SCRIPT和A標簽
使用是可以用CSS將內(nèi)聯(lián)圖片作為背景，放在外部樣式表中，雖然增加一個HTTP請求，但是可以實現(xiàn)額外的緩存

代碼實現(xiàn)



#navbar span {
    width: 31px;
    height: 31px;
    display: inline;
    float: left;
    margin-right: 4px;
}
.home {
    background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAIxKAKVjCLW1tb29tcbGvc7OxtZ7ANbWz…ddWZZ5UAGPOTXlgkNVOSZdBxEwIkYu7VhYnAol5GaadRqF0Uaz0TgXnX2umVFyGakJUUAAADs=);
    margin-left: 4px;
}

4.合并腳本和樣式表：將腳本合并，樣式表合并，減少HTTP請求

‘

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/94811.html

相關(guān)文章

  • 淺談高性能web前端技術(shù)棧——小白輕松做到減少HTTP請求

    摘要：小白如何輕松寫出高性能前端頁面一從減少請求開始下面分別從以下幾點開篇圖片地圖，，內(nèi)聯(lián)圖片，樣式表合并，腳本文件合并。操作原理通過合并圖片減少請求，并且比圖片地圖更靈活，降低下載量，合并后圖片比分離的圖片總和要小。 小白如何輕松寫出高性能web前端頁面 一.從減少HTTP請求開始 下面分別從以下幾點開篇：圖片地圖，CSS Sprites，內(nèi)聯(lián)圖片，樣式表合并，腳本文件合并。 1.圖片地圖...

    ShevaKuilin 評論0 收藏0

  • 淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)

    摘要：雪碧圖內(nèi)聯(lián)圖片將站內(nèi)小圖標合并成一張圖，使用定位截取對應(yīng)圖標適當使用內(nèi)聯(lián)圖片。瀏覽器緩存合理設(shè)置瀏覽器緩存是網(wǎng)頁優(yōu)化的重要手段之一。為什么要減少請求在性能優(yōu)化中減少請求的措施占了很大部分，比如使用雪碧 這篇文章主要介紹了淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 針對瀏覽器網(wǎng)頁的一些優(yōu)化規(guī)則 頁面優(yōu)化 靜態(tài)資源壓縮...

    Aomine 評論0 收藏0

  • 淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)

    摘要：雪碧圖內(nèi)聯(lián)圖片將站內(nèi)小圖標合并成一張圖，使用定位截取對應(yīng)圖標適當使用內(nèi)聯(lián)圖片。瀏覽器緩存合理設(shè)置瀏覽器緩存是網(wǎng)頁優(yōu)化的重要手段之一。為什么要減少請求在性能優(yōu)化中減少請求的措施占了很大部分，比如使用雪碧 這篇文章主要介紹了淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 針對瀏覽器網(wǎng)頁的一些優(yōu)化規(guī)則 頁面優(yōu)化 靜態(tài)資源壓縮...

    luffyZh 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<