⑴ Mac下的webstorm占內存問題/webstorm卡頓
(摘自互聯網)
第一步：檢查Mac內存佔用情況
1、點擊右上角的搜索，搜索活動監視器，雙擊圖標打開
2、可以查看webstorm使用的時候占內存基本是排第一的，尤其是在使用webstorm的iTerm命令窗口操作的時候（我是在使用npm安裝Gulp插件），然後我的本本開始鍵盤發熱（右上角更明顯），有很明顯的風扇轉動的聲音，這個時候察覺到內存不足CPU佔用太高。(ps:所有還是推薦用Mac自帶ITerm)
3、查看webstorm的佔用內存配置文件，打開Finder選擇Application應用程序，找到webstorm右鍵，選擇顯示包內容
路徑：content/bin，選擇webstorm.vmoptions（有的是idea.vmoptions這個文件？）
第二步，將webstorm不需要用到的插件關掉
第三步：修改webstorm使用內存參數，防止卡頓或者閃退（修改閾值減少所佔內存比例並不是減少內存數值）
1、選擇webstorm.vmoptions這個文件用webstorm打開
默認參數是
-Xms128m
-Xmx750m
-XX:MaxPermSize=350m
-XX:ReservedCodeCacheSize=240m
-XX:+UseCompressedOops
-javaagent:JetbrainsCrack.jar
2、修改前兩個數值為：
-Xms512m
-Xmx2048m
-XX:MaxPermSize=350m
-XX:ReservedCodeCacheSize=240m
-XX:+UseCompressedOops
-javaagent:JetbrainsCrack.jar
可能遇到的問題，會彈出窗口詢問是否修改當前文件。因為不是當前打開項目中的文件，是其他文件，軟體有彈出警告框詢問是都修改，這個時候選擇OK確認就可以。
修改成功！
在前端開發中，性能一直都是被大家所重視的一點，然而判斷一個網站的性能最直觀的就是看網頁打開的速度。 其中提高網頁反應速度的一個方式就是使用緩存 。緩存技術一直一來在WEB技術體系中扮演非常重要角色，是快速且有效地提升性能的手段。
一個優秀的緩存策略可以縮短網頁請求資源的距離，減少延遲，並且由於緩存文件可以重復利用，還可以減少帶寬，降低網路負荷。
所以，緩存技術是無數WEB開發從業人員在工作過程中不可避免的一大問題。 在產品開發的時候我們總是想辦法避免緩存產生，而在產品發布之時又在想策略管理緩存提升網頁的訪問速度 。了解瀏覽器的緩存命中原理，是開發WEB應用的基礎，本文著眼於此，學習瀏覽器緩存的相關知識，總結緩存避免和緩存管理的方法，結合具體的場景說明緩存的相關問題。希望能對有需要的人有所幫助。
在實際WEB開發過程中，緩存技術會涉及到不同層、不同端，比如：用戶層、系統層、代理層、前端、後端、服務端等， 每一層的緩存目標都是一致的，就是盡快返回請求數據、減少延遲 ，但每層使用的技術實現是各有不同，面對不同層、不同端的優劣，選用不同的技術來提升系統響應效率。所以，我們首先看下各層的緩存都有哪些技術，都緩存哪些數據，從整體上，對WEB的緩存技術進行了解，如下圖所示：
本篇文章重點講的就是上面紅色框部分緩存內容。
當瀏覽器請求一個網站的時候，會載入各種各樣的資源，比如：HTML文檔、圖片、CSS和JS等文件。對於一些不經常變的內容，瀏覽器會將他們保存在本地的文件中，下次訪問相同網站的時候，直接載入這些資源，加速訪問。
那麼如何知曉瀏覽器是讀取了緩存還是直接請求伺服器？如下圖網站來做個示例：
第一次打開該網站後，如果再次刷新頁面。會發現瀏覽器載入的眾多資源中，有一部分size有具體數值，然而還有一部分請求，比如圖片、css和js等文件並沒有顯示文件大小，而是顯示了 from dis cache 或者 from memory cache 字樣。這就說明了，該資源直接從本地硬碟或者瀏覽器內存讀取，而並沒有請求伺服器。
瀏覽器啟用緩存至少有兩點顯而易見的好處： （1）減少頁面載入時間；（2）減少伺服器負載；
瀏覽器是否使用緩存、緩存多久，是由伺服器控制的 。准確來說，當瀏覽器請求一個網頁（或者其他資源）時， 伺服器發回的響應的「響應頭」部分的某些欄位指明了有關緩存的關鍵信息 。下面看下，HTTP報文中與緩存相關的首部欄位：
根據上面四種類型的首部欄位不同使用策略， 瀏覽器中緩存可分為強緩存和協商緩存 ：
當瀏覽器對某個資源的請求命中了強緩存時， 返回的HTTP狀態為200 ，在chrome的開發者工具的network裡面 size會顯示為from cache ，比如：京東的首頁里就有很多靜態資源配置了強緩存，用chrome打開幾次，再用f12查看network，可以看到有不少請求就是從緩存中載入的：
Expires是HTTP 1.0提出的一個表示資源過期時間的header，它描述的是一個絕對時間，由伺服器返回，用GMT格式的字元串表示 ，如：Expires:Thu, 31 Dec 2037 23:55:55 GMT，包含了Expires頭標簽的文件，就說明瀏覽器對於該文件緩存具有非常大的控制權。
例如，一個文件的Expires值是2020年的1月1日，那麼就代表，在2020年1月1日之前，瀏覽器都可以直接使用該文件的本地緩存文件，而不必去伺服器再次請求該文件，哪怕伺服器文件發生了變化。
所以， Expires是優化中最理想的情況，因為它根本不會產生請求 ，所以後端也就無需考慮查詢快慢。它的緩存原理，如下：
Expires是較老的強緩存管理header， 由於它是伺服器返回的一個絕對時間 ，在伺服器時間與客戶端時間相差較大時，緩存管理容易出現問題， 比如：隨意修改下客戶端時間，就能影響緩存命中的結果 。所以在HTTP 1.1的時候，提出了一個新的header， 就是Cache-Control，這是一個相對時間，在配置緩存的時候，以秒為單位，用數值表示 ，如：Cache-Control:max-age=315360000，它的緩存原理是：
Cache-Control描述的是一個相對時間 ，在進行緩存命中的時候， 都是利用客戶端時間進行判斷 ，所以相比較Expires，Cache-Control的緩存管理更有效，安全一些。
這兩個header可以只啟用一個，也可以同時啟用， 當response header中，Expires和Cache-Control同時存在時，Cache-Control優先順序高於Expires ：
此外，還可以為 Cache-Control 指定 public 或 private 標記。 如果使用 private，則表示該資源僅僅屬於發出請求的最終用戶，這將禁止中間伺服器（如代理伺服器）緩存此類資源 。對於包含用戶個人信息的文件（如一個包含用戶名的 HTML 文檔），可以設置 private，一方面由於這些緩存對其他用戶來說沒有任何意義，另一方面用戶可能不希望相關文件儲存在不受信任的伺服器上。需要指出的是，private 並不會使得緩存更加安全，它同樣會傳給中間伺服器（如果網站對於傳輸的安全性要求很高，應該使用傳輸層安全措施）。 對於 public，則允許所有伺服器緩存該資源 。通常情況下，對於所有人都可以訪問的資源（例如網站的 logo、圖片、腳本等）， Cache-Control 默認設為 public 是合理的 。
當瀏覽器對某個資源的請求沒有命中強緩存， 就會發一個請求到伺服器，驗證協商緩存是否命中，如果協商緩存命中，請求響應返回的http狀態為304並且會顯示一個Not Modified的字元串 ，比如你打開京東的首頁，按f12打開開發者工具，再按f5刷新頁面，查看network，可以看到有不少請求就是命中了協商緩存的：
查看單個請求的Response Header， 也能看到304的狀態碼和Not Modified的字元串，只要看到這個就可說明這個資源是命中了協商緩存，然後從客戶端緩存中載入的 ，而不是伺服器最新的資源：
【Last-Modified，If-Modified-Since】的控制緩存的原理，如下 ：
【Last-Modified，If-Modified-Since】都是根據伺服器時間返回的header，一般來說， 在沒有調整伺服器時間和篡改客戶端緩存的情況下，這兩個header配合起來管理協商緩存是非常可靠的，但是有時候也會伺服器上資源其實有變化，但是最後修改時間卻沒有變化的情況 ，而這種問題又很不容易被定位出來，而當這種情況出現的時候，就會影響協商緩存的可靠性。 所以就有了另外一對header來管理協商緩存，這對header就是【ETag、If-None-Match】 。它們的緩存管理的方式是：
Etag和Last-Modified非常相似，都是用來判斷一個參數，從而決定是否啟用緩存。 但是ETag相對於Last-Modified也有其優勢，可以更加准確的判斷文件內容是否被修改 ，從而在實際操作中實用程度也更高。
協商緩存跟強緩存不一樣，強緩存不發請求到伺服器， 所以有時候資源更新了瀏覽器還不知道，但是協商緩存會發請求到伺服器 ，所以資源是否更新，伺服器肯定知道。大部分web伺服器都默認開啟協商緩存，而且是同時啟用【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】，比如apache:
如果沒有協商緩存，每個到伺服器的請求，就都得返回資源內容，這樣伺服器的性能會極差。
【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】一般都是同時啟用，這是為了處理Last-Modified不可靠的情況。有一種場景需要注意：
比如，京東頁面的資源請求，返回的repsonse header就只有Last-Modified，沒有ETag：
協商緩存需要配合強緩存使用，上面這個截圖中，除了Last-Modified這個header，還有強緩存的相關header， 因為如果不啟用強緩存的話，協商緩存根本沒有意義 。
如果資源已經被瀏覽器緩存下來，在緩存失效之前，再次請求時，默認會先檢查是否命中強緩存，如果強緩存命中則直接讀取緩存，如果強緩存沒有命中則發請求到伺服器檢查是否命中協商緩存，如果協商緩存命中，則告訴瀏覽器還是可以從緩存讀取，否則才從伺服器返回最新的資源。其瀏覽器判斷緩存的詳細流程圖，如下：
⑶ 1 如何優化Tomcat
（1）bin：主要用來存放命令，.bat是windows下，.sh是Linux下
（2）conf：主要用來存放tomcat的一些配置文件
（3）lib：存放tomcat依賴的一些jar包
（4）logs：存放tomcat在運行時產生的日誌文件
（5）temp：存放運行時產生的臨時文件
（6）webapps：存放應用程序
（7）work：存放tomcat運行時編譯後的文件，比如JSP編譯後的文件
tomcat優化可以有幾個方向：配置項的刪除，配置參數的修改，jdk參數修改、Tomcat內存優化、Tomcat並發優化、Tomcat緩存優化
web項目中自帶的WEB-INF/web.xml，
tomcat自帶的conf/web.xml以及conf/server.xml文件。
因為這些xml文件都會被tomcat解析，所以優化方向是將這三類文件中不必要的配置刪除。
tomcat在啟動時，會將web項目中WEB-INF/web.xml和自己的conf/web.xml進行合並，然後在ContextConfig類下的configureContext()統一解析這些內容：
這個只能是在項目中不需要的配置不要放進去，有過期的配置要及時刪除，減少tomcat的解析成本。
這是一個處理靜態文件的servlet，如果項目中不需要tomcat進行靜態文件的處理，可以將其刪掉。
這個servlet是用來編譯和執行jsp文件的，如果項目中沒有jsp文件，可以將其刪掉。
項目中沒有jsp，關於jsp下面的映射也可以刪除：
文件中提供的mime類型非常多，如果有確定項目中不會涉及到的類型，可以刪除其映射配置。
如果不需要展示tomcat的歡迎頁，可以將其刪掉。
下面是tomcat8.5版本提供的默認listener列表：
作用是在Tomcat初始化時，列印一下Tomcat相關的版本信息以及操作系統和jdk環境信息，可以刪掉。
Tomcat啟動時，檢查APR庫，如果存在則載入，這個配置僅當connector的protocol設置為AJP/1.3時有用，如果非AJP/1.3，可以刪除。
Java運行環境可能導致某些已知位置的內存泄漏或文件鎖定，
提供這些情況的解決方案。
作用於全局資源，通過該監聽器，初始化標簽中定義的全局JNDI資源；
如果沒有該監聽器，定義的全局資源都不能使用。
如果不使用GlobalNamingResources定義全局資源，可以刪除。
Web應用因thread-local導致的內存泄露而要停止時，該監聽器會觸發線程池中線程的更新。
只有當Web應用(即Context元素)的屬性設置為true時，該監聽器才有效。
官方文檔對配置的解釋為：
GlobalNamingResources可以定義全局資源，可以看出，這個tomcat的默認配置是通過讀取$TOMCAT_HOME/ conf/tomcat-users.xml實現的。
tomcat-user.xml用於定義tomcat管理頁面相關配置，如果不登錄管理界面可以刪掉。
官網中對於這個connector有如下描述：
The AJP Connector element represents a Connector component that communicates with a web connector via the AJP protocol. This is used for cases where you wish to invisibly integrate Tomcat into an existing (or new) Apache installation, and you want Apache to handle the static content contained in the web application, and/or utilize Apache's SSL processing.
可知當tomcat需要集成到Apache伺服器時才使用這個connector，現在一般都用Nginx代替Apache，所以不使用Apache的話這個也可以刪掉。
tomcat默認配置包含如下connector：
<Connector port="8009" protocol="AJP/1.3" redirectPort="8443" />
Realm，可以把它理解成「域」；
Realm提供了一種用戶密碼與web應用的映射關系，從而達到角色安全管理的作用，tomcat默認的這個realm是和name為UserDatabase的資源綁定的，而該資源在Server元素中使用GlobalNamingResources配置。如果不需要可以刪掉。
Valve的意思是「閥門」，不同的Valve有不同的特性，Valve的配置中AccessLogValve的作用是記錄其所在容器處理的所有請求，默認配置中的Valve放在Host下，便可以記錄該Host處理的所有請求。
AccessLogValve記錄的日誌就是訪問日誌，每天的請求會寫到一個日誌文件里。現在一般記錄Nginx訪問日誌，這個也可以刪除。
tomcat是用Java寫的，就要運行在jvm上，垃圾處理方式等都要遵循jvm的方式。
tomcat中設置jvm參數在 catalina.sh(Linux)和catalina.bat(windows)中，以JAVA_OPTS變數存儲。以catalina.sh為例：
可以在該變數中添加jvm參數，達到減少gc次數等目標，例如根據tomcat所在伺服器修改jvm內存大小等。
參數優化主要是優化sever.xml中的配置參數，示例server.xml如下：
port：指定一個埠，這個埠負責監聽關閉tomcat的請求。
shutdown：指定向埠發送的命令字元串。
sever配置沒什麼可優化的。
name：指定service的名字。
service配置沒什麼可優化的。
port：指定伺服器端要創建的埠號，並在這個埠監聽來自客戶端的請求
minProcessors：伺服器啟動時創建的處理請求的線程數
maxProcessors：最大可以創建的處理請求的線程數
enableLookups：如果為true，則可以通過調用request.getRemoteHost()進行DNS查詢來得到遠程客戶端的實際主機名，若為false則不進行DNS查詢，而是返回其ip地址
redirectPort：指定伺服器正在處理http請求時收到了一個SSL傳輸請求後重定向的埠號
acceptCount：指定當所有可以使用的處理請求的線程數都被使用時，可以放到處理隊列中的請求數，超過這個數的請求將不予處理
maxConnections：達到這個值之後，將繼續接受連接，但是不處理，能繼續接受多少根據acceptCount的值
minSpareThreads：最小空閑線程數
connectionTimeout：指定超時的時間數(以毫秒為單位)
官網8.5版本connector使用連接類型如下：
查看Connector源碼:
可知默認協議使用的是Http11NioProtocol，即NIO方式。
tomcat默認連接池有限制，可以為connector配置自己的連接池，例如：
在連接池中可以根據項目自定義最大線程數量。
name：屬性用於日誌和錯誤信息，在整個Server中應該唯一
defaultHost：defaultHost屬性指定了默認的host名稱，當發往本機的請求指定的host名稱不存在時，一律使用defaultHost指定的host進行處理；因此defaultHost的值，必須與Engine中的一個Host組件的name屬性值匹配
沒什麼可優化的。
name：指定虛擬主機的主機名，一個Engine中有且僅有一個Host組件的name屬性與Engine組件的defaultHost屬性相匹配；
註：一般情況下，主機名需要是在DNS伺服器中注冊的網路名，但是Engine指定的defaultHost不需要
appBase：應用程序基本目錄，即存放應用程序的目錄
unpackWARs：指定了是否將war文件解壓，如果為true，則通過解壓後的目錄運行該Web應用；如果為false，則直接使用WAR文件運行Web應用
autoDeploy：是否自動部署，Tomcat運行期間會用一個線程定時檢查，如果有新的web工程會自動部署。
autoDeploy生產環境之下可以改成false，減少tomcat的負擔。
autoDeploy有需要注意的點，如果為true，拷貝war到webapp下面，tomcat自動解壓並部署。但是停掉tomcat拷貝新的war包過去，tomcat不會解壓新包並後覆蓋舊目錄，因為tomcat直接使用了之前解壓過的目錄。官網有描述：
If you redeploy an updated WAR file, be sure to delete the expanded directory when restarting Tomcat, so that the updated WAR file will be re-expanded (note that the auto deployer, if enabled, will automatically expand the updated WAR file once the previously expanded directory is removed).
docBase：代表應用程序或war文件存放的路徑，這個可以自由指定，例如d:/study
path：
表示此web應用程序的url的前綴，這樣請求的url為 http://localhost:8080/path/ **
reloadable：如果為true，則tomcat會自動檢測應用程序的/WEB-INF/lib和/WEB-INF/classes目錄的變化，自動裝載新的應用程序，可以在不重起tomcat的情況下改變應用程序
生產環境中可以把reloadable設置為false。
className：指定Realm使用的類名，此類必須實現org.apache.catalina.Realm介面
沒什麼可優化的
className：規定了Valve的類型；例如tomcat默認的是AccessLogValve。
directory：指定日誌存儲的位置，默認日誌存儲在 TOMCAT_HOME/logs目錄下，可以看到如下所示的日誌文件。
沒什麼可優化的。
Tomcat內存優化主要是對 tomcat 啟動參數優化，我們可以在 tomcat 的啟動腳本 catalina.sh 中設置 java_OPTS 參數。
現公司伺服器內存一般都可以加到最大2G ，所以可以採取以下配置：
JAVA_OPTS=』-Xms1024m -Xmx2048m -XX: PermSize=256M -XX:MaxNewSize=256m -XX:MaxPermSize=256m』
配置完成後可重啟Tomcat ，通過以下命令進行查看配置是否生效：
首先查看Tomcat 進程號：sudo lsof -i:9027
我們可以看到Tomcat 進程號是 12222 。
查看是否配置生效：sudo jmap – heap 12222
我們可以看到MaxHeapSize 等參數已經生效。
在Tomcat 配置文件 server.xml 中的
<Connector port="9027"
protocol="HTTP/1.1"
maxHttpHeaderSize="8192"
minProcessors="100"
maxProcessors="1000"
acceptCount="1000"
redirectPort="8443"
disableUploadTimeout="true"/>
maxThreads 客戶請求最大線程數
minSpareThreads Tomcat初始化時創建的 socket 線程數
maxSpareThreads Tomcat連接器的最大空閑 socket 線程數
enableLookups 若設為true, 則支持域名解析，可把 ip 地址解析為主機名
redirectPort 在需要基於安全通道的場合，把客戶請求轉發到基於SSL 的 redirectPort 埠
acceptAccount 監聽埠隊列最大數，滿了之後客戶請求會被拒絕（不能小於maxSpareThreads ）
connectionTimeout 連接超時
minProcessors 伺服器創建時的最小處理線程數
maxProcessors 伺服器同時最大處理線程數
URIEncoding URL統一編碼
compression 打開壓縮功能
compressionMinSize 啟用壓縮的輸出內容大小，這裡面默認為2KB
compressableMimeType 壓縮類型
connectionTimeout 定義建立客戶連接超時的時間. 如果為 -1, 表示不限制建立客戶連接的時間
⑷ 網站性能優化有哪些
一、提高伺服器並發處理能力
我們總是希望一台伺服器在單位時間內能處理的請求越多越好，這也成了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緩存技術發表一些自己的看法。
⑸ Web前端性能優化的實用技巧匯總
今天小編要跟大家分享的文章是關於Web前端性能優化的實用技巧匯總。javascript在瀏覽器中運行的性能，可以認為是開發者所面臨的最嚴重的可用性問題。這個問題因為javascript的阻塞性而變得復雜，事實上，多數瀏覽器使用單一進程來處理用戶界面和js腳本執行，所以同一時刻只能做一件事。js執行過程耗時越久，瀏覽器等待響應的時間越長。
一.提高載入性能
1.IE8,FF,3.5,Safari4和Chrome都允許並行下載js文件，當script下載資源時不會阻塞其他script的下載。但是js下載仍然會阻塞其他資源的下載，如圖片。盡管腳本下載不會互相影響，但頁面仍然必須等待所有塌塵岩js代碼下載並執行完才能繼續。因兄雹此仍然存在腳本阻塞問題.推薦將所有js文件放在body標簽底部以減少對整個頁面的影響。
2.減少頁面外鏈腳本文件的數量將會提高頁面性能：
http請求會帶來額外的開銷，因此下載單個300k的文件將比下載10個30k的文件效率更高。
3.動態腳本載入技術：
無論何時啟動下載，文件的下載和執行都不會阻塞頁面其他進程。
functionlaodScript(url,callback){
varscript=document.createElement('script');_
_cript.type='text/javascript'__f(script.readyState){//ie
____cript.onreadystatechange=function(){_____
if(script.readyState=='loaded'||script.readyState=='complete'){_______
_cript.onreadystatechange=null;_______
callback()_____
____
__
}else{//其他瀏覽器___
script.onload=function(){_____
_allback()
___}_
}_
script.src=url;_
document.getElementsByTagName('head')[0].appendChild(script);
}
//使用
loadScript('./a.js',function(){_
loadScript('./b.js',function(){___
loadScript('./c.js',function(){_____
console.log('載入完成')___
})_
})
})
4.無阻塞載入類庫——LABjs,使用方法如下：
//鏈式調用時文件逐個下載，.wait()用來指定文件下載並執行完畢後所調用的函數
$LAB.script('./a.js')_
.script('./b.js')_
.wait(function(){__
_pp.init();
})
//為了保證執行順序，可以這么做,此時a必定在b前執行
$LAB.script('./a.js').wait()_
.script('./b.js')_
.wait(function(){___
_pp.init();
})
二.數據存取與JS性能
1.在js中，數據存儲的位置會對代碼整體性能產生重大影響。數據存儲共有4種方式：字面量，變數，數組項，對象成員。他們有著各自的性能特點。
2.訪問字面量和局部變數的速度最快，相反，訪問數組和對象相對較慢
3.由於局部變數存在於作用域鏈的起始位置，因此訪問局部變數的比訪問跨域作用變數更快
4.嵌套的對象成員會明顯影響性能，應盡量避免
5.屬性和方法在原型鏈位置越深，訪問他的速度越慢
6.通常我們可以把需要多次使用的對象成員，數組元素，跨域變數保存在局部變數中來改善js性能
三.DOM編程
1.訪問DOM會影響瀏覽器性能，修改DOM則更耗費性能，因為他會導致瀏覽器重新計算頁面的幾何變化。<通常的做法是減少訪問DOM的次數，把運算盡量留在JS這一端。
注團御：如過在一個對性能要求比較高的操作中更新一段HTML，推薦使用innerHTML，因為它在絕大多數瀏覽器中運行的都很快。但對於大多數日常操作而言，並沒有太大區別，所以你更應該根據可讀性，穩定性，團隊習慣，代碼風格來綜合決定使用innerHTML還是createElement()
2.HTML集合優化
HTML集合包含了DOM節點引用的類數組對象，一直與文檔保持連接，每次你需要最新的信息時，都會重復執行查詢操作，哪怕只是獲取集合里元素的個數。
①_優化一——集合轉數組collToArr
functioncollToArr(coll){_
for(vari=0,a=[],len=coll.length;i
a._ush(coll[i]);
__
returna
}
②緩存集合length
③訪問集合元素時使用局部變數（即將重復的集合訪問緩存到局部變數中，用局部變數來操作）
3.遍歷DOM
①使用只返回元素節點的API遍歷DOM,因為這些API的執行效率比自己實現的效率更高：
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
屬性名
被替代屬性
children
childNodes
childElementCount
childNodes.length
firstElementChild
firstChild
lastElementChild
lastChild
nextElementSibling
nextSibling
previousElementSibling
previousSibling
_諮≡衿_PI——querySelectorAll()
querySelectorAll()方法使用css選擇器作為參數並返回一個NodeList——包含著匹配節點的類數組對象，該方法不會返回HTML集合，因此返回的節點不會對應實時文檔結構，著也避免了HTML集合引起的性能問題。
let_rr=_ocument.querySelectorAll('div.warning,_iv.notice>_')
4.重繪和重排
瀏覽器在下載完頁面的所有組件——html,js,css,圖片等之後，會解析並生成兩個內部數據結構——_OM樹，渲染樹.一旦DOM樹和渲染樹構建完成，瀏覽器就開始繪制頁面元素（paint）.
①重排發生的條件：
添加或刪除可見的DOM元素位置變化元素尺寸改變內容改變頁面渲染器初始化瀏覽器窗口尺寸變化出現滾動條時會觸發整個頁面的重排_嘏瘧囟ㄖ鞀
5.渲染樹變化的排列和刷新
大多數瀏覽器通過隊列化修改並批量執行來優化重排過程，然而獲取布局信息的操作會導致隊列強制刷新。
offsetTop,offsetWidth...
scrollTop,scrollHeight...
clientTop,clientHeight...
getComputedStyle()
一些優化建議：將設置樣式的操作和獲取樣式的操作分開：
//設置樣式
body.style.color='red'
body.style.fontSize=པpx'
//讀取樣式
letcolor=body.style.color
let_ontSize=_ody.style.fontSize
另外，獲取計算屬性的兼容寫法：
functiongetComputedStyle(el){_
varcomputed=(document.body.currentStyle?el.currentStyle:document.defaultView.getComputedStyle(el,'');_
returncomputed
}
6.最小化重繪和重排
①.批量改變樣式
/*使用cssText
*/el.style.cssText='border-left:1px;_order-right:2px;_adding:20px'
②.批量修改dom的優化方案——使元素脫離文檔流-對其應用多重改變-把元素帶迴文檔
functionappendDataToEl(option){
vartargetEl=option.target||document.body,___
createEl,___
data=option.data||[];_//讓容器脫離文檔流，減少重繪重排_
vartargetEl_display=targetEl.style.display;_
targetEl.style.display='none'
_
//*****創建文檔片段來優化Dom操作****_
varfragment=document.createDocumentFragment();_//給元素填充數據_
for(vari=0,max=data.length;i
createEl=
document.createElement(option.createEl);___
for(varitemindata[i]){_____
if(item.toString()==='text'){_______
createEl.appendChild(document.createTextNode(data[i][item]));________ontinue;___________
_f(item.toString()==='html'){_______
createEl.innerHTML=item,data[i][item];_______
continue;_____
}_____
_reateEl.setAttribute(item,data[i][item]);_______
//****將填充好的node插入文檔片段****___
fragment.appendChild(createEl);___
//****將文檔片段統一插入目標容器****_
targetEl.appendChild(fragment);_
//顯示容器，完成數據填充_
targetEl.style.display=
targetEl_display;
}
//使用
varwrap=document.querySelectorAll('.wrap')[0];
vardata=[_
_name:'xujaing',text:'選景',title:'xuanfij'},_
{name:'xujaing',text:'選景',title:'xuanfij'},_
{name:'xujaing',text:'選景',title:'xuanfij'}];
appendDataToEl({_
target:wrap,_
createEl:'div',
_ata:data
});
上面的優化方法使用了文檔片段:_蔽頤前鹽牡燈尾迦氳澆詰闃惺保導噬媳惶砑擁鬧皇歉悶蔚淖詠詰悖皇瞧偽舊懟？梢允溝_om操作更有效率。
②.緩存布局信息
//緩存布局信息
letcurrent=el.offsetLeft;
current++;
el.style.left=current+'px'
if(current>300){_
stop();
}
④.慎用:hover
如果有大量元素使用:hover,那麼會降低相應速度，CPU升高
⑤.使用事件委託（通過事件冒泡實現）來減少事件處理器的數量，減少內存和處理時間
functiondelegation(e,selector,callback){_
e=e||window.event;_
vartarget=e.target||e.srcElement;
_if(target.nodeName!==selector||
target.className!==selector||target.id!==selector){___
return;
_}_
if(typeofe.preventDefault==='function'){__
_.preventDefault();___
e.stopPropagation();
}else{___
e.returnValue=false;
e.cancelBubble=true;_
}
__allback()}
四.演算法和流程式控制制
1.循環中減少屬性查找並反轉(可以提升50%-60%的性能)
//for循環
for(vari=item.length;i--){_
process(item[i]);
}
//while循環
varj=item.length;
while(j--){_
process(item[i]);
}
2.使用Duff裝置來優化循環（該方法在後面的文章中會詳細介紹）
3.基於函數的迭代（比基於循環的迭代慢）
items.forEach(function(value,index,array){__rocess(value);})
4.通常情況下switch總比if-else快，但是不是最佳方案
五.字元串和正則表達式
1.除了IE外，其他瀏覽器會嘗試為表達式左側的字元串分配更多的內存，然後簡單的將第二個字元串拷貝到他的末尾，如果在一個循環中，基礎字元串位於最左側，就可以避免重復拷貝一個逐漸變大的基礎字元串。2.使用[sS]來匹配任意字元串3.去除尾部空白的常用做法：
if(!String.prototype.trim){_
String.prototype.trim=function(){___
returnthis.replace(/^s+/,'').replace(/ss*$/,'')_
}
}
六.快速響應的用戶界面
1.瀏覽器的UI線程：用於執行javascript和更新用戶界面的進程。
2.在windows系統中定時器解析度為15毫秒，因此設置小於15毫秒將會使IE鎖定，延時的最小值建議為25ms.
3.用延時數組分割耗時任務：
functionmultistep(steps,args,callback){_
vartasks=steps.concat();
__etTimeout(function(){___
vartask=tasks.shift();___
task.apply(null,args||[]);_//調用Apply參數必須是數組
___
if(tasks.length>0){_____
setTimeout(arguments.callee,25);
___else{_____
_allback();___
__
},25);
}
4.記錄代碼運行時間批處理任務：
functiontimeProcessArray(items,process,callback){_
vartodo=item.concat();__etTimeout(function(){___
varstart=+newDate();
__o{_____
_rocess(todo.shift());___
}while(todo.length>0&&(+newDate()-start<50));
____f(todo.length>0){_____
_etTimeout(arguments.callee,25);
___else{____
_allback(items);_
}_
_,25)
}
5.使用WebWorker：它引入了一個介面，能使代碼運行且不佔用瀏覽器UI線程的時間。一個Worker由如下部分組成：
①一個navigator對象，包括app