歡迎來到合肥浪訊網(wǎng)絡(luò)科技有限公司官網(wǎng)
  咨詢服務(wù)熱線:400-099-8848

悟道web規(guī)范:前端功能優(yōu)化

發(fā)布時間:2019-06-03 文章來源:本站  瀏覽次數(shù):3132

前端功能優(yōu)化完全是一個技術(shù)論題,可是對于項目的用戶體會有非常大的影響,假如你的網(wǎng)站打開要等候三五秒或者等到閱讀器提示無法連接,那網(wǎng)站哪來的流量,哪來的品牌影響和用戶忠誠度,掙錢就算了。

3s,作為判斷一個用戶忍受你網(wǎng)站速度的限度,假如超過3s,用戶已經(jīng)對這個網(wǎng)站產(chǎn)生了負面的沖突心理。
前端功能優(yōu)化和web規(guī)范有什么關(guān)系,接著第一篇 悟道web規(guī)范——統(tǒng)一思想,遵循規(guī)范 ,這是對你遵循web規(guī)范的一個補償或者是對規(guī)范的一個認可。

引用:

落后的頁面工程師系統(tǒng),美工代勞的頁面代碼,唯獨IE才干閱讀的頁面代碼,不需要寫代碼用圖形東西直接導出的頁面代碼,很多的流量耗費的頁面代碼,速度慢的像蝸牛的頁面代碼,程序員看到就頭大發(fā)麻的頁面代碼,每次改版修正都要打動干戈,重復(fù)產(chǎn)生的頁面代碼,一種讓頁面工程師和民工相同的頁面代碼。

我們當然要革新它,替代他,發(fā)明全新的頁面工程師系統(tǒng)和頁面質(zhì)量,獨立的頁面工程師完結(jié)的頁面代碼,跨過渠道的頁面代碼,只要能解析頁面的設(shè)備都能夠拜訪和閱讀,手寫的頁面代碼,整齊劃一,層次分明,最低流量耗費的頁面代碼,程序員喜歡的頁面代碼,拜訪速度超快的頁面代碼,改版可重復(fù)利用的頁面代碼,讓頁面工程師抬起頭來,自豪的稱自己是工程師,書寫的也是計算機代碼的頁面代碼。
前端優(yōu)化正好給Web規(guī)范供給了一個查驗的機會,用“實踐是查驗真理的唯一規(guī)范”來判斷規(guī)范化到底好欠好,對不對。

前端功能優(yōu)化了解yahoo功能優(yōu)化N條的同學應(yīng)該不會陌生,裝置一個YSlow評分并對照著優(yōu)化就能夠了,可是有沒有想過為什么要這么做就能夠提升速度,這些與Web規(guī)范有沒有某種關(guān)聯(lián)或者因果呢。

我把這些個條目分紅三類,服務(wù)端運算優(yōu)化,傳輸優(yōu)化,客戶端運算優(yōu)化:

第一類,服務(wù)器端優(yōu)化

服務(wù)器端便是對你的網(wǎng)站的動態(tài)語言的履行(asp,php),數(shù)據(jù)庫查詢,存儲等速度,總的來說便是輸入/輸出的運算。這些跟前端沒關(guān)系,可是影響著前端。YSlow里面沒有,鬼知道你網(wǎng)站的服務(wù)器功能如何,看不出來,就自行優(yōu)化服務(wù)器功能,數(shù)據(jù)庫功能,多買點服務(wù)器擴容。
yslow有一條盡早改寫 Buffer (Flush the Buffer Early),貌似是不等html完結(jié)生成就傳輸。
進步域名的DNS解析速度。削減DNS的解析個數(shù)。這個欠好歸類,暫時放到這里吧。

第二類,傳輸優(yōu)化

這類是大頭,很煩,首先是字節(jié),字節(jié)越小越好,怎么能小下來,最有效的方法便是google的計劃,把主頁做的極其精簡,圖片,html,靜態(tài)文件都很小,再便是緩存,把文件放到本地緩存區(qū)讀取。還有http請求數(shù),削減文件傳輸中的排隊等候。

字節(jié)優(yōu)化

  1. 削減冗余html,結(jié)構(gòu)化,語義化的html來實現(xiàn),行為,表現(xiàn),結(jié)構(gòu)別離,獨立的html文件將變得很小。
  2. 緊縮文本文件,css,html,js去掉注釋、空格、換行等。
  3. 下降圖片字節(jié),選擇適宜的圖片類型,png-8是一個好東西,再用東西將圖片進行緊縮去掉,比方png-8的緊縮東西。用適宜的圖片尺寸,不要把大圖操控一下寬高就用上了。
  4. gzip緊縮一下,減小服務(wù)器端傳輸?shù)娇蛻舳藭r分的字節(jié)。
  5. flash文件和flash+xml的動態(tài)flash也減小字節(jié)

緩存
服務(wù)器端裝備一下,進步緩存的命中率和把不經(jīng)常修正的文件緩存了。
Add Expires headers、Etags、ajax運用get方法便于緩存。
把能別離出來的css,js別離成外部文件便于緩存。
使flash和xml文件可緩存。
打通不同運營商的約束
CDN進步不同類型運營商的網(wǎng)絡(luò)傳輸速度,電信,網(wǎng)通,鐵通,教育網(wǎng)通通搞定。

請求數(shù)
削減文件請求數(shù),能合并到一同的合并一下,css,js,圖片等,減小排隊等候和服務(wù)器端開銷。
分域進步一起加載數(shù),優(yōu)化排隊等候。
防止404無效請求數(shù)。
防止重定向。

延遲加載和預(yù)載
把暫時不用的文件等主體頁面加載完了再加載,把用戶稍后要看閱讀的內(nèi)容預(yù)先加載進來,相冊閱讀便是很好的例子,先用小圖片放大再把大圖展現(xiàn)出來,看本張圖片時把下一張預(yù)載進來等等。

第三類:客戶端優(yōu)化

  1. 討厭的IE的濾鏡和CSS expressions少用,當心把閱讀器搞掛,CUP 100%死機。
  2. CSS放到前面,js能放到后邊的放在代碼后邊。將頁面盡早展現(xiàn)給用戶。
  3. 削減iframe的運用,防止CPU扛不住。
  4. 削減DOM個數(shù),減低閱讀器解析壓力。
  5. 運用而不是@importChooseover @import,在 IE 中 @import 指令等同于把 link 符號寫在 HTML 的底部。而這與第一條相違背。
  6. 進步j(luò)s的履行效率,論題太大不提了
  7. 縮小 Cookie,針對 Web 組件運用域名無關(guān)性的 Cookie (Use Cookie-free Domains for Components)
  8. 還有小圖片的repeat布景會進步閱讀器的CPU占用。
  9. 合理的DOM排序,把重要的內(nèi)容代碼前置,優(yōu)先加載。

再便是些沒對號入座的yahoo功能優(yōu)化的條目。至此能夠查驗到頁面工程師不是蓋的,需要對代碼、文件,http協(xié)議,緩存,服務(wù)器等精準的學習和操控,達到供給用戶最最根本的體會——拜訪速度的體會。

Web規(guī)范的別離思想和結(jié)構(gòu)化語義化html促成了以上很多條的施行,這是美工年代所不能比擬的。

上一條:接連字符主動換行的處理方...

下一條:前進規(guī)劃水平的9大訣竅...