性能優(yōu)化

1.前端性能優(yōu)化的方法:

? ? 1)請減少HTTP請求

? ? 2)理解 Repaint 和 Reflow(也就是重繪和重排)

? ? Repaint就是一個元素的外觀被改變绽快。如果Reflow的過于頻繁沽瞭,CPU使用率就會噌噌的往上漲

3)減少對DOM的操作:提高網(wǎng)頁性能就是要降低“重排”和重繪的頻率和成本栗竖,盡量少觸發(fā)重新渲染

4)使用JSON格式來進行數(shù)據(jù)交換:json輕量級別的數(shù)據(jù)交換格式究飞,獨立于語言的文本格式舌劳,同時json是原生JavaScript原生格式研叫,意味著在JavaScript中處理json不需要任何特殊的api或工具包。

5)高效使用HTML標簽和CSS樣式

6)使用CDN加速(內(nèi)容分發(fā)網(wǎng)絡):"其基本思路是盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)关面,使內(nèi)容傳輸?shù)母焯古邸⒏€(wěn)定。通過在網(wǎng)絡各處放置節(jié)點服務器所構(gòu)成的在現(xiàn)有的互聯(lián)網(wǎng)基礎之上的一層智能虛擬網(wǎng)絡等太,CDN系統(tǒng)能夠?qū)崟r地根據(jù)網(wǎng)絡流量和各節(jié)點的連接捂齐、負載狀況以及到用戶的距離和響應時間等綜合信息將用戶的請求重新導向離用戶最近的服務節(jié)點上。

7)將css和js放到外部文件中引用缩抡,CSS放頭部驹愚,JS放尾

8)精簡CSS和JS文件

9)壓縮圖片和使用圖片的Sprite技術(shù)

圖片壓縮的方式有:縮小圖片分辨率、改變圖片格式啡彬、降低圖片保存質(zhì)量

圖片精靈(Sprite)合并成雪碧圖減少圖片的請求數(shù)量

10)注意控制Cookie的大小和污染:

因為Cookie是本地的磁盤文件杆煞,每次瀏覽器都會去讀取相應的Cookie,所以建議去除不必要的Coockie蘑险,使Coockie體積盡量小以減少對用戶響應的影響滴肿;

使用Cookie跨域操作時注意在適應級別的域名上設置coockie以便使子域名不受其影響

Cookie是有生命周期的,所以請注意設置合理的過期時間佃迄,合理地Expire時間和不要過早去清除coockie泼差,都會改善用戶的響應時間贵少。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市堆缘,隨后出現(xiàn)的幾起案子滔灶,更是在濱河造成了極大的恐慌,老刑警劉巖套啤,帶你破解...
    沈念sama閱讀 211,948評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宽气,死亡現(xiàn)場離奇詭異,居然都是意外死亡潜沦,警方通過查閱死者的電腦和手機萄涯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來唆鸡,“玉大人涝影,你說我怎么就攤上這事≌迹” “怎么了燃逻?”我有些...
    開封第一講書人閱讀 157,490評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長臂痕。 經(jīng)常有香客問我伯襟,道長,這世上最難降的妖魔是什么握童? 我笑而不...
    開封第一講書人閱讀 56,521評論 1 284
  • 正文 為了忘掉前任姆怪,我火速辦了婚禮,結(jié)果婚禮上澡绩,老公的妹妹穿的比我還像新娘稽揭。我一直安慰自己,他們只是感情好肥卡,可當我...
    茶點故事閱讀 65,627評論 6 386
  • 文/花漫 我一把揭開白布溪掀。 她就那樣靜靜地躺著,像睡著了一般步鉴。 火紅的嫁衣襯著肌膚如雪揪胃。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,842評論 1 290
  • 那天氛琢,我揣著相機與錄音只嚣,去河邊找鬼。 笑死艺沼,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的蕴掏。 我是一名探鬼主播障般,決...
    沈念sama閱讀 38,997評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼调鲸,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了挽荡?” 一聲冷哼從身側(cè)響起藐石,我...
    開封第一講書人閱讀 37,741評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎定拟,沒想到半個月后于微,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,203評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡青自,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,534評論 2 327
  • 正文 我和宋清朗相戀三年株依,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片延窜。...
    茶點故事閱讀 38,673評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡恋腕,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出逆瑞,到底是詐尸還是另有隱情荠藤,我是刑警寧澤,帶...
    沈念sama閱讀 34,339評論 4 330
  • 正文 年R本政府宣布获高,位于F島的核電站哈肖,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏念秧。R本人自食惡果不足惜淤井,卻給世界環(huán)境...
    茶點故事閱讀 39,955評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望出爹。 院中可真熱鬧庄吼,春花似錦、人聲如沸严就。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽梢为。三九已至渐行,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間铸董,已是汗流浹背祟印。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留粟害,地道東北人蕴忆。 一個月前我還...
    沈念sama閱讀 46,394評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像悲幅,于是被迫代替她去往敵國和親套鹅。 傳聞我的和親對象是個殘疾皇子站蝠,可洞房花燭夜當晚...
    茶點故事閱讀 43,562評論 2 349

推薦閱讀更多精彩內(nèi)容

  • AJax 優(yōu)化 緩存 Ajax 請求盡量使用GET, 僅取決于cookie數(shù)量 Cookie 優(yōu)化 減少Cooki...
    KeKeMars閱讀 9,347評論 5 89
  • 性能優(yōu)化的話大致有以下幾個部分:加載優(yōu)化圖片優(yōu)化CSS優(yōu)化腳本優(yōu)化渲染優(yōu)化 加載優(yōu)化 1.減少http請求 基本原...
    進擊的蒸汽機閱讀 394評論 0 0
  • 前端的頁面主要包括xhtml,css,js。其實xhtml就是現(xiàn)實中所談到的內(nèi)容卓鹿,頁面的內(nèi)容:文字菱魔,圖片,flas...
    shonn_zhang閱讀 413評論 0 7
  • 前端優(yōu)化是復雜的吟孙,針對方方面面的資源都有不同的方式澜倦。那么,前端優(yōu)化的目的是什么? 1.從用戶角度而言杰妓,優(yōu)化能夠讓頁...
    西瓜w閱讀 302評論 0 0
  • 本文首發(fā)于kmac007.me 資源壓縮合并藻治,減少HTTP請求 由于HTTP是無狀態(tài)協(xié)議,意味著每次HTTP請求都...
    kmac007閱讀 562評論 1 1