【北京網(wǎng)站制作】高性能Web開發(fā)之網(wǎng)絡(luò)傳輸鏈路
  • 更新時(shí)間:2024-11-06 13:29:57
  • 網(wǎng)站建設(shè)
  • 發(fā)布時(shí)間:1年前
  • 412

高性能web開發(fā)之網(wǎng)絡(luò)傳輸環(huán)節(jié)

1.減少請求數(shù).

緩存,使用Expires等設(shè)置過期時(shí)間;如果內(nèi)容沒有過期,則不會(huì)發(fā)送請求

合并小體積的內(nèi)容,比如將大量的小圖片拼成一張圖片,然后用CSS渲染(不要合并大體積的內(nèi)容)

延遲加載;一些內(nèi)容,比如圖片,是在頁面渲染的時(shí)候加載的(常用的是滾動(dòng)條到了之后加載);減少不必要的請求

合并重復(fù)的內(nèi)容和文件

考慮使用第三方CDN 資源。例如,jQuery 有一個(gè)免費(fèi)的CDN。有些用戶已經(jīng)訪問過其他網(wǎng)站的內(nèi)容,所以我們的網(wǎng)站加載速度會(huì)更快(并使用CDN來減輕我們服務(wù)器的壓力)

使用HTML 5 中的Local Storage 來保存數(shù)據(jù)

2.減少響應(yīng)內(nèi)容的體積.

只在適當(dāng)?shù)臅r(shí)候返回響應(yīng)頭304(HTTP緩存,如ETag等)

使用Gzip等壓縮文件內(nèi)容

使用免費(fèi)的第三方工具壓縮css、js、html文件的大小(比如我們常用的jquery.min.js)

適當(dāng)使用Ajax操作

適當(dāng)時(shí),將樣式、HTML 和數(shù)據(jù)分開(數(shù)據(jù)量大時(shí)大大減小文件大?。?

ulid='id'

listyle='好多款式'data/li

listyle='好多款式'data/linb

sp;
  • ????<li?style="一大堆的樣式">數(shù)據(jù)?</li>?
  • </ul>?
  • 分成HTML?樣式?和數(shù)據(jù)3部分 ?
  • ?
  • HTML ?
  • <ul?id="id">?
  • ????<li></li>?
  • ????<!--?如果使用數(shù)據(jù)模板等方式?只需要保留一個(gè)Li?否則需要多個(gè)?-->?
  • </ul>?
  • 樣式保存在CSS文件中一些基本的小常識(shí) 雖然有很多個(gè)li 不用給每個(gè)li指定class

    數(shù)據(jù)

    ◆ 使用JSON返回 (如果覺得麻煩也可以嵌入在頁面中)

    ◆ 選擇體積更小的數(shù)據(jù)格式,例如JSON一般就比XML體積來的小 (都經(jīng)過壓縮以后還是更小)

    ◆ 在設(shè)計(jì)上,只傳送變化的部分?jǐn)?shù)據(jù) (例如要獲取100條數(shù)據(jù),可能已經(jīng)加載了90條,那么再加載10條就好了)

    ◆ 移除請求和響應(yīng)中不必要的HTTP Header (例如WCF Restful service中有的時(shí)候要傳遞表明當(dāng)前數(shù)據(jù)是JSON還是XML的HTTP Header)

    ◆ 部分功能,如壓縮會(huì)消耗CPU, 如ajax等會(huì)增加開發(fā)工作量,請謹(jǐn)慎選擇

    3.增加請求并發(fā)數(shù).

    ◆ RFC中,瀏覽器對于同一個(gè)域名下的資源只能使用2個(gè)線程同時(shí)進(jìn)行訪問(很多新的瀏覽器支持6個(gè)或者更多);解決方法是使用子域名,例如1.abc.com 2.abc.com

    1. <img?src?="1.abc.com/1.png"?/>?
    2. <img?src?="1.abc.com/2.png"?/>?
    3. <img?src?="2.abc.com/3.png"?/>?
    4. <img?src?="2.abc.com/4.png"?/>?
    5. <img?src?="3.abc.com/5.png"?/>?
    6. <img?src?="3.abc.com/6.png"?/>?
    7. <img?src?="4.abc.com/7.png"?/>?
    8. <img?src?="4.abc.com/8.png"?/>?

    ◆ 將一個(gè)超大的文件(例如有些人喜歡吧整個(gè)網(wǎng)站的js都放在一個(gè)文件)拆成一系列的中小文件 (有利于并發(fā)加載和緩存!)這個(gè)文件大小的Size選擇很重要 我個(gè)人建議是10k-200k (依賴于網(wǎng)絡(luò))

    ◆ 上一條并沒有和1-2沖突,文件太小太多也不行,文件太少太大也不行,這是一個(gè)平衡的問題

    ◆ 通過分拆文件,使得最常用頁面(例如首頁)的加載速度變快了

    ◆ 控制加載順序,例如先加載頁面大體結(jié)構(gòu),然后多個(gè)javascript異步請求加載數(shù)據(jù)(把一個(gè)大的html變?yōu)槎鄠€(gè)小的html片段)

    4.其他特殊技術(shù).

    ◆ 利用HTTP 1.1的長連接特性,使得在一定程度上,服務(wù)器可以主動(dòng)推送數(shù)據(jù)(減少了很多不必要的輪詢)

    5.工具.

    ◆ Fiddler (Free)

    ◆ FireDebug (Free)

    ◆ HttpWatch

    部分內(nèi)容引用自MSDN和其他第三方文章..

    標(biāo)簽:北京網(wǎng)站制作 高端網(wǎng)站建設(shè)

    我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn),每一個(gè)項(xiàng)目承諾做到滿意為止,多一次對比,一定讓您多一份收獲!

    本文章出于推來客官網(wǎng),轉(zhuǎn)載請表明原文地址:https://www.tlkjt.com/web/13824.html
    推薦文章

    在線客服

    掃碼聯(lián)系客服

    3985758

    回到頂部