前端性能

作為一個開發(fā)者,我們知道結束網(wǎng)頁的膨脹是一件簡單的事情道批。但是加載一個頁面遠比傳送相同大小的數(shù)據(jù)要的時間多的多。一旦流浪器下載了我們的頁面腳本朴读,他就必須解析和運行它們屹徘。在這里我就深入的來討論JavaScript的這個階段,為什么它會減慢應用程序的啟動速度并且如何的去修復它衅金。

從加載頁面的過程中,我們觀察到是在解析和編譯javascript的過程中并沒有花費很多的時間簿煌。我們看到死腳本立即的被解析和執(zhí)行了氮唯。但是事實并非如此。下面是V8引擎的工作原理姨伟。

V8引擎工作簡化視圖

看看那些主要的階段惩琉。

是什么讓我們的網(wǎng)絡應用變慢了?

解析夺荒、編譯腳本和執(zhí)行腳本花費了JavaScript引擎的大量時間瞒渠。這延遲了我們與站點交互的時間〖级螅可以想象一下伍玖,但我們在看到一個按鈕時卻不可點擊只能干等著,這大大的降低了用戶體驗剿吻。


V8引擎如何工作的簡化視圖窍箍。這是我們正在努力的理想化管道。

一些關鍵性的代碼控制著啟動的時間丽旅。實際過程中椰棘,在類似于facebook這樣的大網(wǎng)站中v8花費了大量的時間在進行代碼的解析與運行。

粉紅色區(qū)域(JavaScript)代表在V8和Blink的C++榄笙,而橙色和黃色代表解析和編譯邪狞。

一般網(wǎng)站的JavaScript解析和編譯瓶頸是什么?

腳本的大小很重要茅撞,但是它并不能代表一切帆卓。就比如說200kb我們的js腳本!==200kb別人的js腳本解析與編譯時間巨朦。代碼的質量也是一個很重要的原因。

目前測量JavaScript解析和編譯工具

Chrome DevTools
下面是Chrome加載的時間


0_rWkYJzc6Cp0r3Xkr.jpeg

Chrome Tracing
關于跟蹤:Chrome的低級別的跟蹤工具允許我們使用disabled-by-default-v8鳞疲。runtime_stats范疇更深入地了解那里的V8花時間罪郊。

0_P-_pLIITtYJRikRN.jpeg

WebPageTest

image.png

WebPageTest的“處理故障”頁面包括洞察V8編譯,evaluatescript和函數(shù)調用的時候我們做了一個跟蹤(捕捉工具開發(fā)時間表啟用)尚洽。
我們現(xiàn)在也可以得到運行時調用屬性指定disabled-by-default-v8悔橄。runtime_stats作為自定義跟蹤類

我們可以做什么來降低JavaScript解析時間呢?

  1. 越少的腳本需要解析的時間越少腺毫。
  2. 代碼拆分: 只加載用戶所需要的代碼癣疟。實現(xiàn)代碼懶加載,避免解析太多的javasript潮酒。
  3. 腳本流:在過去睛挚,V8告訴開發(fā)者使用異步/推遲選擇腳本流的解析10–20%之間時間的改進。這允許HTML解析器至少提前檢測資源急黎,將工作推送到腳本流線程扎狱,而不是停止文檔解析。現(xiàn)在勃教,這也是為解析器阻塞腳本所做的淤击,我認為這里沒有任何可操作的地方。V8建議早期加載較大的捆綁包故源,因為只有一個流光線程(稍后會詳細介紹)
  4. 庫和框架污抬。
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市绳军,隨后出現(xiàn)的幾起案子印机,更是在濱河造成了極大的恐慌,老刑警劉巖门驾,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件射赛,死亡現(xiàn)場離奇詭異,居然都是意外死亡猎唁,警方通過查閱死者的電腦和手機咒劲,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來诫隅,“玉大人腐魂,你說我怎么就攤上這事≈鹞常” “怎么了蛔屹?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長豁生。 經(jīng)常有香客問我兔毒,道長漫贞,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任育叁,我火速辦了婚禮迅脐,結果婚禮上,老公的妹妹穿的比我還像新娘豪嗽。我一直安慰自己谴蔑,他們只是感情好,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布龟梦。 她就那樣靜靜地躺著隐锭,像睡著了一般。 火紅的嫁衣襯著肌膚如雪计贰。 梳的紋絲不亂的頭發(fā)上钦睡,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天,我揣著相機與錄音躁倒,去河邊找鬼荞怒。 笑死,一個胖子當著我的面吹牛秧秉,可吹牛的內容都是我干的挣输。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼福贞,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了停士?” 一聲冷哼從身側響起挖帘,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎恋技,沒想到半個月后拇舀,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡蜻底,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年骄崩,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片薄辅。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡要拂,死狀恐怖,靈堂內的尸體忽然破棺而出站楚,到底是詐尸還是另有隱情脱惰,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布窿春,位于F島的核電站拉一,受9級特大地震影響采盒,放射性物質發(fā)生泄漏。R本人自食惡果不足惜蔚润,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一磅氨、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧嫡纠,春花似錦烦租、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至痴颊,卻和暖如春赏迟,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蠢棱。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工锌杀, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人泻仙。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓糕再,卻偏偏與公主長得像,于是被迫代替她去往敵國和親玉转。 傳聞我的和親對象是個殘疾皇子突想,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內容

  • AJax 優(yōu)化 緩存 Ajax 請求盡量使用GET, 僅取決于cookie數(shù)量 Cookie 優(yōu)化 減少Cooki...
    KeKeMars閱讀 9,351評論 5 89
  • 在這個前端用戶體驗越來越重要的時代,你的頁面稍微有點卡頓究抓,都難以挽留用戶猾担。而作為一名有追求的前端,勢必要力所能及地...
    SCQ000閱讀 3,826評論 0 52
  • 圍繞前端的性能多如牛毛刺下,涉及到方方面面绑嘹,以我我們將圍繞PC瀏覽器和移動端瀏覽器的優(yōu)化策略進行羅列注意,是羅列不是展...
    流動碼文閱讀 676評論 0 0
  • 在 Web 開發(fā)中橘茉,隨著需求的增加與代碼庫的擴張工腋,我們最終發(fā)布的 Web 頁面也逐漸膨脹。不過這種膨脹遠不止意味著...
    壯哉我大前端閱讀 524評論 0 1
  • 2016年12月9日上午畅卓,一個小生命誕生了擅腰,全家雀躍、沸騰髓介。當看到這個小生命的照片時惕鼓,我興奮不已,因為晉升為姑姑是...
    夢蘇夢閱讀 726評論 0 1