性能優(yōu)化的目的:
-
增強(qiáng)用戶體驗(yàn)乌妒。但是這樣說很虛勇哗,具體來說可以是:
1.1. 加快頁面展示速度(慢)
1.2. 加快頁面運(yùn)行速度(卡)
節(jié)約服務(wù)器帶寬流量
減少服務(wù)器壓力
一個(gè)網(wǎng)頁的大概流程:
1切厘、到DNS上查詢
2养盗、然后發(fā)送請(qǐng)求
3诉植、等待服務(wù)器響應(yīng)
4袱巨、下載服務(wù)器響應(yīng)內(nèi)容
5阁谆、解析HTML、CSS愉老、JS等
6场绿、渲染HTML、CSS嫉入、JS焰盗、圖片等
7、響應(yīng)用戶點(diǎn)擊事件
1咒林、 DNS 查詢——減少網(wǎng)頁所用的域名個(gè)數(shù)熬拒,可以減少 DNS 查詢的時(shí)間
2、 發(fā)送請(qǐng)求——添加緩存垫竞、合并文件澎粟,都可以減少請(qǐng)求數(shù)量
3、等待服務(wù)器響應(yīng)——這一步的優(yōu)化只能是在 MySQL 和后臺(tái)方面做考慮了
4欢瞪、下載服務(wù)器響應(yīng)內(nèi)容——添加 Etag活烙、Expires 響應(yīng)頭,得到 304 響應(yīng)遣鼓,可以降低下載量
5啸盏、解析 HTML、CSS骑祟、JS 等——去掉無用的 HTML回懦、CSS 和 JS 即可減少解析時(shí)間
6、渲染 HTML曾我、CSS粉怕、JS 和圖片等——避免使用低效的 HTML、CSS 和 JS 即可
7抒巢、 響應(yīng)用戶的點(diǎn)擊事件等——盡量不在前端做復(fù)雜的運(yùn)算等……
性能優(yōu)化:
html部分贫贝,標(biāo)簽語義化、正確的html結(jié)構(gòu)
css部分,圖片整合稚晚,css選擇器的使用
js部分崇堵,減少全部變量的使用,高性能js代碼
減少http請(qǐng)求次數(shù)客燕;減少dom操作鸳劳,再發(fā)布之前將js和css文件進(jìn)行壓縮合并等。
一個(gè)HTTP報(bào)文由3部分組成也搓,分別是:
(1)赏廓、起始行(start line)
(2)、首部(header)
(3)傍妒、主體(body)
就是客戶端向服務(wù)器端發(fā)送請(qǐng)求幔摸,然后服務(wù)器端響應(yīng)回來
兼容:
IE和標(biāo)準(zhǔn)下有哪些兼容性的寫法
var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target