-
html5新特性
-
定义页面独立的内容区域。
定义页面的侧边栏内容。
允许您设置一段文本,使其脱离其父元素的文本方向设置。
定义命令按钮,比如单选按钮、复选框或按钮
用于描述文档或文档某个部分的细节
定义对话框,比如提示框
标签包含 details 元素的标题
规定独立的流内容(图像、图表、照片、代码等等)。
定义 <figure> 元素的标题
定义 section 或 document 的页脚。
定义了文档的头部区域
定义带有记号的文本。
定义度量衡。仅用于已知最大和最小值的度量。
定义导航链接的部分。
定义任何类型的任务的进度。
定义 ruby 注释(中文注音或字符)。
定义字符(中文注音或字符)的解释或发音。
在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
定义文档中的节(section、区段)。
定义日期或时间。
规定在文本中的何处适合添加换行符。
- Canvas 用于图形的绘制,通过脚本 (通常是JavaScript)来完成.
- 拖放
-
<imgdraggable="true">
-
首先,为了使元素可拖动,把 draggable 属性设置为 true :<imgdraggable="true">
拖动什么 - ondragstart 和 setData()
放到何处 - ondragover
-
-
地理定位 HTML5 Geolocation API 用于获得用户的地理位置。
-
HTML5 Audio(音频)、Video(视频)
-
Input 类型
-
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
-
HTML5 表单元素
<datalist> <input>标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 <keygen> ><keygen> 标签规定用于表单的密钥对生成器字段。 <output> <output> 标签定义不同类型的输出,比如脚本的输出。 - 表单属性
<form>新属性:autocomplete、novalidate <input>新属性: autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height and width、list、min and max、multiple、pattern (regexp)、placeholder、required、step
-
HTML5 语义元素
-
-
HTML5 Web 存储
-
sessionStorage—客户端数据存储,只能维持在当前会话范围内。
-
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
- localStorage—客户端数据存储,能维持在多个会话范围内。
- localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
对于大量复杂数据结构,一般使用IndexDB
-
-
HTML5 Web Workers
-
web worker 是运行在后台的 JavaScript,独立于其他脚本,
-
-
WebSocket
-
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。以下 API 用于创建 WebSocket 对象。
-
-
2.浏览器模型常见对象
window
open,close 打开关闭窗口
、history
前进 后退
、xhr、
XMLHttpRequest对象(简称XHR),一个底层的对象,信息待补充
Navigator
包含有关浏览器的信息,用于检测浏览器与操作系统的版本
location
获取浏览器地址,地址内参数,页面锚点
3.Cookie、sessionStorage、localStorage的理解和区别
sessionStorage与localStorage,sessionStorage临时存储,关闭页面信息丢失;localStorage长期存储,可定义过期时间。
Cookie,存储类似于localStorage,浏览器发送请求,要带上此字段。
Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。
Cookie 的作用就是用于解决 "如何记录客户端的用户信息":
- 当用户访问 web 页面时,他的名字可以记录在 cookie 中。
- 在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。
缺陷
- cookie会被附加在每个HTTP请求中,所以无形中增加了流量。
- 由于在HTTP请求中的cookie是明文传递的,所以安全性成问题。(除非用HTTPS)
- Cookie的大小限制在4KB左右。对于复杂的存储需求来说是不够用的。
4.页面dom渲染过程,重流和重绘
资料来源:https://www.cnblogs.com/duanlianjiang/p/5032286.html
一、浏览器渲染页过程描述
1、浏览器解析html源码,然后创建一个DOM树。
在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。
DOM树的根节点就是documentElement,对应的是html标签。
2、浏览器解析CSS代码,计算出最终的样式数据。
对CSS代码中非法的语法它会直接忽略掉。
解析CSS的时候会按照如下顺序来定义优先级:浏览器默认设置,用户设置,外联样式,内联样式,html中的style(嵌在标签中的行间样式)。
3、创建完DOM树并得到最终的样式数据之后,构建一个渲染树。
渲染树和DOM树有点像,但是有区别。DOM树完全和html标签一一对应,而渲染树会忽略不需要渲染的元素(head、display:none的元素)。
渲染树中每一个节点都存储着对应的CSS属性。
4、当渲染树创建完成之后,浏览器就可以根据渲染树直接把页面绘制到屏幕上。
二、高性能Javascript DOM编程
我们知道,用脚本进行DOM操作的代价很昂贵。把DOM和ECMAScript各自想象为一个岛屿,它们之间用收费桥梁链接,ECMAScript每次访问DOM,都要经过这座桥,并交纳“过桥费”,访问DOM的次数越多,费用也就越高。因此,推荐的做法是尽量减少过桥的次数,努力呆在ECMAScript岛上。这是比喻非常形象。那么怎样才能高效呢?
1、DOM访问与修改
访问DOM元素是有代价的(这里其实和ajax调后台数据接口是一样,DOM是用于操作XML和HTML文档的应用程序接口,一次能完成的事不要请求多次),通过DOM获取元素之后,修改元素的代价更是昂贵,因为它会导致浏览器重新计算页面的几何变化(重排和重绘)。
例子:
var times = 15000;
//code1
console.time('time1');
for(var i=0; i<times; i++){
document.getElementById('myDiv1').innerHTML +='a';
}
console.timeEnd('time1');
//code2
console.time('time2');
var str = '';
for(var i=0; i<times; i++){
str += 'a';
}
document.getElementById('maDiv2').innerHTML = str;
console.timeEnd('time2');
结果time1:2352.064ms/time2:0.789ms
第一段代码的问题在于,每次循环迭代,改元素都会被访问两次:一次读取innerHTML的值,另一次重写它。
结果充分证明,访问DOM的次数越多,代码的运行速度越慢。
因此,能减少DOM访问的次数就尽量减少,尽量留在ECMAScript这端处理。
2、html集合&遍历DOM
操作DOM另一个耗能点就是遍历DOM,在平时获取一组元素的时候(getElementsByTagName方法),收集的结果是一个类数组对象,它处于一种“实时状态”实时存在,这意味着当底层文档对象更新时,它也会自动更新。
例子:
而这正是低效之源!很简单,跟数组的优化操作一样,缓存一个length变量就OK了(读取一个集合的length比读取一个普通数组的length要慢很多,因为每次都要查询):
console.time('time0');
var lis0 = document.getElementsByTagName('li');
var str0 = '';
for(var i=0; i<lis0.length; i++){
str0 +=lis0[i].innerHTML;
}
console.timeEnd('time0');
console.time('time1');
var lis1 = document.getElementsByTagName('li');
var str1 = '';
for(var i=0; len=lis1.length; i<len; i++){
str1 += lis1[i].innerHTML;
}
console.timeEnd('time1');
结果:time0:0.237ms/time1:0.099ms
当获取的这个类数组对象长度值特别大的时候(如1000),性能提升还是很明显的。
第一部分主要提了两点优化,一是尽量减少DOM的访问,把运算放在ECMAScript这一端,二是尽量缓存局部变量,比如类数组对象的length。
三、重排和重绘
1、什么是重排和重绘
浏览器下载完页面中的所有组件(html标记、Javascript、CSS、图片)之后会解析生成两个内部数据结构——DOM树和渲染树。
DOM树表示页面结构,渲染树表示DOM节点如何显示。DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM元素 display:none 在渲染树中没有对应的节点)。
渲染树中的节点被称为‘帧’或‘盒’,符合CSS模型的定义,页面元素为一个具有填充,边距,边框和位置的盒子。一旦DOM树和渲染树构建完成,浏览器就开始绘制页面元素。
当DOM的变化影响了元素的几何属性(宽或高),浏览器需要重新计算元素的几何属性,同时其他元素的几何属性和位置也会受到影响。浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树,这个过程称为重排。完成重排后,浏览器会重新绘制受到影响的部分到屏幕,这个过程称为重绘。
由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就可以完成。table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花三倍同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。
并不是所有的DOM变化都会影响几何属性,比如改变一个元素的背景色并不会影响元素的宽和高,这种情况下只会发生重绘。
2、重排何时发生
a、添加或删除可见的DOM元素
b、元素位置改变
c、元素尺寸改变
d、元素内容改变
e、页面渲染初始化
f、浏览器窗口尺寸改变
3、渲染树变化的排队和刷新
获取布局信息的操作会导致队列刷新,比如:
a、offsetTop,offsetLeft,offsetWidth,offsetHeight
b、scrollTop,scrollLeft,scrollWidth,scrollHeight
c、clientTop,clientLeft,clientWidth,clientHeight
d、getComputeStyle()||currentStyle(IE)
因为offsetHeight属性需要返回最新的布局信息,因此浏览器不得不执行渲染队列中的“待处理变化”并触发重排以返回正确的值(即使队列中 改变的样式属性和想要获取的属性值并没有什么关系)。
4、最小化重排和重绘
改变元素多种样式的时候,最好用className,一次性完成操作,这样只会修改一次DOM。
5、文档碎片
文档碎片的设计初衷就是为完成这类任务——更新和移动节点。当你附加一个片段到节点时,实际上被添加的是该片段的子节点,而不是片段本身。只会触发一次重排,而且只访问一次实时的DOM。
用法:
var oFragment = document.createDocumentFragment();
for(var i=0; i<1000; i++){
var oP = document.createElement('p');
oP.innerHTML = i;
oFragment.appendChild(oP);
}
var oDo = document.body;
oDo.appendChild(oFragment);
6、让动画脱离文档流
使用绝对位置定位页面上的动画元素,将其脱离文档流。这样不会导致文档流中的元素受到影响,不会大规模的进行重排和重绘。
第二部分重排和重绘是DOM编程中耗能的主要原因之一,为了避免不必要的性能损耗可以参考一下几点:
1、尽量不要在布局信息改变时做查询(会导致渲染队列强制刷新);
2、同一个DOM的多个属性改变可以写在一起(减少DOM访问,同时把强制渲染队列刷新的风险降为0);
3、如果要批量添加DOM,可以先让元素脱离文档流,操作完成后带人文档流,这样只会触发一次重排(fragment元素的应用);
4、将需要多次重排的元素,添加定位属性,设置为absolute,fixed,这样此元素就脱离了文档流,不会影响其他元素。
5.文件上传实现
文件上传标签
<input type="file" name="myFile" id="myFile" οnchange="getFileContent()">
文件读取
var fileReader = new FileReader();
post请求
ajax post方法