成都網(wǎng)站開(kāi)發(fā)如何減少不必要的下載

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

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

1.評(píng)估所有依賴是否必要，權(quán)衡利弊。

2.依賴的下載路徑是否可靠，不可用時(shí)候是否會(huì)阻礙整個(gè)頁(yè)面。

3.產(chǎn)品設(shè)計(jì)時(shí)候就需要拋棄浪費(fèi)帶寬的設(shè)計(jì)。

壓縮所有可以壓縮的資源

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

優(yōu)化圖片

1.去掉不必要的圖片

2.多使用css3來(lái)代替圖片

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

4.用藝術(shù)字字體，不要用圖片

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

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

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

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

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

10.要給標(biāo)簽指明寬高，否則會(huì)導(dǎo)致reflow。

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

優(yōu)化字體

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

2.確保字體都被壓縮過(guò)。

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

關(guān)鍵渲染路徑

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

處理 HTML 標(biāo)記并構(gòu)建 DOM 樹(shù)。

處理 CSS 標(biāo)記并構(gòu)建 CSSOM 樹(shù)。

將 DOM 與 CSSOM 合并成一個(gè)渲染樹(shù)。

根據(jù)渲染樹(shù)來(lái)布局，以計(jì)算每個(gè)節(jié)點(diǎn)的幾何信息。

將各個(gè)節(jié)點(diǎn)繪制到屏幕上。

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

css

CSS文件會(huì)阻塞渲染。瀏覽器構(gòu)建好DOM樹(shù)后，必須等待CSSOM樹(shù)構(gòu)建完成。

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

避免在css文件中使用@import，因?yàn)橹挥邪琲mport的文件被下載編譯后，瀏覽器才會(huì)發(fā)現(xiàn)并下載import的css。

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

js

在CSSOM構(gòu)建完成前，js不會(huì)開(kāi)始執(zhí)行。

js也會(huì)阻止DOM樹(shù)構(gòu)建。除非在<script>標(biāo)簽上標(biāo)記async。

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

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

網(wǎng)頁(yè)標(biāo)題：成都網(wǎng)站開(kāi)發(fā)如何減少不必要的下載
標(biāo)題來(lái)源：http://www.muchs.cn/news0/322650.html

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

廣告

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