淺談網站性能之前端性能優(yōu)化

philadelphia 發(fā)布于2019-08-01 15:44 / 3126人閱讀

摘要：淺談網站性能之前端性能優(yōu)化性能優(yōu)化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內容本身。前端性能優(yōu)化減少請求數量基本原理在瀏覽器與服務器進行通信時，主要是通過進行通信。

最近項目慢慢走上正軌，需求趨于平穩(wěn)，這才想起需要對整站進行性能優(yōu)化。經過一段時間的學習，結合現在項目的實際性能情況，發(fā)現確實有許多地方可以進行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下內容僅為個人理解，如果本內容大家覺得哪里寫的不對，望大家指出，供一起討論。

淺談網站性能之前端性能優(yōu)化

性能優(yōu)化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內容本身。

前端性能優(yōu)化

減少 HTTP 請求數量

基本原理：在瀏覽器與服務器進行通信時，主要是通過 HTTP 進行通信。瀏覽器與服務器需要經過三次握手，每次握手需要花費大量時間。而且不同瀏覽器對資源文件并發(fā)請求數量有限（不同瀏覽器允許并發(fā)數），一旦 HTTP 請求數量達到一定數量，資源請求就存在等待狀態(tài)，這是很致命的，因此減少 HTTP 的請求數量可以很大程度上對網站性能進行優(yōu)化。

CSS Sprites：國內俗稱 CSS 精靈，這是將多張圖片合并成一張圖片達到減少 HTTP 請求的一種解決方案，可以通過 CSS background 屬性來訪問圖片內容。這種方案同時還可以減少圖片總字節(jié)數，節(jié)省命名詞匯量（由命名多張圖片文件變成一張，哈哈哈）。

合并 CSS 和 JS 文件：現在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請求數量，可以通過這些工具再發(fā)布前將多個 CSS 或者多個 JS 合并成一個文件。

采用 lazyLoad：俗稱懶加載，可以控制網頁上的內容在一開始無需加載，不需要發(fā)請求，等到用戶操作真正需要的時候立即加載出內容。這樣就控制了網頁資源一次性請求數量。

控制資源文件加載優(yōu)先級

基本原理：說到這里就需要知道瀏覽器加載 HTML 內容的原理，瀏覽器在加載 HTML 內容時，是將 HTML 內容從上至下依次解析，解析到 link 或者 script 標簽就會加載 href 或者 src 對應鏈接內容，為了第一時間展示頁面給用戶，就需要將 CSS 提前加載，不要受 JS 加載影響。

遵循原則：主要文件放在 head 內部，次要文件放在 body 底部。一般情況下都是 CSS 在頭部，JS 在底部。

利用瀏覽器緩存

基本原理：瀏覽器緩存分強緩存和協(xié)商緩存，他們是將網絡資源存儲在本地，等待下次請求該資源時，如果命中就不需要到服務器重新請求該資源，直接在本地讀取該資源。

強緩存：在 web 服務器返回的響應中添加 Expires 和 Cache-Control Header。

協(xié)商緩存：通過【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】這兩對 Header 分別管理。

使用 CDN

基本原理：CDN的全稱是Content Delivery Network，即內容分發(fā)網絡。

減少重排（Reflow）

基本原理：重排是 DOM 的變化影響到了元素的幾何屬性（寬和高），瀏覽器會重新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證 DOM 樹上的所有其它結點的 visibility 屬性，這也是 Reflow 低效的原因。如果 Reflow 的過于頻繁，CPU 使用率就會急劇上升。

減少 Reflow，如果需要在 DOM 操作時添加樣式，盡量使用增加 class 屬性，而不是通過 style 操作樣式。

減少 DOM 操作

圖標使用 IconFont 替換

花絮

在開始提筆寫這篇博客前就遇到了一個很棘手的問題，這篇博客標題叫什么，思考了一會，我心里冒出了三個答案：

淺談網站性能優(yōu)化

第一個標題網站性能優(yōu)化，一看標題可以理解為是講網站性能，而且是對網站進行優(yōu)化，描述的是一種解決方案，然而網站性能包括的太多了，超出了我的知識范疇，所以放棄。

淺談網站性能之前端性能優(yōu)化

第二個標題正適我懷，答題概括了我本期博客內容，既有性能介紹，又有前端性能優(yōu)化解決方案。

淺談前端性能優(yōu)化

第三個標題前端性能優(yōu)化，心想這不就是我要寫的內容嘛，等我寫完內容發(fā)現，不對，我寫的內容不僅僅是解決方案，好包括的其他內容，所以放棄。

以上內容僅為個人理解，如果本內容大家覺得哪里寫的不對，望大家指出，供一起討論，點擊此處更多文章。

云服務器 GPU云服務器前端性能優(yōu)化前端開發(fā)性能優(yōu)化網站性能優(yōu)化網站性能監(jiān)測與優(yōu)化

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

轉載請注明本文地址：http://systransis.cn/yun/50082.html

淺談網站性能之前端性能優(yōu)化

摘要：淺談網站性能之前端性能優(yōu)化性能優(yōu)化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內容本身。前端性能優(yōu)化減少請求數量基本原理在瀏覽器與服務器進行通信時，主要是通過進行通信。最近項目慢慢走上正軌，需求趨于平穩(wěn)，這才想起需要對整站進行性能優(yōu)化。經過一段時間的學習，結合現在項目的實際性能情況，發(fā)現確實有許多地方可以進行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下...

Winer 2019-08-20 11:04 評論0 收藏0
React | 高效前端之淺談

摘要：毫無疑問，作為近兩年前端三大流行框架之一，正成為程序員們最喜愛的框架。自年月開源至今，已有千萬網站使用來進行前端構架，使之成為最受歡迎的項目之一。經過這幾年的沉淀，越來越強大，暫不提這幾年在國內與之間的矛盾，這其中還有很大談判空間。 showImg(https://segmentfault.com/img/bV0dY9?w=469&h=240); React在國外已被各個公司的各種產品...

曹金海 2019-08-22 11:18 評論0 收藏0
前端性能優(yōu)化

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

Dean 2019-08-21 18:19 評論0 收藏0
網站部署

摘要：就鹿晗宣布戀情導致微博宕機事件淺談大型網站高可用性架構中午吃飯刷著刷著微博發(fā)現微博突然掛了。用戶在使用瀏覽器訪問一個網站時需要先通過協(xié)議向服務器發(fā)送請求，之后服務器返回文件與響應信息。 webpack：從入門到真實項目配置自從出現模塊化以后，大家可以將原本一坨代碼分離到個個模塊中，但是由此引發(fā)了一個問題。每個 JS 文件都需要從服務器去拿，由此會導致加載速度變慢。Webpack 最主...

endless_road 2019-06-24 17:57 評論0 收藏0
淺談前后端分離與實踐之 nodejs 中間層服務（二）

摘要：服務端任需要進行校驗來達到數據的可靠性前端的路由可能在服務端并不存在等等這一系列重用性的問題。串行并行，大幅縮短請求時間。關于作者本人主頁本文部分圖片段落參考文章淘寶前后端分離實踐微信公眾號會不定期推送前端技術文章，歡迎關注一、背景書接上文，淺談前后端分離與實踐(一) 我們用mock服務器搭建起來了自己的前端數據模擬服務，前后端開發(fā)過程中只需定義好接口規(guī)范，便可以相互進行各自的開發(fā)...

ddongjian0000 2019-08-21 17:13 評論0 收藏0