⑴ 如何優化web伺服器的訪問速度
網站運營的任何時期,網站訪問速度都是至關重要的部分,它是網站友好體驗中最基本的一項,如果訪問體驗都令人不滿意,那麼後期所做的營銷推廣模式都有可能徒勞無功,因為網路中客戶的選擇成本很低,加上普遍客戶的耐心都不高,頁面訪問超過6秒客戶就會選擇離開,這對於一些流量本來就不高的企業網站來說無疑是雪上加霜。
一、升級正在使用中的伺服器
進行伺服器升級工作之前,要考慮多方面的問題,是升級已有的伺服器還是購置新的伺服器設備須根據實際情況抉擇。首先來說升級現有的伺服器設備,一般來說網站運營到後期隨著業務不斷增加,多平台應用的開發對於伺服器性能的要求也逐步提升,長而久之伺服器遇到性能瓶頸也是情理之中的事情,對於這種情況,我們可以通過升級伺服器(例如增加硬體設備或網路帶寬)等相關配置來滿足不斷擴大的業務需求,那麼伺服器性能瓶頸問題就可以得到解決。
二、優化正在使用的伺服器
不管是完成升級後的伺服器,還是新購置的伺服器,我們都要對其進行優化,從而提升伺服器的性能以及利用率。如何優化伺服器?作為在國互網工作到現在的資深IDC工作人員,小編認為大概分為以下四個方面
要點一:盡可能的減少HTTP請求數
從客戶訪問網站頁面到整個頁面內容完全展現出來,這其中要花費較多的時間來下載各種Scripts、CSS樣式表、Flash以及圖片,而每一類下載都相當於一次HTTP請求,這樣的請求越多網站被完全載入出來所花的時間會越長,意味著客戶端的訪問會很慢,那麼此時就需要盡可能的減少HTTP請求數,通常我們可以直接把css和js寫入到頁面中,避免了外部的調用;或者我們可以把CSS文件和JS文件分來,在後台再進行合並,這樣客戶端瀏覽器相當於一次請求。這是小編在國互網美女前端那學來的。
要點二:降低DNS查詢時間
眾所周知網路伺服器端的域名和IP地址是相互對應的,當客戶端發出請求時,計算機還需要通過域名和IP地址的相互轉換來判斷,而這個轉換工作便是域名解析DNS,通常DNS的查詢需要10~20毫秒時間,客戶端瀏覽器也只會等待DNS查詢結束之後才會載入此域名下的內容。因此,我們要加快頁面的訪問速度,就可以從降低DNS查詢時間方面去做改善。
要點三:啟用伺服器Gzip壓縮功能
對於大中型網站來說,頁面的內容多且比較多樣化,單個頁面的大小可能是幾百K以上了,客戶端訪問的時候下載會比較慢,此時我們可以採用伺服器Gzip頁面壓縮功能,可以將一個大小為100K的頁面文件壓縮成25K以下,這樣就可以減少網路傳輸的數量從而提高客戶端訪問速度。一般伺服器都是可以使用Gzip壓縮功能的,並且能夠針對JS文件、CSS文件和Html進行壓縮,多方面去進行優化網站訪問速度。
要點四:推薦大中型網站使用CDN加速工具
CDN加速是目前大型網站普遍使用的頁面加速方式,它對於網站優化幾乎沒有影響的,基本原理是將網站鏡像備份到很多伺服器節點上,使伺服器節點周圍的用戶訪問速度更快,從而提升客戶端高速訪問網站的體驗;但是並不是所有的網站都適合使用CDN加速,一般對於小規模站點個人站的話,就不需要使用CDN加速,畢竟從長期來看這可是一筆不小的開支;建議圖片站以及多媒體站點可使用CDN加速。
希望以上知識能夠幫到您
⑵ Web前端新手要掌握的性能優化
今天小編要跟大家分享的文章是關於Web前端新手要掌握的性能優化知識。本文將分享一些前端性能優化的常用手段,包括減少請求次數、減小資源大小、各種緩存、預處理和長連接機制,以及代碼方面的性能優化等方面。下面來和小編一起看一看吧!
base64:尤其是在移動端,小圖標可以base64(webpack),大圖片慎用(如果載入速度過於慢的,而且很重要的圖片,可以用base64)
1、減少HTTP的請求次數和傳輸報文的大小
「CSSSprite(雪碧圖、圖片精靈)技術」
使用字體圖標(IconFont)或者SVG等矢量圖
+減少HTTP請求次數或者減少請求內容的大小
+渲染更快:因為它們是基於代碼渲染的,而對於點陣圖(png/jpg/gif)是需要先把圖片編碼在渲染
+不容易是幀變形
+也可以使用webp格式圖片,這種格式要小一些(但是需要伺服器端支持這種格式的請求處理)
「圖片懶載入(延遲載入)技術」
+第一次載入頁面的時候不去請求真實的圖片,提高第一次渲染頁面的速度,請求圖片的額外消耗盡可能不要處理
+當頁面載入完,把出現在用戶視野區域中的圖片做真實載入,沒有出現的先不載入(節約流浪,也能減少對伺服器的請求壓力)
o對於數據我們也盡可能分批載入(不要一次請求過多的數據,例如分頁技術)
音視頻文件取消預載入(preload='none'),這樣可以增加第一次渲染頁面的速度,當需要播放的時候在載入
客戶端和伺服器端的數據傳輸盡可能基於JSON格式完成,XML格式比JSON格式要大一些(還可以基於二進制編碼或者文件流格式,這種格式比文件傳輸好很多)
「把頁面的css/js等文件進行合並壓縮」
合並:爭取css和js都只導入一個(webpack可以實現並合並壓縮哦)
壓縮:基於webpack可以壓縮,對於圖片自己找工具先壓縮,可以使用伺服器的GZIP壓縮
圖片BASE64(用BASE64碼代表圖片,減少HTTP,增加瀏覽器渲染速度,所以真是項目中,尤其是移動端,如果圖片載入緩慢,BASE64一下就好了,;但是base64會導致文件中心的代碼超級惡心,不利於維護和開發,所以減渣瞎少使用);webpack中科院配置圖片
2、設置各種緩存、預處理和長連接機制
不經常更改的靜態資源做緩存處理(一般做的是304或者ETAG等協商緩存)
「建立Cache-Control和ExpiresHTTP的強緩存」
DNS緩存或者預處理(DNSPrefetch),減少DNS的查找
設置本地的離線存儲(manifest)或者把一些不經常更改的數據做本地臨時存儲(webstorage,indexdb)等
有錢就做CDN(地域分布式伺服器),或者加伺服器
「建立Connection:keep-aliveTcp長連接」
使用HTTP2版本協議(現在用的一般都是http1.1),可以多條tcp通道共存=>管道化鏈接
一個項目分為不同的域(不同的伺服器),例如:資源web伺服器、數據伺服器,圖片伺服器,視頻伺服器等,合理利用伺服器資源,但是導致過多的DNS解析
Cache-Control的優先順序高於Expires
基於本地存儲,做數據的存儲
3、代碼方面的性能優化
減少對閉包的使用(因為過多使用閉包會產生很多如蘆空不銷毀的內存,處理不好的話,會導致內存溢出「棧溢出」),減少閉包的嵌套(減少作用域鏈的查找層級)
對於動畫來說:能用css解決的不用js(能夠用transform處理的,不用傳統的css樣式,因為transform開啟硬體加速,不會引發迴流,或者使用定位的元素也會好很多,因為定位的元素脫離文檔流,不會對其他元素的位置造成影響),能用
requestAnimationFrame解決的不用定時器
+用requestAnimationFrame還有一個好處,當頁面處於休眠無訪問狀態,動畫會自己暫停,知道回復訪問才開始,而定時器是不論什麼狀態,只要頁面不管,就一直處理
避免使用iframe(因為iframe會嵌入其他頁面,嘩漏這樣父頁面渲染的時候,還要同時把子頁面也渲染了,渲染進度會變慢)
減少直接對DOM的操作(原因是減少DOM的迴流和重繪...),當代項目基本基於mvvm,mvc數據驅動視圖渲染的,對DOM的操作框架本身完成,性能要好很多
低耦合高內聚(基於封裝的方式:方法封裝,插件,組件,框架,類庫等封裝,減少頁面中的冗餘代碼,提高代碼使用率)
盡可能使用事件委託
避免出現死循環或者嵌套循環(嵌套循環會成倍增加循環的次數)
項目中盡可能使用非同步編程來模擬出多線程的效果,避免主線程阻塞(非同步操作基於Promise設計模式來管理)
JS中不要使用with
避免使用css表達式
函數的防抖和節流
減少使用eval(主要原因是防止壓縮代碼的時候,由於符號書寫不合規,導致代碼混亂)
圖片地圖:對於多次調取使用的圖片(尤其是背景圖),盡可能把它提取成為公共的樣式,而不是每一次重新設置background
減少filter濾鏡的使用
盡可能減少選擇器的層級
盡可能減少table布局
手動回收堆棧內存(賦值為null)
「棧溢出:死遞」
functionfunc(){
func();
}func();
解決方案:
functionfunc(){
setTimeout(func,0);
}func();
相互引用:引用類型之間的相互調用,形成嵌套式內存
letobj1={
name:'obj1',};
letobj2={
name:'obj2',
x:obj1}
obj1.x=obj2;
以上就是小編今天為大家分享的關於Web前端新手要掌握的性能優化知識的文章,希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助,想要了解更多web前端知識記得關注北大青鳥web培訓官網,最後祝願小夥伴們工作順利,成為一名優秀的web前端工程師。
⑶ 網站性能優化有哪些
一、提高伺服器並發處理能力
我們總是希望一台伺服器在單位時間內能處理的請求越多越好,這也成了web伺服器的能力高低的關鍵所在。伺服器之所以可以同時處理多個請求,在於操作系統通過多執行流體系設計,使得多個任務可以輪流使用系統資源,這些資源包括CPU、內存以及I/O等。這就需要選擇一個合適的並發策略來合理利用這些資源,從而提高伺服器的並發處理能力。這些並發策略更多的應用在apache、nginx、lighttpd等底層web server軟體中。
二、Web組件分離
這里所說的web組件是指web伺服器提供的所有基於URL訪問的資源,包括動態內容,靜態網頁,圖片,樣式表,腳本,視頻等等。這些資源在文件大小,文件數量,內容更新頻率,預計並發用戶數,是否需要腳本解釋器等方面有著很大的差異,對不同特性資源採用能充分發揮其潛力的優化策略,能極大的提高web站點的性能。例如:將圖片部署在獨立的伺服器上並為其分配獨立的新域名,對靜態網頁使用epoll模型可以在大並發數情況下吞吐率保持穩定。
三、資料庫性能優化和擴展。
Web伺服器軟體在資料庫方面做的優化主要是減少訪問資料庫的次數,具體做法就是使用各種緩存方法。也可以從資料庫本身入手提高其查詢性能,這涉及到資料庫性能優化方面的知識本文不作討論。另外也可以通過主從復制,讀寫分離,使用反向代理,寫操作分離等方式來擴展資料庫規模,提升資料庫服務能力。
四、Web負載均衡及相關技術
負載均衡是web站點規模水平擴展的一種手段,實現負載均衡的方法有好幾種包括基於HTTP重定向的負載均衡,DNS負載均衡,反向代理負載均衡,四層負載均衡等等。
對這些負載均衡方法做簡單的介紹:基於HTTP重定向的負載均衡利用了HTTP重定向的請求轉移和自動跳轉功能來實現負載均衡,我們熟悉的鏡像下載就使用這種負載均衡。DNS負載均衡是指在一個DNS伺服器中為同一個主機名配置多個IP地址,在應答DNS查詢時返回不同的解析結果將客戶端的訪問引到不同的機器上,使得不同的客戶端訪問不同的伺服器,從而達到負載均衡的目的。反向代理負載均衡也叫七層負載均衡,這是因為反向代理伺服器工作在TCP七層結構的第七層(應用層),它通過檢查流經的HTTP報頭,根據報頭內的信息來執行負載均衡任務。四層負載均衡是基於NAT技術的負載均衡,它將一個Internet上合法注冊的IP地址映射為多個內部伺服器的IP地址,對每次TCP連接請求動態使用其中一個內部IP地址,達到負載均衡的目的。此外,還有工作在數據鏈路層(第二層)的直接路由方式下的負載均衡,它通過修改數據包目標MAC地址來實現。以及,基於IP隧道的負載均衡,在這種方式下可以將實際伺服器根據需要部署在不同的地域,並根據就近訪問的原則來轉移請求,CDN服務便是基於IP隧道技術來實現的。
Web負載均衡在擴展web伺服器規模的同時也給web站點性能優化提供了一個更大更復雜也更靈活自由的平台,基於該平台性能優化的策略包括共享文件系統,內容分發與同步,分布式文件系統,分布式計算,分布式緩存等等。
五、web緩存技術
web緩存技術被認為是減輕伺服器負載、降低網路擁塞、增強萬維網可擴展性的有效途徑,其基本思想是利用客戶訪問的時間局部性(Temporal Locality)原理,將客戶訪問過的內容在Cache中存放一個副本,當該內容下次被訪問時,不必連接到駐留網站或重新計算生成,而是由Cache中保留的副本提供。Web緩存可以帶來如下的好處:
(1) 減少網路流量,從而減輕網路擁塞;這是因為緩存避免了一部分HTTP請求。
(2) 降低客戶訪問延遲,其主要原因有:①已緩存的內容,客戶可以緩存獲取而不是從伺服器獲取或重新計算生成,從而減小了傳輸延遲縮短了響應時間;②沒有被緩存的內容由於網路擁塞及伺服器負載的減輕而可以較快地被客戶獲取;
(3) 由於客戶的部分或者全部請求內容可以從通過緩存獲取,從而減輕了遠程伺服器負載。
(4) 如果由於伺服器故障或網路故障造成伺服器無法響應客戶請求,客戶可以從緩存中獲取緩存的內容副本,使得web站點服務的魯棒性(Robustness)得到了加強。
可以看出web緩存能給web站點帶可觀的性能提升。其實在用戶發出請求到一幅完整的網頁呈現在用戶面前這一過程中緩存無處不在,下面是web性能優化時常用的緩存技術,你會發現緩存被廣泛應用在各個環節。
瀏覽器緩存:瀏覽器一般會在用戶文件系統中創建一個目錄,用於存放緩存文件,並給每個緩存文件打上必要的標記,比如過期時間等。這些標記主要用於瀏覽器和伺服器之間的緩存協商。
Web伺服器緩存:一個URL在一段較長時間內對應一個唯一的響應內容,比如靜態內容或者更新不太頻繁的動態內容,web伺服器可將響應內容緩存起來,下次web伺服器便可以在收到請求後立即拿出事先緩存好的響應內容並返回給瀏覽器。
代理伺服器緩存:暴露在互聯網中與後端的web伺服器通過內部網路相連的前端伺服器稱為反向代理伺服器,建立在反向代理伺服器上的緩存稱為反向代理緩存。暴露在互聯網中與後端的web客戶端通過內部網路相連的前端伺服器稱為正向代理伺服器,建立在正向代理伺服器上的緩存稱為正向代理緩存。代理伺服器緩存位於客戶端和web伺服器之間,可以將它看做二者之間的一個中繼站。它的存在可以改善客戶端的訪問速度、提升web server的服務能力、安全性等等。
總共分析總結了五種技術,主要希望能夠對web server性能優化這塊提供一個整體的認識。後續會專門就web緩存技術發表一些自己的看法。