Web功能觸及的范圍太廣，但一般web開(kāi)發(fā)者在程序上線今后許多都曾遇到過(guò)功能的問(wèn)題。普遍表現(xiàn)為頁(yè)面速度開(kāi)端急劇變慢，正常訪問(wèn)時(shí)刻變的很長(zhǎng)，或則干脆給你拋出反常過(guò)錯(cuò)頁(yè)面。這里會(huì)觸及到許多或許發(fā)作的狀況，舉例幾個(gè)最主要發(fā)作的狀況：
* 數(shù)據(jù)庫(kù)銜接超越最大限制，一般表現(xiàn)為程序的銜接池滿，拒絕了與數(shù)據(jù)庫(kù)的銜接。
* 數(shù)據(jù)庫(kù)死鎖
* Web Server 超越最大銜接數(shù)（一般在虛擬主機(jī)上才會(huì)限制）
* 內(nèi)存泄漏
* Http銜接數(shù)太多，即訪問(wèn)量超越了機(jī)器和軟件規(guī)劃正常所能提供的服務(wù)
而今天共享的主要是比較傾向前端
瀏覽器懇求和響應(yīng)的過(guò)程
第一步、瀏覽器預(yù)處理
查詢Cache：讀取Cache 或者發(fā)送304懇求
第二步、查詢DNS優(yōu)化規(guī)矩--削減DNS查找
DNS緩存
瀏覽器DNS緩存 計(jì)算機(jī)DNS緩存 服務(wù)器DNS緩存（TTL）
運(yùn)用Keep-Alive特性
削減DNS查找
當(dāng)客戶端的DNS緩存為空時(shí)，DNS查找的數(shù)量與Web頁(yè)面中僅有主機(jī)名的數(shù)量持平。削減僅有主機(jī)名的數(shù)量就可以削減DNS查找的數(shù)量。
較少的域名來(lái)削減DNS查找（2-4個(gè)主機(jī)）
第三步、樹(shù)立銜接優(yōu)化規(guī)矩-- 運(yùn)用內(nèi)容分發(fā)網(wǎng)絡(luò)
美國(guó)十大Internet網(wǎng)站和CDN服務(wù)提供商
頁(yè)面靜態(tài)化，取決于發(fā)布系統(tǒng)
Ctrip運(yùn)用的China-Cache和網(wǎng)宿
優(yōu)化規(guī)矩--用域名劃分頁(yè)面內(nèi)容
按頁(yè)面內(nèi)容劃分域名，在合適的資源服務(wù)器上寄存文件
第四步、發(fā)送懇求優(yōu)化規(guī)矩-- 削減HTTP懇求
HTTP懇求30-40，兼并文件，圖片地圖，內(nèi)聯(lián)圖像
a)js文件（不超越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文件不超越4個(gè)，各頻道主頁(yè)和全站主頁(yè)不超越3個(gè)。
c) 現(xiàn)在無(wú)法處理的是allyes廣告的懇求數(shù)。
• 大量的廣告和產(chǎn)品圖片或許會(huì)形成，圖片懇求數(shù)很大，或許形成總懇求數(shù)指標(biāo)吃緊，
這個(gè)只能從規(guī)劃上搞定，需求權(quán)衡
• 現(xiàn)在老頁(yè)面或許css和js文件懇求數(shù)或許會(huì)超支
優(yōu)化規(guī)矩- – 優(yōu)化CSS Spirite
圖片地圖 Ctrip主頁(yè)比如
優(yōu)化規(guī)矩– 防止404過(guò)錯(cuò)
防止內(nèi)部無(wú)效的鏈接
規(guī)矩優(yōu)化 –不要運(yùn)用frameset，少運(yùn)用iframe
搜索引擎不友好、
即時(shí)內(nèi)容為空，加載也需求時(shí)刻、會(huì)阻止頁(yè)面加載
禁止運(yùn)用iframe引進(jìn)外部資源，不包括allyes廣告，不包括about：blank的空頁(yè)面。
第五步、等待響應(yīng)優(yōu)化規(guī)矩 --防止重定向
在重定向結(jié)束并且HTML下載結(jié)束之前，是沒(méi)有任何東西顯示給用戶的
觸及服務(wù)器負(fù)載、數(shù)據(jù)查詢、服務(wù)器端緩存等
第七步、接收數(shù)據(jù)
優(yōu)化規(guī)矩 -- 緊縮組件
HTML文檔、腳本和樣式表、XML和JSON的文本響應(yīng) 緊縮怎么作業(yè)
緊縮通常能將響應(yīng)的數(shù)據(jù)量削減將近70%
優(yōu)化規(guī)矩 -- 精簡(jiǎn)Javascript和Css
從代碼中移除不必要的字符以削減其巨細(xì)，削減加載時(shí)刻。
規(guī)矩規(guī)矩– 盡量減縮頁(yè)面巨細(xì)
頁(yè)面有必要小于150K(不含圖片）
a) 靜態(tài)文件是否gzip
b) 圖片是否緊縮優(yōu)化過(guò)
第八步、讀取Cache
優(yōu)化規(guī)矩-- 添加Expire或Cache-Control
應(yīng)用于不常常變化的組件，包括腳本、樣式表、Flash組件、圖片
Expires和Cache-Control
規(guī)矩規(guī)矩 -- 運(yùn)用外部的Js和Css文件
盡或許運(yùn)用外部Js和Css，因?yàn)樵蹅儸F(xiàn)在大部分Js和Css都做了Gzip和緩存技術(shù)，可以充分利用。
第九步、處理元素
不要對(duì)image和pdf等二進(jìn)制文件進(jìn)行g(shù)zip緊縮
第十步、烘托元素優(yōu)化規(guī)矩 -- 將樣式表放在頂部
界面原型頁(yè)面有必要將樣式表置于頁(yè)面頂部，開(kāi)發(fā)人員如無(wú)特殊原因也有必要將樣式表置于頂部。
以往大都是因?yàn)閙asterpage原因無(wú)法將所有樣式表置頂，在改版修正masterpage時(shí)，盡或許按照此原則進(jìn)行規(guī)劃。
優(yōu)化規(guī)矩 – 主張將腳本放在底部
一般瀏覽器可以答應(yīng)并行下載，取決于主機(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)化圖像
盡量運(yùn)用GIF和PNG
盡量運(yùn)用png/gif格式的圖片，png的圖片優(yōu)先，但是有必要注意如要兼容IE6，則png運(yùn)用必定要注意透明問(wèn)題。
圖片在上次前必定要先用工具緊縮優(yōu)化（png、jpg）
Javascript開(kāi)發(fā)標(biāo)準(zhǔn)
大型的項(xiàng)目在前端 JS 方面有幾個(gè)需求達(dá)成的目標(biāo)：
代碼邏輯分層防止全局變量便于多人協(xié)作開(kāi)發(fā)各部分代碼模塊化，可以按需加載堅(jiān)持全局變量的清潔可進(jìn)行單元測(cè)試
