Web性能涉及的范圍太廣，但一般web開發(fā)者在程序上線以后很多都曾遇到過(guò)性能的問(wèn)題。普遍表現(xiàn)為頁(yè)面速度開始急劇變慢，正常訪問(wèn)時(shí)間變的很長(zhǎng)，或則干脆給你拋出異常錯(cuò)誤頁(yè)面。這里會(huì)涉及到很多可能發(fā)生的情況，舉例幾個(gè)最主要發(fā)生的情況： * 數(shù)據(jù)庫(kù)連接超過(guò)最大限制，一般表現(xiàn)為程序的連接池滿，拒絕了與數(shù)據(jù)庫(kù)的連接。 * 數(shù)據(jù)庫(kù)死鎖 * Web Server 超過(guò)最大連接數(shù)(一般在虛擬主機(jī)上才會(huì)限制) * 內(nèi)存泄漏 * Http連接數(shù)太多，即訪問(wèn)量超過(guò)了機(jī)器和軟件設(shè)計(jì)正常所能提供的服務(wù)? 而今天分享的主要是比較偏向前端

瀏覽器請(qǐng)求和響應(yīng)的過(guò)程

第一步、瀏覽器預(yù)處理

查詢Cache：讀取Cache 或者發(fā)送304請(qǐng)求

第二步、查詢DNS

優(yōu)化規(guī)則--減少DNS查找

DNS緩存

瀏覽器DNS緩存 計(jì)算機(jī)DNS緩存 服務(wù)器DNS緩存(TTL)

使用Keep-Alive特性?
減少DNS查找

當(dāng)客戶端的DNS緩存為空時(shí)，DNS查找的數(shù)量與Web頁(yè)面中唯一主機(jī)名的數(shù)量相等。減少唯一主機(jī)名的數(shù)量就可以減少DNS查找的數(shù)量。

較少的域名來(lái)減少DNS查找(2-4個(gè)主機(jī))

第三步、建立連接

優(yōu)化規(guī)則-- 使用內(nèi)容分發(fā)網(wǎng)絡(luò)

美國(guó)十大Internet網(wǎng)站和CDN服務(wù)提供商

頁(yè)面靜態(tài)化,取決于發(fā)布系統(tǒng)

Ctrip使用的China-Cache和網(wǎng)宿

優(yōu)化規(guī)則--用域名劃分頁(yè)面內(nèi)容?

按頁(yè)面內(nèi)容劃分域名，在合適的資源服務(wù)器上存放文件

第四步、發(fā)送請(qǐng)求

優(yōu)化規(guī)則-- 減少HTTP請(qǐng)求

?HTTP請(qǐng)求30-40,合并文件,圖片地圖,內(nèi)聯(lián)圖像

a)js文件(不超過(guò)7個(gè))

1.tuna_090501_base.js和tuna_090501_module.js(拆分tuna_090501.js) 2.數(shù)據(jù)文件js(1-2個(gè)) 3.頻道公用js(1個(gè))和頁(yè)面私有js(1-2個(gè))

不含ga.js、uiscript.asp和外鏈其他網(wǎng)站的js

b) css文件不超過(guò)4個(gè)，各頻道首頁(yè)和全站首頁(yè)不超過(guò)3個(gè)。

c) 目前無(wú)法解決的是allyes廣告的請(qǐng)求數(shù)。

? ? 大量的廣告和產(chǎn)品圖片可能會(huì)造成，圖片請(qǐng)求數(shù)很大，可能造成總請(qǐng)求數(shù)指標(biāo)吃緊，

??? 這個(gè)只能從設(shè)計(jì)上搞定，需要權(quán)衡

? 目前老頁(yè)面可能css和js文件請(qǐng)求數(shù)可能會(huì)超標(biāo)

優(yōu)化規(guī)則- – 優(yōu)化CSS Spirite

??圖片地圖?? Ctrip首頁(yè)例子?

優(yōu)化規(guī)則– 避免404錯(cuò)誤

避免內(nèi)部無(wú)效的鏈接

規(guī)則優(yōu)化 –不要使用frameset，少使用iframe

搜索引擎不友好、?

即時(shí)內(nèi)容為空，加載也需要時(shí)間、會(huì)阻止頁(yè)面加載

禁止使用iframe引入外部資源，不包括allyes廣告，不包括about:blank的空頁(yè)面。

第五步、等待響應(yīng)

優(yōu)化規(guī)則 --避免重定向

在重定向完畢并且HTML下載完畢之前，是沒(méi)有任何東西顯示給用戶的 涉及服務(wù)器負(fù)載、數(shù)據(jù)查詢、服務(wù)器端緩存等

第七步、接收數(shù)據(jù)

優(yōu)化規(guī)則 -- 壓縮組件

HTML文檔、腳本和樣式表、XML和JSON的文本響應(yīng) 壓縮如何工作
壓縮通常能將響應(yīng)的數(shù)據(jù)量減少將近70%

優(yōu)化規(guī)則 -- 精簡(jiǎn)Javascript和Css

從代碼中移除不必要的字符以減少其大小，減少加載時(shí)間。

規(guī)則規(guī)則– 盡量縮減頁(yè)面大小

頁(yè)面必須小于150K(不含圖片)
a) 靜態(tài)文件是否gzip
b) 圖片是否壓縮優(yōu)化過(guò)

第八步、讀取Cache

優(yōu)化規(guī)則-- 添加Expire或Cache-Control

應(yīng)用于不經(jīng)常變化的組件，包括腳本、樣式表、Flash組件、圖片
Expires和Cache-Control

規(guī)則規(guī)則 -- 使用外部的Js和Css文件

盡可能使用外部Js和Css，因?yàn)槲覀兡壳按蟛糠諮s和Css都做了Gzip和緩存技術(shù)，可以充分利用。

第九步、處理元素

不要對(duì)image和pdf等二進(jìn)制文件進(jìn)行g(shù)zip壓縮

?第十步、渲染元素

優(yōu)化規(guī)則 -- 將樣式表放在頂部

?界面原型頁(yè)面必須將樣式表置于頁(yè)面頂部，開發(fā)人員如無(wú)特殊原因也必須將樣式表置于頂部。?

以往多數(shù)是因?yàn)閙asterpage原因無(wú)法將所有樣式表置頂，在改版修改masterpage時(shí)，盡可能按照此原則進(jìn)行設(shè)計(jì)。?

優(yōu)化規(guī)則 – 建議將腳本放在底部

?一般瀏覽器可以允許并行下載，取決于主機(jī)個(gè)數(shù)、帶寬等

(默認(rèn)情況下，IE是2個(gè)而FF是8個(gè))

下載腳本時(shí)并行下載實(shí)際上是被禁用的。

優(yōu)化規(guī)則-- 移除重復(fù)腳本

?必須為0?

優(yōu)化規(guī)則 -- 避免CSS表達(dá)式

影響瀏覽器渲染時(shí)間

優(yōu)化規(guī)則 – 優(yōu)化圖像

盡量使用GIF和PNG

盡量使用png/gif格式的圖片，png的圖片優(yōu)先，但是必須注意如要兼容IE6，則png使用一定要注意透明問(wèn)題。

圖片在上次前一定要先用工具壓縮優(yōu)化(png、jpg)

?Javascript開發(fā)規(guī)范

大型的項(xiàng)目在前端 JS 方面有幾個(gè)需要達(dá)成的目標(biāo)：?

代碼邏輯分層

避免全局變量

便于多人協(xié)作開發(fā)

各部分代碼模塊化，可以按需加載

保持全局變量的清潔

可進(jìn)行單元測(cè)試

總結(jié)

以上是生活随笔為你收集整理的前端性能优化和规范的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。