摘要：日前，笔者拿到一本有国内知名团队iKcamp团队著作的书籍，在对书籍的阅读过程当中，发现许多知识，不能准确的描述出来，于是边啃书，边对里面提到的东西进行梳理，以巩固前端知识，作为自己查阅所用。并且在学习中了解新的知识。(github仓库为https://github.com/fanyang123/Web_Ksc)

全书主要涉及到的知识有：HTML5，CSS3，javascript，webpack，react Native，Vue.js，node.js

HTML5

1、html5常用特性

1.1 在html5中，采用了更加语义化的标签 

Header、nav、srticle、section、aside、footer，分别表示头部、导航、主题内容、重要的部分、重要的部分、底部等语义化标签。

1.2表单增强应用 

input的type属性扩展：html5中增加了以下的属性。

search->展现一个搜索框 

tel->电话号码，可以使用pattern和maxlength限定格式，pattern=”1[3-8][0-9]{9}” 

url->地址 

email->邮件 

date->日期 

color->输入颜色 

number->输入数字 

range->滑块输入

input还可以通过属性进行表单验证，通过required标记为必填元素，使用pattern进行验证。 

其他属性：

autofocus->页面加载的时候，自动聚焦 

form->将input输入元素和特定的form表单关联 

placeholder->输入占位符。

1.3其他新增加的元素：

progress->表示进度条， 

meter->表示标尺，max为最大值，默认为1，min为最小值，value为标尺的值。 

特殊属性：contenteditable=”表示可以编辑”。

1.4视频video和音频audio 

所包含的属性：

controls->控制是否显示控制条 

autoplay->是否自动播放，默认为false 

loop->是否循环播放 

preload->预加载

audio示例：

<section>

        <h3>自定义播放行为</h3>

        <audio id="audio">

            <source src="vincent.ogg" />

            <source src="vincent.mp3" /> 你的浏览器不支持Audio标记

        </audio>

        <p>

            <button id="btnPlay">Play</button>

            <button id="btnPause">Pause</button>

        </p>

        <script>

            var audio = document.getElementById("audio")

            document.getElementById("btnPlay").addEventListener("click", function(){

                audio.play()

            })//给元素添加play的时间，控制播放。

            document.getElementById("btnPause").addEventListener("click", function(){

                audio.pause()暂停

            })

        </script>

    </section>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

video实例：

<video width="400" height="300" controls id="video">

    <source src="dizzy.mp4#t=,15" type="video/mp4">

    <source src="dizzy.webm" type="video/webm">

    <source src="dizzy.ogv" type="video/ogg">

    <p>你的浏览器不支持HTML5视频</p>

</video>

1

2

3

4

5

6

在video中，currentTime 属性设置或返回音频/视频播放的当前位置（以秒计）。可以去设置播放时间位置。

2、新增内置API

2 访问设备

2.1 定位地理位置 (navigator.geolocation)

if (navigator.geolocation) {

      navigator.geolocation.getCurrentPosition(success, error, options);

    } else {

      alert('您的浏览器不支持Geolocatioin!')

    }

1

2

3

4

5

2.2 调用摄像头（getUserMedia）

//处理兼容

if(navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){

        //调用用户媒体设备

        getUseMedia({video:{width:480,height:320}},success,error)

      }else{

        alert("您的浏览器不支持访问用户媒体设备");

      };

1

2

3

4

5

6

7

2.3 方向传感器(DeviceOrientationEvent)和运动传感器(DeviceMotionEvent)

//方向事件

window.addEventListener('deviceorientation','orientationHandler',true)

//运动事件

window.addEventListener('devicemotion',motionHandler,true)

1

2

3

4

2.4 离线缓存 

2.5 canvas 

2.6 svg

3、通信

3.1 PostMessages解决跨域问题

在之前跨源或者窗口之间的通信通过服务器进行数据交互来实现，并且需要轮询或者comet技术来监听消息，HTML5提供了新型机制PostMessages来进行安全的跨源通信，浏览器同源是指协议（如HTTPS）、端口、域名相同，同时为了用户信息安全，浏览器在实现机制上使用同源策略进行限制，PostMessages具有灵活性和安全性等特点，实现了跨源之间的信息传递。 

语法如下：

otherwWindow.postMessage(message,targetOrigin,[transfer]) 

otherwWindow：其他窗口的一个引用，如iframe的content.window属性； 

message：将要发送到其他窗口的数据 

targetOrigin：通过窗口的origin属性，制定那些窗口可以接受消息，值可以是*（表示无限制），或者一个URL 

transfer：一串和message一起发送的transferable对象(可选)

实例：(html5/4-connection/postmessage)

3.2 ajax 无刷新获取服务端数据，XMLHttpRequest 

XMLHttpRequest level2版本，比一版本做出了大幅改进，包括了下面几点：（xhr表示创建的实例）

·设置Http请求超时时间

xhr.timeout = 3000;//超时时间设置 

xhr.ontimeout = ()=>{alert(‘超时’)}//超时时会发一个事件，可以在ontimeout接收处理

·使用FormData对象管理表单数据

var formData = new FormData(); 

formData.append(‘username’,’demon’); 

xhr.send(formData)

上传文件… 

跨域请求，需要浏览器支持。。。 

详情见API 

例子：(html5/4-connection/XMLHttpReauest) 

3.3 Server Send Rvent 服务器向客户端发送数据 

3.4 WebSocket基于TCP链接的全双工通信 

实例创建：

var Socket = new WebSocket(url,[protocol]) 

url:制定链接的url 

protocol：可选项，协议等 

3.5 WebRTC实时通信

4 其他常用特性

4.1 History API与单页应用 

是我们常说的路由模式

4.1 Drag和Drop 

HTML5提供专门的拖拽与拖放的API，

4.1 利用web workers 加速应用计算 

4.1 利用performance API分析网站性能 

如对淘宝网站进行分析： 

各时间点说明：

1、navigationStart–>upload事件触发 

2、fetchStart–>开始获取当前页面内容（这两步之间的时间差是浏览器内核为加载新页面做的准备） 

3、查询缓存（上一步和下一步之间的时间为查询缓存的时间） 

4、domainLookupStart–>解析DNS开始 

5、domainLookupEnd–>解析DNS结束（与上一步之间的时间点为解析DNS所消耗的时间） 

6、然后建立TCP连接（这一段时间为建立TCP连接消耗的时间） 

7、connectStart–>TCP连接开始 

8、connectEnd–>TCP连接结束 

9、requestStart–>开始发送请求内容至服务器端 

10、服务器端接受请求，处理完毕，将响应返回给客户端 

11、responseStart–>开始发送响应 

12、responseEnd–>响应结束，浏览器收到完整的响应的时候，触发 

13、domLoading–>DOM树解析 

14、domInteractive–>DOM 解析完成，dom构建完成，但是页面依赖外部的资源还未加载，例如img、js等 

15、domContentLoadedEventStart–>执行页面脚本和加载外部资源 

16、domContentLoadedEventEnd–>所有页面加载完成后触发 

17、domComplete–>上面所有的步骤完成后，触发，同时，会触发暴露给开发者的load事件 

18、loadEventStart–>执行发者注册在load事件上的脚本 

19、loadEventEnd–>所有开发者注册在load事件上的脚本执行完毕

生命周期如下图： 

---------------------