前端工程師-高級WEB網(wǎng)站前端開發(fā)網(wǎng)絡(luò)傳輸指南

1、本節(jié)主要談網(wǎng)絡(luò)傳輸環(huán)節(jié)，利用HTTP 1.1的長連接特性，使得在一定程度上，服務(wù)器可以主動推送數(shù)據(jù)(減少了很多不必要的輪詢)。AD： 1.減少請求數(shù). 緩存，使用Expires 等設(shè)置過期時間;如果內(nèi)容沒有過期就不發(fā)送請求 合并小體積內(nèi)容，例如吧數(shù)量眾多的小圖片放在一個圖片，之后用css部分呈現(xiàn)(大體積的內(nèi)容就別合并了) 延遲加載;部分內(nèi)容，例如圖片在頁面呈現(xiàn)的時候才加載 (常用的就是滾動條到了以后才加載);減少不必要的請求 合并重復(fù)內(nèi)容和文件 考慮使用第三方CDN資源，例如jQuery有免費的CDN，有些用戶已經(jīng)在其他網(wǎng)站訪問過該內(nèi)容了，那么到我們的網(wǎng)站加載就更快了 (而且使用CDN降低對我

2、們服務(wù)器的壓力) 使用HTML 5 中的Local Storage等保存數(shù)據(jù)2.減少響應(yīng)內(nèi)容的體積. 適當(dāng)?shù)臅r候只返回響應(yīng)頭304 (HTTP緩存，如ETag等) 使用Gzip等壓縮文件內(nèi)容 使用免費的第三方工具，壓縮css，js和html等文件的大小 (例如我們常見的 jquery.min.js) 適當(dāng)使用Ajax操作 在適當(dāng)?shù)臅r候，將樣式,HTML和數(shù)據(jù)分離 (數(shù)據(jù)量很大的時候極大減小文件體積)1. <ul id="id"> 2.     <li style="一大堆的樣式

3、">數(shù)據(jù) </li> 3.     <li style="一大堆的樣式">數(shù)據(jù) </li> 4.     <li style="一大堆的樣式">數(shù)據(jù) </li> 5. </ul> 6. 分成HTML 樣式 和數(shù)據(jù)3部分  7.  8. HTML  9.

4、 <ul id="id"> 10.     <li></li> 11.     <!- 如果使用數(shù)據(jù)模板等方式 只需要保留一個Li 否則需要多個 -> 12. </ul> 樣式保存在CSS文件中一些基本的小常識 雖然有很多個li 不用給每個li指定class數(shù)據(jù) 使用JSON返回 (如果覺得麻煩也可以嵌入在頁面中) 選擇體積更小的數(shù)據(jù)格式，例如JS

5、ON一般就比XML體積來的小 (都經(jīng)過壓縮以后還是更小) 在設(shè)計上，只傳送變化的部分?jǐn)?shù)據(jù) (例如要獲取100條數(shù)據(jù)，可能已經(jīng)加載了90條，那么再加載10條就好了) 移除請求和響應(yīng)中不必要的HTTP Header (例如WCF Restful service中有的時候要傳遞表明當(dāng)前數(shù)據(jù)是JSON還是XML的HTTP Header) 部分功能,如壓縮會消耗CPU, 如ajax等會增加開發(fā)工作量,請謹(jǐn)慎選擇3.增加請求并發(fā)數(shù). RFC中，瀏覽器對于同一個域名下的資源只能使用2個線程同時進(jìn)行訪問(很多新的瀏覽器支持6個或者更多);解決方法是使用子域名，例如 1. <img src

6、60;="2. <img src ="3. <img src ="4. <img src ="5. <img src ="6. <img src ="7. <img src ="8. <img src =" 將一個超大的文件(例如有些人喜歡吧整個網(wǎng)站的js都放在一個文件)拆成一系列的中小文件 (有利于并發(fā)加載和緩存!)這個文件大小的Size選擇很重要 我個人建議是10k-200k (依賴于網(wǎng)絡(luò)) 上一條并沒有和1-2沖突，文件太小太多也不行，文件太少太大也不行，這是一個平衡的問題 通過分拆文件,使得最常用頁面(例如首頁)的加載速度變快了 控制加載順序，例如先加載頁面大體結(jié)構(gòu)，然后多個javascript異步請求加載數(shù)據(jù)(把一個大的html變?yōu)槎鄠€小的html片段)4.其他