時至5G時代，是否還有必要談：前端性能優化？

Dionysus_go 發布于2019-08-23 18:10 / 3380人閱讀

摘要：最近，一個問題總是時不時的冒出我的腦海前端性能優化時候還有必要回顧前端性能優化然后我找到了雅虎軍規的條盡量減少請求個數須權衡使用內容分發網絡為文件頭指定或，使內容具有緩存性。那就是時候停下來，問一問是否還有必要這樣做。

之前，何同學的視頻在網上活了一陣子。引發了我們思考：5G將會給我們帶來什么。同時也回顧了4G乃至3G時代已經給我們帶來了哪些新的變革。最近，一個問題總是時不時的冒出我的腦海：前端性能優化時候還有必要？

回顧前端性能優化

然后我找到了 雅虎軍規 的 35 條

盡量減少 HTTP 請求個數——須權衡

使用 CDN（內容分發網絡）

為文件頭指定 Expires 或 Cache-Control ，使內容具有緩存性。

避免空的 src 和 href

使用 gzip 壓縮內容

把 CSS 放到頂部

把 JS 放到底部

避免使用 CSS 表達式

將 CSS 和 JS 放到外部文件中

減少 DNS 查找次數

精簡 CSS 和 JS

避免跳轉

剔除重復的 JS 和 CSS

配置 ETags

使 AJAX 可緩存

盡早刷新輸出緩沖

使用 GET 來完成 AJAX 請求

延遲加載

預加載

減少 DOM 元素個數

根據域名劃分頁面內容

盡量減少 iframe 的個數

避免 404

減少 Cookie 的大小

使用無 cookie 的域

減少 DOM 訪問

開發智能事件處理程序

用 link 代替 @import

避免使用濾鏡

優化圖像

優化 CSS Spirite

不要在 HTML 中縮放圖像——須權衡

favicon.ico要小而且可緩存

保持單個內容小于25K

打包組件成復合文本

我們歸檔一下這里我們著重說明的網絡相關的優化，而非瀏覽器端性能上的：

1.盡量減少 HTTP 請求個數——須權衡
5.使用 gzip 壓縮內容
10.減少 DNS 查找次數
11.精簡 CSS 和 JS
13.剔除重復的 JS 和 CSS
15.使 AJAX 可緩存
17.使用 GET 來完成 AJAX 請求
29.避免使用濾鏡
31.優化 CSS Spirite
32.不要在 HTML 中縮放圖像——須權衡
33.favicon.ico要小而且可緩存
34.保持單個內容小于25K
35.打包組件成復合文本

然后就剩下這么幾個了。作為現在前沿的前端技術，webpack已經幫我們做了5,11,13,33,35。而且其中的13.剔除重復的 JS 和 CSS，在框架盛行的時代，似乎我們已經選擇基于框架的覆寫而非直接修改框架的方式來構建我們的代碼，因為維護成本。也就是說，我們在成本權衡下回做適當的放棄13.
與此同時，在 resultful 盛行的今天，17. 使用 GET 來完成 AJAX 請求也不能滿足需求，而被部分舍棄。然后字體圖標的流行，把31. 優化 CSS Spirite的問題也變成了歷史。接著我們看看還剩下些什么：

1.盡量減少 HTTP 請求個數——須權衡
10.減少 DNS 查找次數
15.使 AJAX 可緩存
29.避免使用濾鏡
32.不要在 HTML 中縮放圖像——須權衡
34.保持單個內容小于25K

再去掉需權衡的兩項，因為這兩項好像在我們日常的工作中已經不再權衡.。接著去掉前端沒法控制的DNS次數的問題：

使 AJAX 可緩存

避免使用濾鏡

保持單個內容小于25K

emmm，好像我們現在反而比較喜歡使用一些比較炫酷的濾鏡來做一些很驚艷的效果。至于 34，怕是我們現在一張小圖片都不止 25k 了吧？再者是緩存的問題：單頁面泛濫以及 localStorage 盛行的當下，緩存Ajax信息以及稱為了我們的標配。

what？怎么沒有了？我不服：

6.把 CSS 放到頂部
7.把 JS 放到底部

這兩條怎么不說？
敢問網速給力的今天，你一個三五百 kb 的 js 文件，即便是放在 head 標簽最開始的位置，你會先看到 HTML 再看到 CSS 的渲染嗎？so，還有必要刻意的糾結把js文件放在底部嗎？
或許你會為了面子說：放在底部更好代碼更為規范。但這些已經不重要了。

總結

技術是服務于產品的，產品是面向用戶的。當我們所做的一些優化對于用戶是無感知的，對于整個項目也不能提高什么效率的。那就是時候停下來，問一問：是否還有必要這樣做。
當然，說了這么多，并不是希望大家在今后面試的時候，再被問到：前端性能有哪些優化方案的時候，就直接起身掀桌子。畢竟向人民幣適當的低頭也不算一件特別丟人的事情。

這里，僅僅是我個人看法，你覺得呢？

云服務器 GPU云服務器前端性能優化前端開發性能優化阿里云服務器還有必要裝防火墻嗎性能優化

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

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

CloudBest：科普 | 一圖看懂 5G 從哪來的

摘要：一個人的氣質里有走過的路讀過的書愛過的人又經歷了哪些故事呢引子一部高清電影秒秒鐘就能下載下來遠程游戲再也不會有卡頓和延遲的感覺了依托也出現了一系列的新東西，比如，車聯網自動駕駛遠程控制等等那從哪來的呢她經歷了怎樣的故事才走到如今的樣子本期將一個人的氣質里有走過的路、讀過的書、愛過的人5G 又經歷了哪些故事呢？引子一部高清電影秒秒鐘就能下載下來遠程游戲再也不會有卡頓和延遲的感覺了依托 5G...

Tecode 2022-06-28 18:59 評論0 收藏0
前端性能優化

摘要：端優談談關于前端的緩存的問題我們都知道對頁面進行緩存能夠有利于減少請求發送，從而達到對頁面的優化。而作為一名有追求的前端，勢必要力所能及地優化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優化問題過早優化是萬惡之源。優化向：單頁應用多路由預渲染指南 Ajax 技術的出現，讓我們的 Web 應用能夠在不刷新的狀態下顯示不同頁面的內容，這就是單頁應用。在一個單頁應用中，往往只有一...

Dean 2019-08-21 18:19 評論0 收藏0
從性能參數到業務大數據，淺談直播 CDN 服務監控

摘要：線上服務的有效監控和數據收集，一直是后端服務離不開的話題。性能指標與業務融合當然，只有機器級的數據，是遠遠不夠的。在這個大數據時代，有了數據卻不做事情，等同于浪費。而南京移動的用戶量較大，也說明南京地區應該增設服務點。線上服務的有效監控和數據收集，一直是后端服務離不開的話題。直播 CDN 作為一種經典的分布式系統，監控以及數據收集更是必不可少的工作。如何對海量的服務集群有效的監控和保...

番茄西紅柿 2019-07-16 14:29 評論0 收藏0