性能優(yōu)化

ajax優(yōu)化

1、緩存ajax:
a、異步并不等于及時(shí)
2、請(qǐng)求使用GET
a、- 當(dāng)使用XMLHttpRequest時(shí),而URL長(zhǎng)度不到2K,可以使用GET請(qǐng)求數(shù)據(jù),GET相比POST更快速。、

b、POST類型請(qǐng)求要發(fā)送兩個(gè)TCP數(shù)據(jù)包。
①先發(fā)送文件頭
②再發(fā)送數(shù)據(jù)。

d、GET
①類型請(qǐng)求只需要發(fā)送一個(gè)TCP數(shù)據(jù)包。
②取決于你的cookie數(shù)量。

cookie

1、減少cookie的大小
2、使用無cookie的域
①比如圖片CSS等靜態(tài)文件放在靜態(tài)資源服務(wù)器上并配置單獨(dú)域名,客戶端請(qǐng)求靜態(tài)文件的時(shí)候,減少COOKIE反復(fù)傳輸時(shí)對(duì)主域名的影響。

dom優(yōu)化

1、優(yōu)化節(jié)點(diǎn)修改。
使用cloneNode在外部更新節(jié)點(diǎn)然后再通過replace與原始節(jié)點(diǎn)互換。

var orig = document.getElementById('container');
var clone = orig.cloneNode(true);
var list = ['foo', 'bar', 'baz'];
var content;
for (var i = 0; i < list.length; i++) {
    content = document.createTextNode(list[i]);
    clone.appendChild(content);
}
orig.parentNode.replaceChild(clone, orig);

2、優(yōu)化節(jié)點(diǎn)添加

多個(gè)節(jié)點(diǎn)插入操作,即使在外面設(shè)置節(jié)點(diǎn)的元素和風(fēng)格再插入,由于多個(gè)節(jié)點(diǎn)還是會(huì)引發(fā)多次reflow。

a、優(yōu)化的方法是創(chuàng)建DocumentFragment,在其中插入節(jié)點(diǎn)后再添加到頁面。
如JQuery中所有的添加節(jié)點(diǎn)的操作如append,都是最終調(diào)用DocumentFragment來實(shí)現(xiàn)的,

createSafeFragment(document) {
        var list = nodeNames.split("|"),
               safeFrag = document.createDocumentFragment();
        if (safeFrag.createElement) {
            while (list.length) {
                safeFrag.createElement(
                    list.pop();
                );
            };
        };
    return safeFrag;
};

3、優(yōu)化css樣式轉(zhuǎn)換

如果需要?jiǎng)討B(tài)更改CSS樣式,盡量采用觸發(fā)reflow次數(shù)較少的方式。

a、 如以下代碼逐條更改元素的幾何屬性,理論上會(huì)觸發(fā)多次reflow

element.style.fontWeight = 'bold' ;
element.style.marginLeft= '30px' ; 
element.style.marginRight = '30px' ;

b、可以通過直接設(shè)置元素的className直接設(shè)置,只會(huì)觸發(fā)一次reflow

element.className = 'selectedAnchor' ;

4、減少dom元素?cái)?shù)量

a、 在console中執(zhí)行命令查看DOM元素?cái)?shù)量。

`document.getElementsByTagName( '*' ).length`

b、正常頁面的DOM元素?cái)?shù)量一般不應(yīng)該超過1000

c、DOM元素過多會(huì)使DOM元素查詢效率,樣式表匹配效率降低,是頁面性能最主要的瓶頸之一。

5、dom操作優(yōu)化

a、DOM操作性能問題主要有以下原因。
①、DOM元素過多導(dǎo)致元素定位緩慢。
②、大量的DOM接口調(diào)用。

JAVASCRIPT和DOM之間的交互需要通過函數(shù)API接口來完成,造成延時(shí),尤其是在循環(huán)語句中。

③、DOM操作觸發(fā)頻繁的reflow(layout)和repaint。
④、layout發(fā)生在repaint之前,所以layout相對(duì)來說會(huì)造成更多性能損耗。
reflow(layout)就是計(jì)算頁面元素的幾何信息。
repaint就是繪制頁面元素。
⑤、對(duì)DOM進(jìn)行操作會(huì)導(dǎo)致瀏覽器執(zhí)行回流reflow。
b、解決方案

⑥、
⑦、
⑧、
⑨、
⑩、

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評(píng)論 6 546
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,814評(píng)論 3 429
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,980評(píng)論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評(píng)論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,779評(píng)論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 56,109評(píng)論 1 330
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評(píng)論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,287評(píng)論 0 291
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,799評(píng)論 1 338
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,515評(píng)論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,750評(píng)論 1 375
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評(píng)論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,933評(píng)論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評(píng)論 1 296
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,492評(píng)論 3 400
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,703評(píng)論 2 380

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

  • AJax 優(yōu)化 緩存 Ajax 請(qǐng)求盡量使用GET, 僅取決于cookie數(shù)量 Cookie 優(yōu)化 減少Cooki...
    KeKeMars閱讀 9,370評(píng)論 5 89
  • 性能優(yōu)化的話大致有以下幾個(gè)部分:加載優(yōu)化圖片優(yōu)化CSS優(yōu)化腳本優(yōu)化渲染優(yōu)化 加載優(yōu)化 1.減少http請(qǐng)求 基本原...
    進(jìn)擊的蒸汽機(jī)閱讀 407評(píng)論 0 0
  • 前端是龐大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各種各樣的資源。前端優(yōu)...
    build1024閱讀 884評(píng)論 0 2
  • 本文首發(fā)于kmac007.me 資源壓縮合并,減少HTTP請(qǐng)求 由于HTTP是無狀態(tài)協(xié)議,意味著每次HTTP請(qǐng)求都...
    kmac007閱讀 565評(píng)論 1 1
  • 讓我再看你一遍,從南到北……我知道,那些夏天就像青春一樣回不來……讓我困在城市里紀(jì)念你……讓我再聽一遍,最美的那一...
    張小風(fēng)閱讀 677評(píng)論 8 2