H5与JS高级特性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/u012833166/article/details/103762040

1、H5有哪些新特性，如何区分HTML和HTML5：H5主要是图像，位置，存储，多任务等功能的增加；绘制canvas，用于媒介回放的video和audio元素，本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage数据在浏览器关闭后自动删除；语意化内容元素：比如article、footer/header/nav/seciotn，表单控件calendar/date/time/email/ulr;Geolocation/webworker/websockt;

2/iframe有哪些缺点：iframe会阻塞主页面的Onload事件；iframe与主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载；需要使用iframe最后通过js动态给iframe添加src属性值，可以避免上述问题；

3、img标签上title与alt属性区别是什么？

alt 当图片不显示时，用文字表示；title为该属性提供信息；

4、如何对网站的文件和资源进行优化：文件合并；文件最小化（文件压缩）；缓存

5、语义话HTML：直观的认识标签，方便搜索引擎的抓取

6、字符串数组转换：split():切割成数组形式；join()降数组转换成字符串；数组的操作函数：pop（）尾部删除、push（）尾部增加、unshift()头部添加、shift（）头部删除；

7、js在页面中的引用，一般原则上是把js和css都方正head中，但是浏览器是子上到下顺序执行，意味着必须等到全部js都被下载、解析、执行完成后，才能开始呈现页面的内容，所以现在为了避免这种明显的延迟，都是把js放在body元素中内容的后面；

用户会因为显示空白内容的时间缩短而认为页面速度加快；

8、垃圾收集：js具有自动垃圾收集机制，执行环境会负责管理代码执行过程中使用的内存；有两种机制：常用的一种标记清除：可以使用任何方式来标记变量，比如可以通过翻转某个特殊的位来记录一个变量何时进入环境或者使用一个进入环境的变量表以及一个离开环境的变量表来跟踪哪个变量发送了变化。另一种不常用的是引用计数：跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋值给这个变量的时候，则这个值的引用次数就是1；如果同一个值又被赋值给另一个变量，则该值的引用次数加1；包含这个值引用的变量又取得了另一个值的时候，则这个值的引用次数减1；当这个值的引用次数变成0的时候，则说明没有办法再访问这个值了，它占用的内存就可以回收回来了；但是引用计数会导致死循环，比如相互引用，这样引用次数永远不会变为0，如果多次调用就会导致大量内存被占用；IE中有一部分对象并不是原生js对象，其中BOM和DOM中的对象就是C++以COM（组件对象模型）对象的形式实现的，而COM对象的垃圾收集机制采用的就是引用计数策略。因此使用过程中会导致部分内存不能释放，为了避免这种情况，可以把不用的对象设置为null，

可以用下面的代码来消除循环引用：

myObject.element=null;

element.someObject=null;

将变量设置为空，意味着切断变量和它之前引用的值直接的连接；当垃圾收集器下次运行的时候，就可以回收他们了。为了更好的提升性能，最好养成在变量不用的时候设置为null，这种做法适用于大多数全局变量和全局对象的属性。对于局部变量则会在它们离开执行环境时自动被解除引用。

9、混合使用原型模式和构造函数模式：

10、寄生构造函数：构造函数在不返回值的情况下，默认会返回新对象实例，而通过在构造函数的末尾加上return语句，可以重写构造函数返回的值。例如我们想创建一个具有额外方法的特殊数组，由于不能直接修改Array构造函数，因此可以使用这个模式：

由于寄生函数返回的对象和构造函数直接没有关系，不能依赖instanceof操作符来确定对象的类型；

11、继承：如果面向对象编程语言都支持两种继承方式：接口继承和实现继承；由于函数没有签名，所以在ES中无法实现接口继承，只支持实现继承，而且实现继承主要依靠原型链来实现。

12、闭包：是指有权访问另一个函数作用域中的变量的函数。创建闭包常见的方式就是在一个函数内部创建另一个函数；因为作用域问题导致闭包存在的问题：被包含的函数可以访问其外部函数中定义的所有变量，当外部函数执行完毕后，其活动对象不会销毁，因为被包含的匿名函数的作用域链仍然在引用这个活动对象，直到匿名函数被销毁后，活动东西才会被销毁。所以匿名函数使用后，外部函数完成使命后要即使释放内存，置为null。

因为闭包会携带包含它的函数的作用域，因此回比其他函数占用更多的内存，所以过度使用闭包会导致内存占用过多。

13、关于this对象：this对象是在运行时基于函数的执行环境绑定的，在全局函数中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象；不过匿名函数的执行环境具有全局性，因此this通常代表的是window。

第二个在闭包中赋值了that=this,闭包的作用域还没有消除，所以还可以访问object中的name,而不是访问的全局变量。

14、由于闭包的存在，会导致对DOM元素的引用无法销毁，在IE中会导致内存泄漏；如下代码：

闭包会引用包含函数的整个活动对象，即使闭包不直接引用element，包含函数的活动对象中也会报错一个引用，因此非常有必要吧element设置为null。

15、事件冒泡：

事件捕获：与事件冒泡正好相反，事件的顺序从不太具体的节点开始传播，最好到达具体的节点。

事件流：事件捕获、处于目标阶段、事件冒泡；

HTML事件处理程序：

由于这个值是js,因此不能使用未经转义的HTML语法字符，如和（&），双引号，小于号、大于号。可以使用单引号，如果想要使用双引号，就需要如下：

事件处理程序在代码执行时，有权访问全局作用域中的任何代码；

16、H5<canvas>元素：要使用<canvas>元素，必须先设置其width、height属性，指定可绘制区域的大小。要在这块canvas上绘图，需要取得绘图上下文，通过getContext()方法获取上下文，并传入上下文名字（"2d"），就可以取得2D上下文对象；

var drawing=$("#drawing");

if(drawing.getContext){//确定支持canvas

var context=drawing.getContext("2d");

}

使用toDataURL()方法，可以导出在<canvas>元素上绘制的图像，可以接受一个参数，即图像的MIME类型格式；比如要取得画布中欧冠一副PNG格式的图像，可以使用下面的代码：

var drawing=$("#drawing");

if(drawing.getContext){//确定支持canvas

var imgURL=drawing.toDataURL("image/png");//取得图像的数据URL

var image=document.creatElement("img");//显示图像

image.src=imgURL;

document.body.appendChild(image);

}

2D 上下文：通过2D上下文提供的方法，可以绘制简单的2D图形，如矩形、弧形、路径。2D上下文的坐标开始于<canvas>元素的左上角，原点坐标是（0,0），所有的坐标都是基于这个原点计算，x越大越靠右，y越大越靠下。2D上下文的两种基本绘图操作是填充和描边；操作的结果取决于两个属性：fillStyle和strokeStyle；可以设置样式：

var drawing=$("#drawing");

if(drawing.getContext){//确定支持canvas

var context=drawing.getContext("2d");

context.strokeStyle="red";

context.fillStyle-"blue";

}

设置后所有涉及描边和填充的操作都将使用这两个样式。

17、WebGL：WebGL有两种着色器，顶点着色器和片段（像素）着色器。顶点着色器用于将3D顶点转换为需要渲染的2D点；片段着色器用于精确计算要绘制的每个像素的颜色。着色器是GLSL写的，完全不同于c和JS。因为WebGL是OpenGL 实现的，所以OpenGL中使用的着色器可以直接在WebGL中使用。每个着色器都有一个main()方法，该方法在绘图期间会重复执行，为着色器传递数据的方式有两种：Attribute和Uniform。通过Attribute可以向顶点着色器中传入顶点信息，通过Uniform可以向任何着色器传入常量值。Attribute和Uniform在main()方法外面定义，分别使用关键字attribute和uniform。如下是一个简单的顶点着色器：

//OpenGL着色语言

attribute vec2 aVertexPosition;

void main(){

gl_Postion=vec4(aVertexPosition,0.0,1.0);

}

这个顶点着色器定义了一个名为aVertexPosition的Attribute，这个Attitude是一个数组，包含两个元素（类型为vec2）,表示x和y坐标。即使只接受到包含连个坐标，顶点着色器也必须把一个包含四面信息的顶点赋值给特殊变量gl_Postion。这个着色器新创建了一个包含四个元素的数组（vec4）,填补缺失的坐标，就可以把2D坐标变换成3D坐标；

片段着色器和顶点着色器类似：

uniform vec4 uColor;

void main(){

gl_FragColor=uColor;

}

WebGL只能绘制三种形状：点、线、三角；其它所有形状都是由着三种基本形状合成之后再绘制到三维空间中；执行绘图操作要调用gl.drawArrays()或者gl.drawElements()方法。第一个参数都是一个常量，表示要绘制的形状，包括以下这些：

gl.POINTS:将每个顶点当成一个点来绘制；

gl.LINES:将数组当成一系列顶点，在这些顶点直接画线。每个顶点即时起点，也是终点，因此这个数组必须包含偶数个顶点；

gl.LINE_LOOP:将数组当成一系列顶点，在这些顶点间画线，从第一个顶点到第二个顶点，一次类推，只到最后一个顶点，然后再从最后一个顶点到第一个顶点画一条线，结果就是一个形状的轮廓；

gl.TRINGGLES:将数组当成一系列顶点，在这些顶点间绘制三角形，除非明确指定，每个三角形都单独绘制，不与其他三角形共享顶点；

gl.TRIANGLES_STRIP:将前三个顶点之后的顶点当做第三个顶点与前两个顶点共同构成一个新三角形，其他与gl.TRIANGLES一样。如数组中包含ABCD四个顶点，则第一个三角形连接ABC，第二个三角形连接BCD；

gl.TRIANGLES_FAN:将前三个顶点之后的顶点当做第三个顶点，与前一个顶点以及第一个顶点共同构成一个新三角形，其他与TRANFLES一样。如ABCD四个顶点，则第一个三角形是ABC，第二个三角形是ACD；

gl.drawArrays()方法接收第一个参数是上面的常量，接收数组缓冲区中的起始索引作为第二个参数，数组缓冲区中包含的顶点数（点的集合数）作为第三个参数。如下就是gl.drawArrays()绘制一个三角形：

定义三个顶点，以及每个顶点的x和y的坐标：

WebGL的纹理：可以使用DOM中的图像，要创建一个新的纹理，可以调用gl.creatTexture();然后将一张图像绑定到该纹理；如果图像尚未加载到内存中，需要创建一个Image对象的实例，以便动态加载图像。图像加载完成之前，纹理不会初始化，因此必须在load事件触发后才能设置纹理：

gl.UNPACK_FLIP_Y_WEBGL是WebGL独有的常量，因为GIF、JPEG、PNG图像与WebGL使用的坐标系不一样，所以在加载web中的图像时，必须设置这个标志，否则解析的时候就会发生混乱；

图像、加载到<video>元素中的视频，甚至其他<canvas>元素都可以用作纹理；如果是外部视频，在服务器上启用跨域资源共享；

20、Comet:也称为服务器推送，Ajax是从页面向服务器请求数据，而Comet是服务器向页面推送数据。Comet能够让信息近乎实时的被推送到页面上。非常适合处理体育比赛的分数和股票的报价。两种实现Comet的方法：长轮询和流；长轮询是浏览器定时向服务器发送请求，看有没有更新的数据。长轮询是页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到有数据可以发送，发送完数据后，浏览器关闭连接，随即又发起一个到服务器的新请求。轮询的优势是所有浏览器都支持，可以使用XHR对象和setTimeout()就能实现。

第二种Comet实现是http流，在页面的整个生命周期内只使用一个http连接。就是浏览器向服务器发送一个请求，服务器保持连接打开，然后周期性的向浏览器发送数据。

21、服务端发送事件：

Web Sockets：在js中创建了WebSocket之后，会有一个http请求发送到浏览器已发起连接，在取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为WebSocket协议。由于WebSocket使用了自定义的协议，所以未加密的是ws://；加密的连接是wss://；使用自定义协议的好处是能够在客户端和服务器直接发送非常少量的数据，而不必担心HTTP那种字节级的开销。由于传递的数据包非常小，所以WebSocket非常适合移动应用，毕竟对于移动应用来说，带宽和网络延迟都是关键问题；当然自定义协议存在一致性和安全性问题。

首先是建立连接：

WebSocket只能发送纯文本数据，所以发送json等复杂数据时，要先序列化：

服务器端发送数据，客户端接收数据：

SSE与WebSocket选择：首先看是否有自由度建立和维护WebSocket服务器，第二个看是不是需要双向通信，如果只是读取服务器数据（如比赛成绩），那SSE比较容易实现；如果是双向通信（比如聊天室），那肯定是WebSocket更好。当然SSE与XHR（ajax）共用也可以实现双向通信。通源策略是对XHR（ajax）的一个主要约束，为通信设置了相同的域、相同的端口、相同的协议。跨域解决方案：cors,浏览器基本都支持CORS，图像Ping和JSONP。

Comet是对Ajax的进一步扩展，让服务器几乎能够实时的向客户端推送数据；SSE（server send events）是一种实现Comet交互的浏览器API，及支持长轮询也支持http流。

22、安全类型检测：

js内置的类型检测机制并非完全可靠，如typeof,由于一些无法预知的行为会导致检测数据类型的时候不太靠谱。instanceof操作符存在多个全局操作符（像一个页面包含多个框架）的情况下也会出问题。

23、性能优化：优化循环：是性能优化过程中很重要的一个部分，由于他们会反复运行同一段代码，从而自动的增加执行时间。优化的基本步骤：减值迭代：大多数循环都是从0开始，在很多情况下，从最大值开始，在循环中不断减值的迭代器更加高效；简化终止条件:由于每次循环都会计算终止条件，必须保证它尽可能的快；简化循环体：循环体是执行最多的，确保没有某些可以被很容易移出循环体的密集计算；展开循环：当循环的次数是确定的，消除循环使用多次调用函数往往更快，使用Duff装置技术，可以提升大数据集的处理速度，如果处理的不是大数据，一般来说没必要；使用原生方法较快，js中最容易被忘记的就是可以在Math对象中找到复杂的数学运算，这些方法比任何用js写的同样的方法快的多；switch语句较快，避免一系列复杂的if-else，case语句块按照最可能到最不可能的顺序进行组织；最小化语句数：多个变量声明，用一个var来声明多个变量；插入迭代值：var name=values[i++];

使用数组和对象字面量：var values=[1,2,3,5,7]; var person={name:"NIco",age:23,sayName:function(){alert(this.name)}};

优化DOM操作：最小化现场更新；使用innerHTML，对于大的DOM更改，使用innerHTML比使用标准的DOM方法要快的多；