亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

當(dāng)面試官問你如何進(jìn)行性能優(yōu)化時(shí)，你該這么回答(一)

elisa.yang / 2870人閱讀

摘要：背景在開發(fā)好頁(yè)面后，如何讓頁(yè)面更快更好的運(yùn)行，是區(qū)分一個(gè)程序猿技術(shù)水平和視野的一個(gè)重要指標(biāo)。在對(duì)這些環(huán)節(jié)進(jìn)行優(yōu)化之前，我們需要知道如何監(jiān)控這些環(huán)節(jié)花費(fèi)了多少時(shí)間。為了優(yōu)化鏈接的環(huán)節(jié)，前端這里還需要對(duì)資源使用，雪碧圖，代碼合并等手段。

背景

在開發(fā)好頁(yè)面后，如何讓頁(yè)面更快更好的運(yùn)行，是區(qū)分一個(gè)程序猿技術(shù)水平和視野的一個(gè)重要指標(biāo)。所以面試時(shí)，面試官總會(huì)問你一個(gè)問題，如何進(jìn)行性能優(yōu)化呢？

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

最近一個(gè)星期經(jīng)過瘋狂的面試和查詢資料，我總算積累了一些經(jīng)驗(yàn)和思考，在這個(gè)招聘的黃金時(shí)間，分享給大家，希望大家可以有一點(diǎn)收獲。如果有收獲，歡迎關(guān)注和star一下博客，github

性能優(yōu)化是什么

從前端的角度來(lái)說(shuō)，性能優(yōu)化可以分為兩個(gè)方向。從用戶角度來(lái)看，一個(gè)是頁(yè)面加載的很快，另一個(gè)是頁(yè)面使用起來(lái)很流暢。因此，對(duì)性能優(yōu)化的探索，我們可以分為頁(yè)面加載時(shí)間跟頁(yè)面運(yùn)行效率兩個(gè)方向來(lái)進(jìn)行研究

從瀏覽器打開到頁(yè)面渲染完成，花費(fèi)了多少時(shí)間

是的，這個(gè)問題有點(diǎn)熟悉，面試官比較常問的是從瀏覽器打開到頁(yè)面渲染完成，發(fā)生了什么事情。這個(gè)問題網(wǎng)上很多回答，我也不就重復(fù)的細(xì)說(shuō)了。主要的過程是：

瀏覽器解析->查詢緩存->dns查詢->建立鏈接->服務(wù)器處理請(qǐng)求->服務(wù)器發(fā)送響應(yīng)->客戶端收到頁(yè)面->解析HTML->構(gòu)建渲染樹->開始顯示內(nèi)容(白屏?xí)r間)->首屏內(nèi)容加載完成(首屏?xí)r間)->用戶可交互(DOMContentLoaded)->加載完成(load)

很顯然，如果我們要進(jìn)行加載時(shí)間的優(yōu)化，我們需要從這里的每一個(gè)步驟都去思考，去總結(jié)，而避免東湊一點(diǎn)，西湊一點(diǎn)。

頁(yè)面加載時(shí)間監(jiān)控

有一句話說(shuō)得好，If You Can"t Measure It, You Can"t Manage It。在對(duì)這些環(huán)節(jié)進(jìn)行優(yōu)化之前，我們需要知道如何監(jiān)控這些環(huán)節(jié)花費(fèi)了多少時(shí)間。

首先推薦一個(gè)PerformanceTiming,可以獲取到很多頁(yè)面加載相關(guān)的數(shù)據(jù)。
比較常用的有

DNS解析時(shí)間： domainLookupEnd - domainLookupStart
TCP建立連接時(shí)間： connectEnd - connectStart
白屏?xí)r間： responseStart - navigationStart
dom渲染完成時(shí)間： domContentLoadedEventEnd - navigationStart
頁(yè)面onload時(shí)間： loadEventEnd - navigationStart

如果不使用該API，可以以服務(wù)器渲染返回的時(shí)間，或是SPA路由跳轉(zhuǎn)離開的時(shí)間為起點(diǎn)，domContentLoaded，load等事件為結(jié)束點(diǎn)進(jìn)行記錄?；蚴侵苯由蟝oogle analytics。方法很多，就不細(xì)說(shuō)了。

服務(wù)器部分優(yōu)化要點(diǎn)

后端部分可以對(duì)緩存，dns查詢時(shí)間，鏈接時(shí)間，處理請(qǐng)求時(shí)間，響應(yīng)時(shí)間等進(jìn)行優(yōu)化。

緩存就不細(xì)說(shuō)了。

dns查詢時(shí)間可以使用httpdns或是dns預(yù)加載，域名收斂等手段優(yōu)化。

建立連接的重點(diǎn)是長(zhǎng)連接和鏈接復(fù)用，keep-alive，long-polling，http-straming，websocket或是自己寫過別的協(xié)議，更好的是直接上http2。為了優(yōu)化鏈接的環(huán)節(jié)，前端這里還需要對(duì)資源使用cdn，雪碧圖，代碼合并等手段。

服務(wù)器處理請(qǐng)求這里可以優(yōu)化的點(diǎn)也不少，值得注意的就是移動(dòng)端訪問PC端頁(yè)面需要跳轉(zhuǎn)到移動(dòng)端頁(yè)面時(shí)，要再服務(wù)器端使用302跳轉(zhuǎn)，不要在前端進(jìn)行跳轉(zhuǎn)。還有就是啟用hsts，要求瀏覽器在之后的訪問使用https，減少無(wú)謂的http跳轉(zhuǎn)https，同時(shí)還可以防止ssl剝離攻擊，提升安全性。

服務(wù)器發(fā)送響應(yīng)環(huán)節(jié)，可以使用Transfer-Encoding=chunked，多次返回響應(yīng)，具體操作查詢bigpipe。還有就是減小cookie的體積等等。

前端部分優(yōu)化要點(diǎn)

前端部分可以對(duì)白屏?xí)r間，首屏事件，可交換時(shí)間，加載完成時(shí)間進(jìn)行優(yōu)化。

-未完，待續(xù)-

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

有時(shí)間的同學(xué)也可以看下我的文章大廠前端面試考什么? ,應(yīng)該也有幫助

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/93751.html

相關(guān)文章

  • 簡(jiǎn)歷上的項(xiàng)目經(jīng)歷怎么寫 ？這 3 條原則不可忽視 ！

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

    fobnn 評(píng)論0 收藏0

  • 前端秋招面試總結(jié)

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

    Gu_Yan 評(píng)論0 收藏0

  • 前端秋招面試總結(jié)

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

    Scholer 評(píng)論0 收藏0

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

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

    Achilles 評(píng)論0 收藏0

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

    摘要：如果你只是簡(jiǎn)單羅列出這幾個(gè)鉤子函數(shù)的名稱，不具體深入闡述的話，你這樣的回答很難令面試官滿意。那么接下來(lái)，閏土大叔將手摸手教你如何深入淺出地說(shuō)出令面試官滿意的有亮點(diǎn)的回答。 當(dāng)面試官問：談?wù)勀銓?duì)vue的生命周期的理解，聽到這句話你是不是心里暗自竊喜：這也太容易了吧，不就是beforeCreate、created、beforeMount、mounted、beforeUpdate、updat...

    liangdas 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<