資訊專欄INFORMATION COLUMN
摘要：最近，一個問題總是時不時的冒出我的腦海前端性能優(yōu)化時候還有必要回顧前端性能優(yōu)化然后我找到了雅虎軍規(guī)的條盡量減少請求個數(shù)須權(quán)衡使用內(nèi)容分發(fā)網(wǎng)絡(luò)為文件頭指定或，使內(nèi)容具有緩存性。那就是時候停下來，問一問是否還有必要這樣做。
之前，何同學(xué)的視頻在網(wǎng)上活了一陣子。引發(fā)了我們思考：5G將會給我們帶來什么。同時也回顧了4G乃至3G時代已經(jīng)給我們帶來了哪些新的變革。最近，一個問題總是時不時的冒出我的腦海：前端性能優(yōu)化時候還有必要？
回顧前端性能優(yōu)化然后我找到了 雅虎軍規(guī) 的 35 條
盡量減少 HTTP 請求個數(shù)——須權(quán)衡
使用 CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）
為文件頭指定 Expires 或 Cache-Control ，使內(nèi)容具有緩存性。
避免空的 src 和 href
使用 gzip 壓縮內(nèi)容
把 CSS 放到頂部
把 JS 放到底部
避免使用 CSS 表達(dá)式
將 CSS 和 JS 放到外部文件中
減少 DNS 查找次數(shù)
精簡 CSS 和 JS
避免跳轉(zhuǎn)
剔除重復(fù)的 JS 和 CSS
配置 ETags
使 AJAX 可緩存
盡早刷新輸出緩沖
使用 GET 來完成 AJAX 請求
延遲加載
預(yù)加載
減少 DOM 元素個數(shù)
根據(jù)域名劃分頁面內(nèi)容
盡量減少 iframe 的個數(shù)
避免 404
減少 Cookie 的大小
使用無 cookie 的域
減少 DOM 訪問
開發(fā)智能事件處理程序
用 link 代替 @import
避免使用濾鏡
優(yōu)化圖像
優(yōu)化 CSS Spirite
不要在 HTML 中縮放圖像——須權(quán)衡
favicon.ico要小而且可緩存
保持單個內(nèi)容小于25K
打包組件成復(fù)合文本
我們歸檔一下這里我們著重說明的網(wǎng)絡(luò)相關(guān)的優(yōu)化，而非瀏覽器端性能上的：
1.盡量減少 HTTP 請求個數(shù)——須權(quán)衡
5.使用 gzip 壓縮內(nèi)容
10.減少 DNS 查找次數(shù)
11.精簡 CSS 和 JS
13.剔除重復(fù)的 JS 和 CSS
15.使 AJAX 可緩存
17.使用 GET 來完成 AJAX 請求
29.避免使用濾鏡
31.優(yōu)化 CSS Spirite
32.不要在 HTML 中縮放圖像——須權(quán)衡
33.favicon.ico要小而且可緩存
34.保持單個內(nèi)容小于25K
35.打包組件成復(fù)合文本
然后就剩下這么幾個了。作為現(xiàn)在前沿的前端技術(shù)，webpack已經(jīng)幫我們做了5,11,13,33,35。而且其中的13.剔除重復(fù)的 JS 和 CSS，在框架盛行的時代，似乎我們已經(jīng)選擇基于框架的覆寫而非直接修改框架的方式來構(gòu)建我們的代碼，因為維護成本。也就是說，我們在成本權(quán)衡下回做適當(dāng)?shù)姆艞?3.
與此同時，在 resultful 盛行的今天，17. 使用 GET 來完成 AJAX 請求也不能滿足需求，而被部分舍棄。然后字體圖標(biāo)的流行，把31. 優(yōu)化 CSS Spirite的問題也變成了歷史。接著我們看看還剩下些什么：
1.盡量減少 HTTP 請求個數(shù)——須權(quán)衡
10.減少 DNS 查找次數(shù)
15.使 AJAX 可緩存
29.避免使用濾鏡
32.不要在 HTML 中縮放圖像——須權(quán)衡
34.保持單個內(nèi)容小于25K
再去掉需權(quán)衡的兩項，因為這兩項好像在我們?nèi)粘５墓ぷ髦幸呀?jīng)不再權(quán)衡.。接著去掉前端沒法控制的DNS次數(shù)的問題：
使 AJAX 可緩存
避免使用濾鏡
保持單個內(nèi)容小于25K
emmm，好像我們現(xiàn)在反而比較喜歡使用一些比較炫酷的濾鏡來做一些很驚艷的效果。至于 34，怕是我們現(xiàn)在一張小圖片都不止 25k 了吧？再者是緩存的問題：單頁面泛濫以及 localStorage 盛行的當(dāng)下，緩存Ajax信息以及稱為了我們的標(biāo)配。
what？怎么沒有了？我不服：
6.把 CSS 放到頂部
7.把 JS 放到底部
這兩條怎么不說？
敢問網(wǎng)速給力的今天，你一個三五百 kb 的 js 文件，即便是放在 head 標(biāo)簽最開始的位置，你會先看到 HTML 再看到 CSS 的渲染嗎？so，還有必要刻意的糾結(jié)把js文件放在底部嗎？
或許你會為了面子說：放在底部更好代碼更為規(guī)范。但這些已經(jīng)不重要了。
技術(shù)是服務(wù)于產(chǎn)品的，產(chǎn)品是面向用戶的。當(dāng)我們所做的一些優(yōu)化對于用戶是無感知的，對于整個項目也不能提高什么效率的。那就是時候停下來，問一問：是否還有必要這樣做。
當(dāng)然，說了這么多，并不是希望大家在今后面試的時候，再被問到：前端性能有哪些優(yōu)化方案的時候，就直接起身掀桌子。畢竟向人民幣適當(dāng)?shù)牡皖^也不算一件特別丟人的事情。
這里，僅僅是我個人看法，你覺得呢？
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104776.html
摘要：一個人的氣質(zhì)里有走過的路讀過的書愛過的人又經(jīng)歷了哪些故事呢引子一部高清電影秒秒鐘就能下載下來遠(yuǎn)程游戲再也不會有卡頓和延遲的感覺了依托也出現(xiàn)了一系列的新東西，比如，車聯(lián)網(wǎng)自動駕駛遠(yuǎn)程控制等等那從哪來的呢她經(jīng)歷了怎樣的故事才走到如今的樣子本期將一個人的氣質(zhì)里有走過的路、讀過的書、愛過的人5G 又經(jīng)歷了哪些故事呢？引子一部高清電影 秒秒鐘 就能下載下來遠(yuǎn)程游戲再也不會有卡頓和延遲的感覺了依托 5G...
摘要：端優(yōu)談?wù)勱P(guān)于前端的緩存的問題我們都知道對頁面進行緩存能夠有利于減少請求發(fā)送，從而達(dá)到對頁面的優(yōu)化。而作為一名有追求的前端，勢必要力所能及地優(yōu)化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優(yōu)化問題過早優(yōu)化是萬惡之源。 優(yōu)化向：單頁應(yīng)用多路由預(yù)渲染指南 Ajax 技術(shù)的出現(xiàn)，讓我們的 Web 應(yīng)用能夠在不刷新的狀態(tài)下顯示不同頁面的內(nèi)容，這就是單頁應(yīng)用。在一個單頁應(yīng)用中，往往只有一...
摘要：線上服務(wù)的有效監(jiān)控和數(shù)據(jù)收集，一直是后端服務(wù)離不開的話題。性能指標(biāo)與業(yè)務(wù)融合當(dāng)然，只有機器級的數(shù)據(jù)，是遠(yuǎn)遠(yuǎn)不夠的。在這個大數(shù)據(jù)時代，有了數(shù)據(jù)卻不做事情，等同于浪費。而南京移動的用戶量較大，也說明南京地區(qū)應(yīng)該增設(shè)服務(wù)點。 線上服務(wù)的有效監(jiān)控和數(shù)據(jù)收集，一直是后端服務(wù)離不開的話題。直播 CDN 作為一種經(jīng)典的分布式系統(tǒng)，監(jiān)控以及數(shù)據(jù)收集更是必不可少的工作。如何對海量的服務(wù)集群有效的監(jiān)控和保...
閱讀 3555·2021-11-24 11:17
閱讀 2325·2021-11-15 11:38
閱讀 3401·2021-10-14 09:42
閱讀 2968·2019-08-30 15:54
閱讀 2053·2019-08-28 18:09
閱讀 569·2019-08-26 11:48
閱讀 1655·2019-08-26 10:48
閱讀 2175·2019-08-26 10:45
