<dfn id="w48us"></dfn><ul id="w48us"></ul>
  • <ul id="w48us"></ul>
  • <del id="w48us"></del>
    <ul id="w48us"></ul>
  • 加速HTML5應用的九大方法

    時間:2024-08-26 12:58:39 HTML5 我要投稿
    • 相關推薦

    加速HTML5應用的九大方法

      我們都知道,當負載過大時,通常HTML5都會出現卡死的狀態,那有什么方法可以加速么?YJBYS小編為大家介紹九中加速HTML5應用的方法,希望對大家有所幫助!

      1.使用HTML5表單和輸入框

      HTML5 引入很多全新的表單屬性和輸入框類型,雖然并不是所有的瀏覽器都支持,但它們的確都很有用:

      autofocus 使得頁面加載完畢后自動為某個輸入框設置輸入焦點

      placeholder 允許你為輸入框設置默認文本,并在獲取焦點時自動清除

      required 屬性要求必須填寫值后才能提交表單

      pattern 可以通過正則表達式指定輸入框允許輸入的內容

      因為這些功能都是內置的,無需使用 JavaScript 方法來實現,第一是節省開發時間,同時也讓頁面具有更好的適應性。

      2. 使用 CSS 轉換效果

      使用 CSS 轉換效果來替換 JavaScript 的方法可以提升頁面元素在兩種狀態進行轉換的速度,通過使用 totheleft 和 totheright 你可以迅速移動一個框。例如:

      div.box {

      left:50px;

      //for webkit browsers

      -webkit-transition: all 0.3s ease-out;

      //for mozilla

      -moz-transition: all 0.3s ease-out;

      //for opera

      -o-transition: all 0.3s ease-out;

      //other browsers

      transition: all 0.3s ease-out;

      }

      div.box.totheleft {

      left: 0px;

      }

      div.box.totheright {

      left: 80px;

      }

      3.使用 HTML5 Web 存儲

      但你需要在瀏覽器上存儲一些數據時,你可能會首先考慮到 Cookie,這些 Cookie 在每次瀏覽器請求時都會附帶上。而 HTML5 更有效的方法就是本地存儲 —— Web Storage。

      有兩個 Web Storage 對象分別是:sessionStorage 和 localStorage ,這些存儲的數據是不會通過 HTTP 請求來傳輸的,因此不會對請求的時間參數任何影響,下面是一小段示例代碼:

      //check to see if localstorage is present (browser supports HTML5)

      if (('localStorage' in window) && window.localStorage !== null) {

      //store items

      localStorage.wishlist = '["Bear", "Cow", "Pig"]';

      }

      從上面代碼我們可看到,比使用 Cookie 的方法更加簡單,無需指定失效時間。

      4. 使用 Web Workers

      Web Workers 是 HTML5 規范內容之一,用于提供后臺腳本運行支持。相當于是多線程的處理環境。示例代碼:

      var worker = new Worker('doWork.js');

      worker.addEventListener('message', function(e) {

      console.log('Worker said: ', e.data);

      }, false);

      worker.postMessage('Hello World'); // Send data to our worker.

      Web Workers 可在很多場景下使用,例如圖片處理、文本格式和以及大文件接收和處理等等。

      5. 使用 Web Sockets

      Web Sockets 用來實現跟遠程主機的雙路通訊,例如在 Web 瀏覽器和遠程服務器之間,這是一個非常輕量級的通訊架構,帶寬占用以及性能方面比標準 HTTP 要減少 3~5 倍。

      因為 Web Sockets 必須使用 80 端口,因此 Web Sockets 不僅用來創建跟快速的通訊接口,還可以在 HTTP 之上實現跟高級的雙路通訊。

      6. 使用應用程序緩存

      應用程序緩存可以讓你創建完全支持離線瀏覽的 Web 應用,降低服務器負載以及更快的體驗速度。可通過緩存的 manifest 文件來指定要緩存的文件,manifest 只是一個簡單的文本文件,下面是一個示例:

      CACHE MANIFEST

      # 2011-06-18:v3

      # Explicitly cached entries

      index.htm

      style.css

      # offline.htm will be displayed if the user is offline

      FALLBACK:

      / /offline.htm

      你需要在HTML頁面中啟用緩存

      ...

      Manifest 緩存文件可以定義緩存任意的文件擴展名,但你需要在 Web 服務器上設置對應的 MIME 類型,例如在 Apache 上:

      AddType text/cache-manifest .appcache

      使用應用程序緩存,你只需要簡單幾步就可以創建離線的 Web 應用,訪問是非常快速,適合用來處理一些不經常更新的靜態文件。

      7. 使用 CSS 替代圖片

      使用 CSS 特效而不是圖片是一個很簡單的用來提升網頁速度的方法,因為你無需重開 HTTP 請求來獲取圖片,而且一般圖片大小也比幾行 CSS 代碼要大得多,下面是一些你可以用來替換圖片的 CSS 特效:

      CSS Masks

      Box-shadow

      Transforms

      RGBA/Alpha opacity

      Border-radius

      Linear and radial gradients

      8. 使用硬件加速

      現在瀏覽器對硬件加速的支持還不普遍。如果你的應用有動畫或者 3D 效果,那么啟用硬件加速直接讓 GPU 進行處理會大大提升這些動畫和3D的速度。要使用硬件加速你需要用 HTML5 的 Canvas。

      9. 使用客戶端數據庫

      目前,主流瀏覽器在客戶端數據庫的支持上還沒達成一致,除了 Web SQL 數據庫和IndexedDB 以外。通過對數據庫的使用可以大大提升客戶端數據存儲的速度,而不是將數據重新發給服務器端。不僅可以減少 HTTP 請求,還可以大大降低服務器負載。

    【加速HTML5應用的九大方法】相關文章:

    電腦網絡加速的方法03-04

    Web Workers加速移動Web應用03-30

    網頁中HTML5與CSS3的應用03-31

    四種HTML5移動應用框架的比較03-25

    形體訓練立拉伸加速恢復方法12-26

    色彩在設計中的應用方法12-19

    績效考核方法及應用03-05

    廚房清潔應用對方法03-30

    HTML5的發展03-27

    主站蜘蛛池模板: 国产综合色在线精品| 99精品国产一区二区三区2021| 亚洲精品国产自在久久| 91在线视频精品| 亚洲AV永久无码精品一区二区| 欧美精品香蕉在线观看网| 日韩精品一区二区三区色欲AV| 国产精品嫩草影院一二三区| 精品视频一区二区三三区四区| 国产一在线精品一区在线观看 | 热久久这里只有精品| 无码久久精品国产亚洲Av影片| 国产精品v欧美精品v日本精| 久久久久久九九99精品| 午夜精品久久久内射近拍高清| 国产高清一级毛片精品| 国产精品1024香蕉在线观看 | 精品一区二区三区免费毛片爱| 久久综合精品国产一区二区三区 | 麻豆精品三级全部视频| 亚洲欧洲国产精品你懂的| 国产精品原创巨作av女教师| 亚洲精品无码久久毛片| 久草热8精品视频在线观看| 97精品国产高清自在线看超| 99精品视频在线观看re| 精品视频无码一区二区三区| 亚洲精品无码Av人在线观看国产| 久久精品国产一区二区电影| 国产精品无码国模私拍视频 | 久久精品国产亚洲AV无码偷窥| 久久久久无码精品| 国内精品久久久久国产盗摄| 99久久www免费人成精品| 久久精品国产91久久麻豆自制 | 久久精品国产亚洲精品2020| 亚洲精品无码久久千人斩| 亚洲精品国产福利一二区| 欧美久久久久久午夜精品| 欧美精品免费专区在线观看| 欧美日韩国产精品系列|