二十二世纪古墓奇兵爱慕影院

小梁建站專注重慶中小企業網站建設SEO優化,讓您網站更具價值!

當前位置:首頁 > WEB前端學習 > web桌面端前端性能優化24個策略,趕緊打包收藏!

web桌面端前端性能優化24個策略,趕緊打包收藏!

時間:2018-08-18 23:56 來源:重慶網站制作公司(www.l2qz.net) 作者:重慶網站建設公司

web桌面端前端性能優化24個策略,趕緊打包收藏!


web桌面端前端性能優化24個策略,趕緊打包收藏!
 
 
減少 HTTP 資源請求次數
合并靜態資源圖片、JavaScript 或 CSS 代碼,減少頁面請求數和資源請求消耗
 
避免重復的資源,防止增加多余請求
 
減小 HTTP 請求大小
減少沒必要的圖片、JavaScript、CSS 及 HTML 代碼
 
對文件進行壓縮優化
 
使用 gzip 等方式壓縮傳輸文件
 
將 CSS 或 JavaScript 放到外部文件中,避免使用 style 或 script 標簽直接引入
在 HTML 文件中引用外部資源可以有效利用瀏覽器的靜態資源緩存
 
避免頁面中空的 href 和 src
當 link 標簽的 href 屬性為空,或 script、img、iframe 標簽的 src 屬性為空時,瀏覽器在渲染的過程中仍會將 href 屬性或 src 屬性中的空內容進行加載,直至加載失敗,這樣就阻塞了頁面中其他資源的下載進程,而且最終加載到的內容是無效的,因此要盡量避免
 
// 不推薦
<img src="" alt="photo">
<a href="">點擊鏈接</a>
為 HTML 指定 Cache-Control 或 Expires
為 HTMl 內容設置 CaChe-Control 或 Expires 可以將 HTML 內容緩存起來,避免頻繁向服務器端發送請求。
 
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2016 23:00:00 GMT" />
合理設置 Etag 和 Last-Modified
合理設置 Etag 和 Last-Modified 使用瀏覽器緩存,對于未修改的文件,靜態資源服務器會向瀏覽器端返回304,讓瀏覽器從緩存中讀取文件,減少 Web 資源下載的帶寬消耗并降低服務器負載
 
<meta http-equiv="last-modified" content="Mon, 03 Oct 2016 17:45:57 GMT" />
減少頁面重定向
頁面每次重定向都會延長頁面內容返回的等待延時,一次重定向大約需要600毫秒的時間開銷,為了保證用戶盡快看到頁面內容,要盡量避免頁面重定向
 
使用靜態資源分域存放來增加下載并行數
瀏覽器在同一時刻向同一個域名請求文件的并行下載數是有限的,因此可以利用多個域名的主機來存放不同的靜態資源,增大頁面加載時資源的并行下載數,縮短頁面資源加載的時間
 
使用靜態資源 CDN 來存儲文件
如果條件允許,可以使用 CDN 網絡加快同一個地理區域內重復靜態資源文件的響應下載速度,縮短資源請求時間
 
使用 CDN Combo 下載傳輸內容
CDN Combo 是在 CDN 服務器端將多個文件請求打包成一個文件的形式來返回的技術,這樣可以實現 HTTP 連接傳輸的一次性復用,減少瀏覽器的 HTTP 請求數,加快資源下載速度
 
例如同一個域名 CDN 服務器上的 a.js,b.js,c.js 就可以按如下方式在一個請求中下載:
 
<script src="//cdn.domain.com/path/a.js,b.js,c.js"></script>
使用可緩存的 AJAX
可以返回內容相同的請求,沒必要每次都直接從服務器端拉取,合理使用 AJAX 緩存能加快 AJAX 響應速度來減輕服務器壓力
 
$.ajax({
   url: url,
   type: 'get',
   cache: true, // 推薦使用緩存
   data: {},
   success() {
       // ....
   },
   error() {
       // ...
   }
});
使用 GET 來完成 AJAX 請求
使用 XMLHttpRequest 時,瀏覽器中的 POST 方法發送請求首先發送文件頭,然后發送 HTTP 正文數據,而使用 GET 時只發送頭部,所以在拉取服務端數據時使用 GET 請求效率更高
 
$.ajax({
   url: url,
   type: 'get', // 推薦使用 get 完成請求
   data: {},
   success() {
       // ....
   },
   error() {
       // ...
   }
});
減少 Cookie 的大小并進行 Cookie 隔離
HTTP 請求通常默認帶上瀏覽器的 Cookie 一起發送給服務器,所以在非必要的情況下,要盡量減少 Cookie 來減小 HTTP 請求的大小
 
對應靜態資源,盡量使用不同的域名來存放,因為 Cookie 默認不能跨域的,這樣就做到了不同域名下靜態資源請求的 Cookie 隔離
 
縮小 favicon.ico 并緩存
有利于 favicon.ico 的重復加載,因為一般一個 Web 應用的 favicon.ico 是很少改變的
 
推薦使用異步 JavaScript 資源
異步的 JavaScript 資源不會阻塞文檔解析,所以允許在瀏覽器中優先渲染頁面,延后加載腳本執行。
 
例如:
 
<script src="main.js" defer></script>
<script src="main.js" async></script>
使用 async 時,加載和渲染后續文檔元素的過程和 main.js 的加載與執行是并行的。使用 defer 時,加載后續文檔元素的過程和 main.js 的加載是并行的,但是 main.js 的執行要在頁面所有元素解析完成之后才開始執行。
 
消除阻塞渲染的 CSS 及 JavaScript
對于頁面中加載時間過長的 CSS 或 JavaScript 文件,需要進行合理拆分或延后加載,保證關鍵路徑的資源能快速加載完成
 
避免使用 CSS import 引用加載 CSS
CSS 中的 @import 可以從另一個樣式文件引入樣式,但應該避免這種用法,因為這樣會增加  CSS 資源加載的關鍵路徑長度,帶有 @import 的 CSS 樣式需要在 CSS 文件串行解析到 @import 時才會加載另外的 CSS 文件,大大延后 CSS 渲染完成的時間
 
頁面渲染類
把 CSS 資源引用放到 HTML 文件頂部
一般推薦將所有 CSS 資源盡早指定在 HTML 文檔 head 中,這樣瀏覽器可以優先下載 CSS 并盡早完成頁面渲染
 
JavaScript 資源引用放到 HTML 文件底部
JavaScript 資源放到 HTML 文檔底部可以防止 JavaScript 的加載和解析執行對頁面渲染造成阻塞,這是因為 JavaScript 資源默認是解析阻塞的,除非被標記為異步或者通過其他的異步方式加載
 
不要在 HTML 中直接縮放圖片
在 HTML 中直接縮放圖片會導致頁面的重排重繪,此時可能會使頁面中的其他操作產生卡頓,因此要盡量減少在頁面中直接進行圖片縮放
 
減少 DOM 元素數量和深度
HTML 中標簽元素越多,標簽的層級越深,瀏覽器解析 DOM 并繪制到瀏覽器中所花的時間就越長,所以盡可能保持 DOM 元素簡潔和層級較少
 
盡量避免使用 table、iframe 等慢元素
table 內容的渲染是將 table 的 DOM 渲染樹全部生成完成并一次性繪制到頁面上的,所以在長表格渲染時很耗性能,應該盡量避免使用它,可以考慮使用列表元素 ul 代替
 
盡量使用異步的方式動態添加 iframe,因為 iframe 內資源的下載進程會阻塞父頁面靜態資源的下載與 CSS 及 HTML DOM 的解析
 
避免運行耗時的 JavaScript
長時間運行的 JavaScript 會阻塞瀏覽器構建 DOM 樹、DOM 渲染樹、渲染頁面。所以,任何與頁面初次渲染無關的邏輯功能都應該延遲加載執行,這和 JavaScript 資源的異步加載思路是一致的
 
避免使用 CSS 表達式或 CSS 濾鏡
CSS 表達式或 CSS 濾鏡的解析渲染速度是比較慢的,在有其他解決方案的情況下應該盡量避免使用
 
// 不推薦
.opacity {
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
 

版權聲明:本文:web桌面端前端性能優化24個策略,趕緊打包收藏! 由重慶網站制作公司(www.l2qz.net)原創內容,如需要轉載請注明原文網址:重慶網站建設公司http://www.l2qz.net/

 
喜歡看,就分享到:

圍觀: 9999次 | 責任編輯:重慶網站建設公司

回到頂部
二十二世纪古墓奇兵爱慕影院 a6娱乐dj啊纹 琼海龙寿洋网红桥 新人注册送的lg平台 最准三个肖免费资料 新疆时时走势图 时时彩技巧 69077高手论坛创富论坛高效 重庆欢乐生肖对应的号码 博澳娱乐用户登录 篮球比分直播足彩网 吉林快三计划软件下载 二八杠游戏网站