HTML5與移動端web學習筆記

時間 2019-11-08

標籤 html5 html 移動 web 學習筆記欄目 HTML5 简体版

原文原文鏈接

概述

HTML5 提供了不少新的功能，主要有：javascript

新的 HTML 元素，例如 section, nav, header, footer, article 等
用於繪畫的 Canvas 元素
用於多媒體播放的 video 和 audio 元素
用於定位的 Geolocation API
本地存儲以及離線應用
Web Workers、Web WebSocket API

移動前端開發可分爲：css

手機網頁開發。這部分跟web前端開發差異不大，使用的技術都是html+css+js。區別爲手機瀏覽器是webkit的天下，pc端是IE的天下。
app前端開發。使用的技術也是html+css+js，但它須要基於PhoneGap，React Native等開發平臺調用手機核心功能接口（包括地理定位，加速器，聯繫人，聲音和振動等）模擬native app，這部分跟web前端開發徹底不一樣。最終代碼發佈要分別編譯成各系統平臺的app。

canvas

canvas部分請參考：http://segmentfault.com/a/119...html

drag and drop(拖拽)

拖拽元素事件 : 事件對象爲被拖拽元素

dragstart :  拖拽前觸發 
drag :拖拽前、拖拽結束之間，連續觸發
dragend  : 拖拽結束觸發

目標元素事件 : 事件對象爲目標元素

dragenter :  進入目標元素觸發，至關於mouseover
dragover : 進入目標、離開目標之間，連續觸發
dragleave :  離開目標元素觸發，至關於mouseout
drop  :  在目標元素上釋放鼠標觸發

事件的執行順序：drop不觸發的時候

dragstart  >  drag >  dragenter >  dragover >  dragleave > dragend

事件的執行順序：drop觸發的時候(dragover的時候阻止默認事件)

dragstart  >  drag >  dragenter >  dragover >  drop > dragend

解決火狐下的問題

火狐瀏覽器下必須設置dataTransfer對象的setData方法才能夠拖拽除圖片外的其餘標籤。前端

dataTransfer屬性和方法

屬性                描述
    dropEffect         設置或獲取拖曳操做的類型和要顯示的光標類型。
    effectAllowed      設置光標樣式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)

    setDragImage    三個參數：指定的元素，座標X，座標Y
    files           獲取外部拖拽的文件，返回一個filesList列表。filesList下有個type屬性，返回文件的類型


    方法              描述
    clearData     經過 dataTransfer 或 clipboardData 對象從剪貼板刪除一種或多種數據格式。
    
    setData() : 設置數據 key和value(必須是字符串)

    getData() : 獲取數據，根據key值，獲取對應的value

只有加阻止默認事件才能夠觸發drophtml5

oDiv.ondragover = function(ev){  //只有加阻止默認事件才能夠觸發drop
        ev.preventDefault();
    };

drag and drop的瀏覽器支持狀況：
java

HTML5實現拖拽上傳預覽圖片：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>無標題文檔</title>
    <style type="text/css">
        #div1{
            margin: 0 auto;
            width:200px;
            height:200px;
            background:#ccc;
            color: white;}
        #div1 p{
            position: relative;
            top: 90px;
            left: 50px;
        }
        li{ width:200px; height:200px; margin:5px; float:left; list-style:none;}
        li img{ width:500px;height: auto}
    </style>
    <script type="text/javascript">

        window.onload = function(){

            var oUl = document.getElementById('ul1');
            var oDiv = document.getElementById('div1');

            oDiv.ondragenter = function(){
                this.innerHTML = '能夠釋放';
            };

            oDiv.ondragover = function(ev){
                ev.preventDefault();
            };

            oDiv.ondragleave = function(){
                this.innerHTML = '請拖拽到此區域';
            };

            oDiv.ondrop = function(ev){

                ev.preventDefault();

                var fs = ev.dataTransfer.files;

                for(var i=0;i<fs.length;i++){

                    var fr = new FileReader();

                    if( fs[i].type.indexOf('image')!=-1 ){

                        fr.readAsDataURL( fs[i] );

                        fr.onload = function(){
                            var oLi = document.createElement('li');
                            var oImg = document.createElement('img');
                            oImg.src = this.result;
                            oLi.appendChild( oImg );
                            oUl.appendChild( oLi );
                        };
                    }
                    else{
                        alert('親,請拖拽圖片格式');
                    }

                }

            };

        };
    </script>
</head>
<body>
<div id="div1"><p>請拖拽到此區域</p></div>
<ul id="ul1"></ul>
</body>

FileReader(讀取文件信息)

| 屬性名 | 描述 |
| ------------- |:-------------:|
| error | 在讀取文件時發生的錯誤. 只讀. |
| readyState | 代表FileReader對象的當前狀態. |
| result | 讀取到的文件內容。這個屬性只在讀取操做完成以後纔有效 | android

<br/>ios

| 方法名 | 描述 |
| ------------- |:----------:|
| abort | 停止該讀取操做.在返回時,readyState屬性的值爲DONE. |
| readAsArrayBuffer |將File對象F讀取爲一個 ArrayBuffer 對象。|
| readAsBinaryString | 將File對象F讀取爲一個二進制字符串。 |
|readAsDataURL |將File對象F讀取爲編碼過的數據URL。|
|readAsText(File f, [encoding])|讀取 File對象F並賦予一個字符串。|git

建立一個FileReader對象：github

var reader = new FileReader();

Web Worker和緩存

Web Worker的基本原理就是在當前js的主線程中，使用Worker類加載一個js文件來開闢一個新的線程，起到互不阻塞執行的效果，而且提供主線程和新線程之間數據交換的接口：postMessage，onmessage。

主機 worker 和 worker 腳本能夠經過 postMessage 發送消息並使用 onmessage 事件偵聽響應。消息的內容做爲事件的數據屬性進行發送。

var worker = new Worker('worker.js');
worker.onmessage = function(e) {
  alert(e.data);
};

worker主線程:

1.經過 worker = new Worker( url ) 加載一個JS文件來建立一個worker，同時返回一個worker實例。

2.經過worker.postMessage( data ) 方法來向worker發送數據。

3.綁定worker.onmessage方法來接收worker發送過來的數據。

4.可使用 worker.terminate() 來終止一個worker的執行。

worker新線程：

1.經過postMessage( data ) 方法來向主線程發送數據。

2.綁定onmessage方法來接收主線程發送過來的數據。

例子：計數功能

首先建立一個index.html文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="numDiv">0</div>
<button type="button" id="start">start</button>
<button type="button" id="stop">stop</button>
</body>
</html>

其次，建立一個count.js文件：

var countNum = 0;
function count(){
    postMessage(countNum);
    countNum++;
    setTimeout(count,1000);
}

count();

再建立一個index.js文件

var numDiv;
var work = null;
window.onload = function () {
    numDiv = document.getElementById('numDiv');

    document.getElementById('start').onclick = startWorker;
    document.getElementById('stop').onclick = function () {
        if(work){
            work.terminate();//中止，釋放掉資源
            work = null;//work從新初始化
        }
    };

};
function startWorker(){
    if(work){
        return;
    }
    work = new Worker('count.js');
    work.onmessage = function (e) {
        numDiv.innerHTML = e.data;
    };
}

Web SQL

三個核心方法：

一、openDatabase：這個方法使用現有數據庫或建立新數據庫建立數據庫對象。

二、transaction：這個方法容許咱們根據狀況控制事務提交或回滾。

三、executeSql：這個方法用於執行真實的SQL查詢。

瀏覽器的本地數據庫佔用資源少，處理速度快。
openDatabase方法打開一個已經存在的數據庫，若是數據庫不存在，它還能夠建立數據庫，建立並打開數據庫的語法以下：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

參數爲：數據庫名（mydb）、版本號（1.0）、描述（Test DB）和數據庫大小（2*1024*1024）以及建立回調函數

WebSockets

TCP是因特網的基礎傳輸協議，而WebSocket是Web應用程序的傳輸協議，它提供了雙向的，按序到達的數據流。WebSocket鏈接的是URL，而非因特網上的主機和端口。

// 建立一個Socket實例
var socket = new WebSocket('ws://localhost:8080');

// 打開Socket
socket.onopen = function(ev) {

    // 發送一個初始化消息
    socket.send('hello HTML5');

    // 監聽消息
    socket.onmessage = function(ev) {
        console.log('Client received a message',ev);
    };

    // 監聽Socket的關閉
    socket.onclose = function(ev) {
        console.log('Client notified socket has closed',ev);
    };

    // 關閉Socket....
    socket.close()
};

同http協議使用http://開頭同樣，WebSocket協議的URL使用ws://開頭，而安全的WebSocket協議使用wss://開頭。

HTTP協議一般承載於TCP協議之上，有時也承載於TLS或SSL協議層之上，這個時候，就成了咱們常說的HTTPS。

默認HTTP的端口號爲80，HTTPS的端口號爲443。

getUserMedia API

navigator.getUserMedia能夠提示用戶須要權限去使用像攝像頭或麥克風之類的媒體設備.
下面是一個獲取用戶攝像頭並提供拍照功能的例子：

<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">

    // 添加事件監聽器
    window.addEventListener("DOMContentLoaded", function() {
        // 獲取元素，建立設置等等
        var canvas = document.getElementById("canvas"),
                context = canvas.getContext("2d"),
                video = document.getElementById("video"),
                videoObj = { "video": true },
                errBack = function(error) {
                    console.log("Video capture error: ", error.code);
                };

        // 添加video 監聽器
        if(navigator.getUserMedia) { // 標準
            navigator.getUserMedia(videoObj, function(stream) {
                video.src = stream;
                video.play();
            }, errBack);
        } else if(navigator.webkitGetUserMedia) { // WebKit 前綴
            navigator.webkitGetUserMedia(videoObj, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
        }
        else if(navigator.mozGetUserMedia) { // Firefox 前綴
            navigator.mozGetUserMedia(videoObj, function(stream){
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        }

        document.getElementById("snap").addEventListener("click", function() {
            context.drawImage(video, 0, 0, 640, 480);
        });

    }, false);

</script>
</body>

下面是瀏覽器兼容性的寫法：

<script type = 'text/javascript'>
    navigator.getMedia = ( navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia);
</script>

瀏覽器對象

audio和video

下圖是audio和video的屬性及其瀏覽器的兼容性：

Fullscreen API

進入全屏模式

// 找到正確的方法  
function launchFullScreen(element) {  
  if(element.requestFullScreen) {  
    element.requestFullScreen();  
  } else if(element.mozRequestFullScreen) {  
    element.mozRequestFullScreen();  
  } else if(element.webkitRequestFullScreen) {  
    element.webkitRequestFullScreen();  
  }  
}  
  
// 啓動全屏模式  
launchFullScreen(document.documentElement); // 整個頁面  
launchFullScreen(document.getElementById("videoElement")); // 單獨元素

退出全屏模式

function cancelFullscreen() {  
  if(document.cancelFullScreen) {  
    document.cancelFullScreen();  
  } else if(document.mozCancelFullScreen) {  
    document.mozCancelFullScreen();  
  } else if(document.webkitCancelFullScreen) {  
    document.webkitCancelFullScreen();  
  }  
}  
  
// 取消全屏  
cancelFullscreen();

全屏屬性和事件

document.fullScreenElement：當前全屏顯示的元素。
document.fullScreenEnabled：判斷瀏覽器是否支持全屏。
fullscreenchange事件：全屏狀態改變事件。

History API

HTML5 更新了兩個API，無刷新更新地址 history.pushState方法和history.replaceState 方法

Geolocation API

Geolocation API 是經過window.navigator.geolocation 得到對地理定位的訪問的。該對象有以下三個方法：

getCurrentPosition()
watchPosition()
clearWatch()

表單元素

HTML5 新增了不少表單元素讓開發者構建更優秀的 Web 應用程序。如下是HTML5新增的表單元素

datalist
datetime
output
keygen 
date 
month 
week
time
color
number 
range 
email 
url

html5移動端優化

PC端的優化對於移動端一樣適用，Android同時支持4個併發請求，iOS 5後可支持6個，因此，應儘可能減小http請求數

1. PC優化手段在Mobile側一樣適用
2. 在Mobile側咱們提出三秒種渲染完成首屏指標
3. 基於第二點，首屏加載3秒完成或使用Loading
4. 基於聯通3G網絡平均338KB/s(2.71Mb/s)，因此首屏資源不該超過1014KB
5. Mobile側因手機配置緣由，除加載外渲染速度也是優化重點
6. 基於第五點，要合理處理代碼減小渲染損耗
7. 基於第2、第五點，全部影響首屏加載和渲染的代碼應在處理邏輯中後置
8. 加載完成後用戶交互使用時也需注意性能

不濫用Float

Float在渲染時計算量比較大，儘可能減小使用

不濫用Web字體

Web字體須要下載，解析，重繪當前頁面，儘可能減小使用

不聲明過多的Font-size

過多的Font-size引起CSS樹的效率

減小重繪和迴流

a) 避免沒必要要的Dom操做
b) 儘可能改變Class而不是Style，使用classList代替className
c) 避免使用document.write
d) 減小drawImage

Viewport能夠加速頁面的渲染，請使用如下代碼

< meta name=」viewport」 content=」width=device-width, initial-scale=1″>

動畫優化

a) 儘可能使用CSS3動畫
b) 合理使用requestAnimationFrame動畫代替setTimeout
c) 適當使用Canvas動畫 5個元素之內使用css動畫，5個以上使用Canvas動畫（iOS8可以使用webGL）

GPU加速

CSS中如下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）來觸發GPU渲染，請合理使用
PS：過渡使用會引起手機過耗電增長

資料參考：
如何作到一秒渲染一個移動頁面
HTML5與CSS3語法提供瀏覽器兼容性測試及使用建議： http://html5please.com/

meta相關總結

HTML5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

忽略將頁面中的數字識別爲電話號碼

<meta name="format-detection" content="telephone=no" />

忽略Android平臺中對郵箱地址的識別

<meta name="format-detection" content="email=no" />

當網站添加到主屏幕快速啓動方式，可隱藏地址欄，僅針對ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- ios7.0版本之後，safari上已看不到效果 -->

將網站添加到主屏幕快速啓動方式，僅針對ios的safari頂端狀態條的樣式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可選default、black、black-translucent -->

移動端touch事件(區分webkit 和 winphone)

當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件

如下支持webkit：

touchstart——當手指觸碰屏幕時候發生。無論當前有多少隻手指
touchmove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動
touchend——當手指離開屏幕時觸發
touchcancel——系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

如下支持windows phone 8：

MSPointerDown——當手指觸碰屏幕時候發生。無論當前有多少隻手指
MSPointerMove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用css的html{-ms-touch-action: none;}能夠阻止默認狀況的發生：阻止頁面滾動
MSPointerUp——當手指離開屏幕時觸發

手機拍照和上傳圖片

<input type="file">的accept 屬性

<!-- 選擇照片 -->
<input type=file accept="image/*">
<!-- 選擇視頻 -->
<input type=file accept="video/*">

使用總結：

ios 有拍照、錄像、選取本地圖片功能
部分android只有選取本地圖片功能
winphone不支持
input控件默認外觀醜陋

移動端手勢總結

主要用戶操做

手勢的具體操做

觸摸屏手勢

手勢的具體操做

to be continued。。。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

HTML5與移動端web學習筆記

概述

canvas

drag and drop(拖拽)

拖拽元素事件 : 事件對象爲被拖拽元素

目標元素事件 : 事件對象爲目標元素

事件的執行順序 ：drop不觸發的時候

事件的執行順序 ：drop觸發的時候(dragover的時候阻止默認事件)

解決火狐下的問題

dataTransfer屬性和方法

HTML5實現拖拽上傳預覽圖片：

FileReader(讀取文件信息)

Web Worker和緩存

worker主線程:

worker新線程：

例子：計數功能

Web SQL

WebSockets

getUserMedia API

瀏覽器對象

audio和video

Fullscreen API

進入全屏模式

退出全屏模式

全屏屬性和事件

History API

Geolocation API

表單元素

html5移動端優化

不濫用Float

不濫用Web字體

不聲明過多的Font-size

減小重繪和迴流

動畫優化

GPU加速

meta相關總結

移動端touch事件(區分webkit 和 winphone)

手機拍照和上傳圖片

移動端手勢總結

主要用戶操做

手勢的具體操做

觸摸屏手勢

手勢的具體操做

事件的執行順序：drop不觸發的時候

事件的執行順序：drop觸發的時候(dragover的時候阻止默認事件)