什麼是js資料流 當聊起前端效能優化我們要聊什麼

2021-10-11 16:57:25 字數 1437 閱讀 5836

在前端的整個學習生涯中,我們總是能一次次聽到「效能」和「體驗」這兩個詞。前端效能優化不僅是前端工程師工作中時刻需要關注的現實問題,也是前端面試中屢屢被問到的點。面試官之所以愛問,是因為偷懶。只需問這乙個問題,就能在一定程度考察面試者的知識廣度、知識深度、總結能力、表達能力,還能沿著這條線繼續問其他問題。

當被突然問到效能這個問題時,大部分人會突然一愣。總覺得有很多要說的東西,但又感覺雜亂無章一下子不知從何說起。經過一番思索,腦子裡慢慢翻出早年面試刷題時看到的「雅虎效能優化n條軍規」,抓耳撓腮說上七八條。面試官面無表情的問了句「還有嗎?」,此刻又不得不把腦仁像擠海綿一樣瘋狂壓榨,再多滴出兩三條似是而非的油水。心裡面滿是苦惱,抱怨自己的記憶力不夠好。

其實就算是全背下來一口氣說個幾十條,面試官也不見得多滿意。原因之一是條目太多沒有主次聽著容易讓人煩,面試官自己都記不住你說了什麼。二是這種方式的回答明顯給人一種死記硬背做題家的感覺。(面試官真欠抽)

回答效能問題有兩個思路。順著這兩個思路,不需要過多記憶就能自然而然的並且「很有見地」的回答十幾條甚至幾十條優化方案,當然前提是這些優化方案你平時真的用過。

效能瓶頸主要出現在三個場景

在開發時每次修改**打包需要幾分鐘,太慢(開發構建階段

開啟**,等了幾十秒才看到頁面,太慢(資源載入頁面渲染階段)

頁面展現後,頁面上動畫不流暢。滾動頁面或者拖拽元素卡頓感嚴重,甚至頁面會崩潰(操作體驗階段)

一、開發構建階段(常見問題:如何讓webpack打包更快)

二、資源載入階段

核心思路是:傳輸量要小、距離要近、並行傳輸、資源復用、預先載入。

傳輸量要小

距離要近

並行傳輸

資源復用

預先載入

三、頁面渲染階段

四、操作體驗階段

滾動/移動/操作流暢

密集型計算

來自若愚@飢人谷

假設你是公司的cto,現在有乙個產品需要在盡可能短的時間內上線,在現有團隊不加班不996的前提下如何做?方案無外乎是:

壓縮需求,迭代開發——壓縮

多用舊輪子(**、方案、架構)少造新輪子——快取

增加人手——併發

和前端效能優化做對應

從以上兩個思路入手,對於有經驗的你來說自然才思泉湧,輕輕鬆鬆讓自己和面試官興奮起來,甚至能在一定程度上左右後續的提問。

提到效能,大腦裡需要浮現6字箴言:壓縮快取併發。後面的都交給小腦自由發揮吧。

一次性弄懂效能優化​www.yuque.com

聊一聊 HBase 是如何寫入資料的?

hbase client 訪問 zookeeper 獲取寫入 region 所在的位置,即獲取 hbase meta 表位於哪個 region server 訪問對應的 region server 獲取 hbase meta 表,並查詢出目標資料位於哪個 region server 中的哪個 reg...

Js 什麼是 for迴圈

doctype html en utf 8 viewport content width device width,initial scale 1.0 x ua compatible content ie edge document title head console.log 1 for 迴圈 是...

什麼是JS事件冒泡

什麼是js事件冒泡?在乙個物件上觸發某類事件 比如單擊onclick事件 如果此物件定義了此事件的處理程式,那麼此事件就會呼叫這個處理程式,如果沒有定義此事件處理程式或者事件返回true,那麼這個事件會向這個物件的父級物件傳播,從裡到外,直至它被處理 父級物件所有同類事件都將被啟用 或者它到達了物件...