瀏覽器性能優化

Ryan_Li 發布于2019-08-29 13:03 / 477人閱讀

摘要：和類似，但是瀏覽器關閉則會全部刪除，和相同，實際項目中使用較少。啟用壓縮在服務器端對文件進行壓縮，在瀏覽器端對文件解壓縮，可有效減少通信傳輸的數據量。

1、減少http請求，合理設置 HTTP緩存

http協議是無狀態的應用層協議，意味著每次http請求都需要建立通信鏈路、進行數據傳輸，而在服務器端，每個http都需要啟動獨立的線程去處理。這些通信和服務的開銷都很昂貴，減少http請求的數目可有效提高訪問性能。

減少http的主要手段是合并CSS、合并javascript、合并圖片。將瀏覽器一次訪問需要的javascript和CSS合并成一個文件，這樣瀏覽器就只需要一次請求。圖片也可以合并，多張圖片合并成一張，如果每張圖片都有不同的超鏈接，可通過CSS偏移響應鼠標點擊操作，構造不同的URL。

① 簡單的圖片效果可以使用html+css、canvas或者svg來替換。
② 合并CSS、合并javascript、合并圖片（webPack等包管理工具）
③ 圖片格式，大小選擇，圖片優化

2、應用瀏覽器緩存：
① http緩存（文件級緩存）

② cookie: 儲存在用戶本地終端上的數據(通常經過加密)有長度和個數限制，瀏覽器端也可以通過document.cookie來獲取cookie，并通過js瀏覽器端也可以方便地讀取/設置cookie的值。
③ localStorage: localStorage是html5的一種新的本地緩存方案，目前用的比較多，一般用來存儲ajax返回的數據，加快下次頁面打開時的渲染速度。localstorage大小有限制，不適合存放過多的數據，如果數據存放超過最大限制會報錯，并移除最先保存的數據。localStorage存數的數據是不能跨瀏覽器共用的，一個瀏覽器只能讀取各自瀏覽器的數據
localStorage核心API:
localStorage.setItem(key, value) //設置記錄
localStorage.getItem(key) //獲取記錄
localStorage.removeItem(key) //刪除該域名下單條記錄
localStorage.clear() //刪除該域名下所有記錄

注：localStorage對象的屬性值只能是字符串，json對象可以根據當然也可以借助JSON類，將對象轉換成字符串保存，然后在取出來的時候將json字符串轉換成真正可用的json對象格式。
④ sessionstorage：
sessionStorage和localstorage類似，但是瀏覽器關閉則會全部刪除，api和localstorage相同，實際項目中使用較少。
⑤ application cache
application cahce是將大部分圖片資源、js、css等靜態資源放在manifest文件配置中。當頁面打開時通過manifest文件來讀取本地文件或是請求服務器文件。

3、啟用壓縮

    在服務器端對文件進行壓縮，在瀏覽器端對文件解壓縮，可有效減少通信傳輸的數據量。如果可以的話，盡可能的將外部的腳本、樣式進行合并，多個合為一個。文本文件的壓縮效率可達到80%以上，因此HTML、CSS、javascript文件啟用GZip壓縮可達到較好的效果。但是壓縮對服務器和瀏覽器產生一定的壓力，在通信帶寬良好，而服務器資源不足的情況下要權衡考慮。

采用網上在線壓縮工具（jQuery MiniUI）自己壓縮或者通過webpack、gulp等打包工具進行壓縮處理。

4、CSS Sprites

5、LazyLoad Images：對于圖片而言，在頁面剛加載的時候可以只加載第一屏，當用戶繼續往后滾屏的時候才加載后續的圖片。
①jqueryLazyload方式
②echo.js方式

6、CSS放在頁面最上部，javascript放在頁面最下面

后續文章還會具體講各種優化方法，希望大家一起學習~

云服務器 GPU云服務器性能優化優化系統性能網站性能優化頁面性能優化

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112332.html

前端性能優化

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

Dean 2019-08-21 18:19 評論0 收藏0
淺談網站性能之前端性能優化

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

Winer 2019-08-20 11:04 評論0 收藏0
淺談網站性能之前端性能優化

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

philadelphia 2019-08-01 15:44 評論0 收藏0
圖說 WebAssembly（五）：高性能原因

摘要：本文是圖說系列文章的第五篇。這樣的話，使用的開發者也不需要做任何適配，但是它們卻能獲得更高性能。該圖并不是用來準確的衡量其性能的。運行編寫出高性能的代碼是可能的。這種清理工作由引擎自動進行，稱為垃圾回收。本文是圖說 WebAssembly 系列文章的第五篇。如果您還未閱讀之前的文章，建議您從第一篇入手。在上一篇文章中，我們說到了使用 WebAssembly 和 JavaScript...

seal_de 2019-08-22 16:59 評論0 收藏0
[ 性能優化 ] 我們該優化什么？如何權衡？優化原則？ (2)

摘要：如何權衡優化優化原則優化的目的是希望降低程序的整體開銷。雖然在程序中有許多因素可以優化，但通常人們會認為這個開銷就是程序的執行時間，其實我們更應該將重點放在對程序整體開銷最大的那個部分。性能是一個網站成功的關鍵，然而，如今日益豐富的內容和大量使用Ajax的Web應用程序已迫使瀏覽器達到其處理能力的極限，這就迫使我們需要一些技術來優化我們網站的性能！我相信已經有不少人看過了Yah...

hedzr 2019-08-21 10:30 評論0 收藏0
當面試官問你如何進行性能優化時，你該這么回答(一)

摘要：背景在開發好頁面后，如何讓頁面更快更好的運行，是區分一個程序猿技術水平和視野的一個重要指標。在對這些環節進行優化之前，我們需要知道如何監控這些環節花費了多少時間。為了優化鏈接的環節，前端這里還需要對資源使用，雪碧圖，代碼合并等手段。背景在開發好頁面后，如何讓頁面更快更好的運行，是區分一個程序猿技術水平和視野的一個重要指標。所以面試時，面試官總會問你一個問題，如何進行性能優化呢？如...

elisa.yang 2019-08-22 15:47 評論0 收藏0