国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

當面試官問你如何進行性能優化時，你該這么回答(一)

elisa.yang / 2801人閱讀

摘要：背景在開發好頁面后，如何讓頁面更快更好的運行，是區分一個程序猿技術水平和視野的一個重要指標。在對這些環節進行優化之前，我們需要知道如何監控這些環節花費了多少時間。為了優化鏈接的環節，前端這里還需要對資源使用，雪碧圖，代碼合并等手段。

背景

在開發好頁面后，如何讓頁面更快更好的運行，是區分一個程序猿技術水平和視野的一個重要指標。所以面試時，面試官總會問你一個問題，如何進行性能優化呢？

如果你這時是頭腦一片空白，或是像之前的我一樣，靠死記硬背或是之前的經歷，答一下壓縮代碼，打包代碼，雪碧圖，cdn，事件代理，這說明你對性能優化還是缺乏一個整體，系統的掌握，對性能優化還只是處于聽說過一個方法就加上去的階段。這樣也就無從去更好的優化性能。

最近一個星期經過瘋狂的面試和查詢資料，我總算積累了一些經驗和思考，在這個招聘的黃金時間，分享給大家，希望大家可以有一點收獲。如果有收獲，歡迎關注和star一下博客，github

性能優化是什么

從前端的角度來說，性能優化可以分為兩個方向。從用戶角度來看，一個是頁面加載的很快，另一個是頁面使用起來很流暢。因此，對性能優化的探索，我們可以分為頁面加載時間跟頁面運行效率兩個方向來進行研究

從瀏覽器打開到頁面渲染完成，花費了多少時間

是的，這個問題有點熟悉，面試官比較常問的是從瀏覽器打開到頁面渲染完成，發生了什么事情。這個問題網上很多回答，我也不就重復的細說了。主要的過程是：

瀏覽器解析->查詢緩存->dns查詢->建立鏈接->服務器處理請求->服務器發送響應->客戶端收到頁面->解析HTML->構建渲染樹->開始顯示內容(白屏時間)->首屏內容加載完成(首屏時間)->用戶可交互(DOMContentLoaded)->加載完成(load)

很顯然，如果我們要進行加載時間的優化，我們需要從這里的每一個步驟都去思考，去總結，而避免東湊一點，西湊一點。

頁面加載時間監控

有一句話說得好，If You Can"t Measure It, You Can"t Manage It。在對這些環節進行優化之前，我們需要知道如何監控這些環節花費了多少時間。

首先推薦一個PerformanceTiming,可以獲取到很多頁面加載相關的數據。
比較常用的有

DNS解析時間： domainLookupEnd - domainLookupStart
TCP建立連接時間： connectEnd - connectStart
白屏時間： responseStart - navigationStart
dom渲染完成時間： domContentLoadedEventEnd - navigationStart
頁面onload時間： loadEventEnd - navigationStart

如果不使用該API，可以以服務器渲染返回的時間，或是SPA路由跳轉離開的時間為起點，domContentLoaded，load等事件為結束點進行記錄。或是直接上google analytics。方法很多，就不細說了。

服務器部分優化要點

后端部分可以對緩存，dns查詢時間，鏈接時間，處理請求時間，響應時間等進行優化。

緩存就不細說了。

dns查詢時間可以使用httpdns或是dns預加載，域名收斂等手段優化。

建立連接的重點是長連接和鏈接復用，keep-alive，long-polling，http-straming，websocket或是自己寫過別的協議，更好的是直接上http2。為了優化鏈接的環節，前端這里還需要對資源使用cdn，雪碧圖，代碼合并等手段。

服務器處理請求這里可以優化的點也不少，值得注意的就是移動端訪問PC端頁面需要跳轉到移動端頁面時，要再服務器端使用302跳轉，不要在前端進行跳轉。還有就是啟用hsts，要求瀏覽器在之后的訪問使用https，減少無謂的http跳轉https，同時還可以防止ssl剝離攻擊，提升安全性。

服務器發送響應環節，可以使用Transfer-Encoding=chunked，多次返回響應，具體操作查詢bigpipe。還有就是減小cookie的體積等等。

前端部分優化要點

前端部分可以對白屏時間，首屏事件，可交換時間，加載完成時間進行優化。

-未完，待續-

博客文章鏈接web性能優化（一），github，歡迎star和follow，謝謝！

有時間的同學也可以看下我的文章大廠前端面試考什么? ,應該也有幫助

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93751.html

相關文章

  • 簡歷上的項目經歷怎么寫 ？這 3 條原則不可忽視 ！

    摘要：正因為如此，現在很多簡歷上的項目經歷的質量都是參差不齊，同時有的項目經歷又非常相似，面試官一眼就能知道你的項目到底是真是假。雖然以上三點原則不能包治百病，但是對很多同學來說應該是蠻有益處的。閱讀本文大概需要 5 分鐘。作者：黃小斜showImg(https://user-gold-cdn.xitu.io/2019/3/30/169cdb4bd2cac24c);?作為一個程序員，想必大家曾經都...

    fobnn 評論0 收藏0

  • 前端秋招面試總結

    摘要：前言秋招宣告結束，面試了接近家公司，有幸拿到，感謝這段時間一起找工作面試的朋友和陪伴我的人。一定要提前準備好，不然面試官叫你說遇到的難點，或者直接問問題時可能會懵逼。 前言 秋招宣告結束，面試了接近20家公司，有幸拿到offer，感謝這段時間一起找工作面試的朋友和陪伴我的人。這是一段難忘的經歷，相信不亞于當年的高考吧，也許現在想起來高考不算什么，也許只有經歷過秋招的人才懂得找工作的艱辛...

    Gu_Yan 評論0 收藏0

  • 前端秋招面試總結

    摘要：前言秋招宣告結束，面試了接近家公司，有幸拿到，感謝這段時間一起找工作面試的朋友和陪伴我的人。一定要提前準備好，不然面試官叫你說遇到的難點，或者直接問問題時可能會懵逼。 前言 秋招宣告結束，面試了接近20家公司，有幸拿到offer，感謝這段時間一起找工作面試的朋友和陪伴我的人。這是一段難忘的經歷，相信不亞于當年的高考吧，也許現在想起來高考不算什么，也許只有經歷過秋招的人才懂得找工作的艱辛...

    Scholer 評論0 收藏0

  • 面試官問你如何解決web高并發這樣回答就好了

    摘要：所謂高并發，就是同一時間有很多流量通常指用戶訪問程序的接口頁面及其他資源，解決高并發就是當流量峰值到來時保證程序的穩定性。索引多主多從分布式數據庫緩存連接池消息隊列等是從數據庫方便考慮如何優化性能。 所謂高并發，就是同一時間有很多流量(通常指用戶)訪問程序的接口、頁面及其他資源，解決高并發就是當流量峰值到來時保證程序的穩定性。 我們一般用QPS(每秒查詢數，又叫每秒請求數)來衡量程序的...

    Achilles 評論0 收藏0

  • 如何解釋vue的生命周期才能令面試官滿意？

    摘要：如果你只是簡單羅列出這幾個鉤子函數的名稱，不具體深入闡述的話，你這樣的回答很難令面試官滿意。那么接下來，閏土大叔將手摸手教你如何深入淺出地說出令面試官滿意的有亮點的回答。 當面試官問：談談你對vue的生命周期的理解，聽到這句話你是不是心里暗自竊喜：這也太容易了吧，不就是beforeCreate、created、beforeMount、mounted、beforeUpdate、updat...

    liangdas 評論0 收藏0

發表評論

0條評論

elisa.yang

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<