91啪啪啪啪啪,欧美激情综合网

前端性能優(yōu)化大致分為以下幾個(gè)點(diǎn)

分別以一句話簡(jiǎn)單描述

網(wǎng)絡(luò)加載類

減少 HTTP 資源請(qǐng)求次數(shù)和單個(gè)請(qǐng)求大小，盡可能合并資源(靜態(tài)資源圖片，JavaScript或css代碼)；
將JavaScript和css放到外部文件中（在 HTML 文件中引用外部資源可以有效利用瀏覽器的靜態(tài)資源緩存）
避免頁(yè)面中空的 href 和 src當(dāng)標(biāo)簽的 href 屬性為空（瀏覽器在渲染的過(guò)程中仍會(huì)將 href 屬性或 src 屬性中的空內(nèi)容進(jìn)行加載，直至加載失敗，這樣就阻塞了頁(yè)面中其他資源的下載進(jìn)程，而且最終加載到的內(nèi)容是無(wú)效的，因此要盡量避免）
減少頁(yè)面重定向
使用靜態(tài)資源 CDN 來(lái)存儲(chǔ)文件如果條件允許，可以利用 CDN 網(wǎng)絡(luò)加快同一個(gè)地理區(qū)域內(nèi)重復(fù)靜態(tài)資源文件的響應(yīng)下載速度，縮短資源請(qǐng)求時(shí)間。
使用可緩存的ajax。使用get方法效率會(huì)比post方法高。減少cookie大小

$.ajax({
    url : url,
    type : 'get',
    cache : true, //推薦使用緩存
    data : {},
    success (){//...},
    error (){//...}
});

style放置于頁(yè)面頂部?jī)?yōu)先加載, script放置于html底部，減少頁(yè)面的重繪和回流（頁(yè)面渲染原理）
盡量預(yù)先設(shè)定圖片等大小在加載大量的圖片元素時(shí)，盡量預(yù)先限定圖片的尺寸大小，否則在圖片加載過(guò)程中會(huì)更新圖片的排版信息，產(chǎn)生大量的重排
盡可能的是dom層級(jí)減少，盡量減少使用JS動(dòng)畫JS 直接操作 DOM 極容易引起頁(yè)面的重排。
盡量避免在選擇器末尾添加通配符（渲染樹(shù)的過(guò)程是從右到左的逆向匹配）

為 HTML 指定 Cache-Control 或 Expires，為 HTML 內(nèi)容設(shè)置 Cache-Control 或 Expires 可以將 HTML 內(nèi)容緩存起來(lái)，避免頻繁向服務(wù)器端發(fā)送請(qǐng)求

<meta http-equiv="Cache-Control" content="max-age=7200">
<meta http-equiv="Expires" content="Mon,20Jul201623:00:00GMT">

合理設(shè)置 Etag 和 Last-Modified合理設(shè)置 Etag 和 Last-Modified 使用瀏覽器緩存，對(duì)于未修改的文件，靜態(tài)資源服務(wù)器會(huì)向?yàn)g覽器端返回304，讓瀏覽器從緩存中讀取文件，減少 Web 資源下載的帶寬消耗并降低服務(wù)器負(fù)載。

<meta http-equiv="last-modified" content="Sun,05 Nov 2017 13:45:57 GMT">

<!--設(shè)置viewport不縮放-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">