雖然當下網(wǎng)絡服務提供商都在把流量費用做到即為低廉的費用，可能有時用戶會認為這么點流量我不在乎，但是現(xiàn)實情況并非如此，在我們網(wǎng)站開發(fā)之初，我們就會考慮用戶體驗，因為流量過大加載慢，會給用戶帶來很差的體驗。下面我們就和創(chuàng)新互聯(lián)的網(wǎng)站開發(fā)工程師一起來了解一下那些是不必要的下載吧。

最好的優(yōu)化，便是根本不下載資源。所以要盡量減少比不要的資源的上傳與下載。

1.評估所有依賴是否必要，權衡利弊。

2.依賴的下載路徑是否可靠，不可用時候是否會阻礙整個頁面。

3.產(chǎn)品設計時候就需要拋棄浪費帶寬的設計。

壓縮所有可以壓縮的資源

代碼自不用說，都是文本，全部壓縮。

優(yōu)化圖片

1.去掉不必要的圖片

2.多使用css3來代替圖片

3.使用壓縮率更高的圖片。特別是gif動圖，一些視頻格式（H.264或WebM）的體積比gif小很多。

4.用藝術字字體，不要用圖片

5.仔細權衡圖片和文字的關系。要表達一個意思，可能一圖勝千言。多了一張圖片，反而節(jié)省了大量文字。

6.使用progressive jpeg。相比隨著數(shù)據(jù)下載從上到下顯示的baseline jpeg，progressive jpeg是由模糊到清晰，用戶體驗好，也不會導致reflow。

7.圖片分辨率要盡可能小，避免圖片分辨率大于顯示分辨率。

8.為使用更新瀏覽器的用戶提供更現(xiàn)代的圖片格式。

9.多種分辨率的位圖供不同頁面大小使用。

10.要給標簽指明寬高，否則會導致reflow。

11.使用HTTP/2。比如，精靈圖是由很多小圖片組成的一張大圖片，可以減少http請求。但是卻難以緩存，修改一個小圖片，導致所有小圖片緩存失效。HTTP/2，一個鏈接內(nèi)可以發(fā)起多個請求，便無需使用精靈圖。

優(yōu)化字體

1.@font-face 中unicode-range可以制定字符范圍，用來避免下載不需要的語言的字符。

2.確保字體都被壓縮過。

3.用@font-face的display屬性和FontFace對象管理好字體加載時的邏輯。

關鍵渲染路徑

瀏覽器渲染一張網(wǎng)頁通過以下步驟。

處理 HTML 標記并構建 DOM 樹。

處理 CSS 標記并構建 CSSOM 樹。

將 DOM 與 CSSOM 合并成一個渲染樹。

根據(jù)渲染樹來布局，以計算每個節(jié)點的幾何信息。

將各個節(jié)點繪制到屏幕上。

優(yōu)化關鍵渲染路徑，便是指優(yōu)化這個渲染過程，讓網(wǎng)頁盡快呈現(xiàn)出來。

css

CSS文件會阻塞渲染。瀏覽器構建好DOM樹后，必須等待CSSOM樹構建完成。

在文檔頂部防止外聯(lián)CSS的標簽，讓瀏覽器盡快請求CSS文件。

避免在css文件中使用@import，因為只有包含import的文件被下載編譯后，瀏覽器才會發(fā)現(xiàn)并下載import的css。

可以考慮使用內(nèi)聯(lián)CSS，無需額外請求，不會阻塞渲染。

js

在CSSOM構建完成前，js不會開始執(zhí)行。

js也會阻止DOM樹構建。除非在<script>標簽上標記async。

用Chrome開發(fā)者工具的audits檢查網(wǎng)頁。

以上就是創(chuàng)新互聯(lián)的網(wǎng)站開發(fā)工程師為大家?guī)淼年P于網(wǎng)站建設中如何有效的節(jié)省資源，為加載做好優(yōu)化的全部介紹，希望大家能夠喜歡。

網(wǎng)頁標題：成都網(wǎng)站開發(fā)如何減少不必要的下載
標題來源：http://www.rwnh.cn/news0/322650.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、服務器托管、全網(wǎng)營銷推廣、網(wǎng)站策劃、用戶體驗、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)