前端代碼優化方法

時間 2019-11-10

標籤前端代碼優化方法简体版

原文原文鏈接

1、減小HTTP請求css

1.合併CSS、js：每次調用js、css都要發送一次http請求，因此並非分開寫好幾個文件比較好html

js、css壓縮。js壓縮能夠用gruntjquery

HTML優化：json

使用語義化標籤
減小iframe：iframe是SEO的大忌，iframe有好處也有弊端
避免重定向

CSS優化：跨域

刪除空樣式
不濫用浮動，字體，須要加載的網絡字體根據網站需求再添加
選擇器性能優化
避免使用表達式，避免用id寫樣式

js優化：瀏覽器

壓縮
減小重複代碼

2.圖片優化緩存

圖片合併，CSS sprite技術
不要在html中使用縮放圖片
用更小的而且可緩存的 favicon.ico
縮小圖片分辨率；
改變圖片格式，推薦PNG格式；
下降圖片保存質量。

2、減小DOM操做性能優化

減小對DOM元素的查詢和修改，jquery也是有弊端的服務器

方法：cookie

緩存已經訪問過的元素
"離線"更新節點, 再將它們添加到樹中
避免使用 JavaScript 輸出頁面佈局--應該是 CSS 的事兒

3、使用JSON格式來進行數據交換

JSON是一種輕量級的數據交換格式，採用徹底獨立於語言的文本格式，是理想的數據交換格式。同時，JSON是 JavaScript原生格式，這意味着在 JavaScript 中處理 JSON數據不須要任何特殊的 API 或工具包。

　　與XML序列化相比，JSON序列化後產生的數據通常要比XML序列化後數據體積小

注意json的格式必定要嚴格符合標準

4、js、css文件的加載順序

css放在<head>裏，

js放在<body>結束前：瀏覽器在執行JavaScript代碼時，不能同時作其它事情，即<script>每次出現都會讓頁面等待腳本的解析和執行（不論JavaScript是內嵌的仍是外鏈的），JavaScript代碼執行完成後，才繼續渲染頁面。這個也就是JavaScript的阻塞特性。

　　由於這個阻塞的特色，建議把JavaScript代碼放到</body>標籤之前，這樣既能有效的防止JavaScript的阻塞，又能使得頁面的HTML結構能更快的釋放。

5、CDN加速

CDN（Content Delivery Network，內容分發網絡）

其基本思路是儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。經過在網絡各處放置節點服務器所構成的在現有的互聯網基礎之上的一層智能虛擬網絡，CDN系統可以實時地根據網絡流量和各節點的鏈接、負載情況以及到用戶的距離和響應時間等綜合信息將用戶的請求從新導向離用戶最近的服務節點上。其目的是使用戶可就近取得所需內容，解決 Internet網絡擁擠的情況，提升用戶訪問網站的響應速度。

不足：實時性很差

6、控制cookie大小和污染、session不要存入大數據

Cookie是本地的磁盤文件，每次瀏覽器都會去讀取相應的Cookie

使用Cookie跨域操做時注意在適應級別的域名上設置coockie以便使子域名不受其影響

針對 Web 組件使用域名無關性的 Cookie

設置合理的生命週期，清除時期

session是存在服務器的，因此若是存入大量的數據會給服務器帶來很大的壓力

6、添加 Expires 或 Cache-Control 信息頭 (Add an Expires or a Cache-Control Header)
各個瀏覽器都有針對的方案, Apache 例子【注意：下面的說明例子還不夠精細，具體的環境上還要加一些調整】:

ExpiresActive On
ExpiresByType image/gif "modification plus 1 weeks"Lighttpd 啓用 mod_expire 模塊後：

$HTTP["url"] =~ "\.(jpg|gif|png)___FCKpd___1quot; {
expire.url = ( "" => "access 1 years" )
}Nginx 例子參考:

location ~* \.(jpg|gif|png)$ { if (-f $request_filename) { expires max; break; } }