前端面试之HTML

1. html5新特性

   1. <article>	定义页面独立的内容区域。
      <aside>	定义页面的侧边栏内容。
      <bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
      <command>	定义命令按钮，比如单选按钮、复选框或按钮
      <details>	用于描述文档或文档某个部分的细节
      <dialog>	定义对话框，比如提示框
      <summary>	标签包含 details 元素的标题
      <figure>	规定独立的流内容（图像、图表、照片、代码等等）。
      <figcaption>	定义 <figure> 元素的标题
      <footer>	定义 section 或 document 的页脚。
      <header>	定义了文档的头部区域
      <mark>	定义带有记号的文本。
      <meter>	定义度量衡。仅用于已知最大和最小值的度量。
      <nav>	定义导航链接的部分。
      <progress>	定义任何类型的任务的进度。
      <ruby>	定义 ruby 注释（中文注音或字符）。
      <rt>	定义字符（中文注音或字符）的解释或发音。
      <rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
      <section>	定义文档中的节（section、区段）。
      <time>	定义日期或时间。
      <wbr>	规定在文本中的何处适合添加换行符。

   2. Canvas   用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
   3. 拖放

      1. <imgdraggable="true">

      2. 首先，为了使元素可拖动，把 draggable 属性设置为 true ：<imgdraggable="true">
         拖动什么 - ondragstart 和 setData()
         放到何处 - ondragover

   4. 地理定位      HTML5 Geolocation API 用于获得用户的地理位置。

   5. HTML5  Audio(音频)、Video(视频)

   6. Input 类型

   7. HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week

   8. HTML5 表单元素

      <datalist>	<input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
      <keygen>	><keygen> 标签规定用于表单的密钥对生成器字段。
      <output>	<output> 标签定义不同类型的输出，比如脚本的输出。

   9. 表单属性

      <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

   10. HTML5 语义元素

   11.  

   12. HTML5 Web 存储

       1. ​​​sessionStorage—客户端数据存储，只能维持在当前会话范围内。

       2.  sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

       3. localStorage—客户端数据存储，能维持在多个会话范围内。
       4.  localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

          对于大量复杂数据结构，一般使用IndexDB

   13. HTML5 Web Workers

       1. web worker 是运行在后台的 JavaScript，独立于其他脚本，

   14. WebSocket

       1. ​​​​​​​​​​​​​​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方法