前端面试题（含人事方面）

前端方面

1.隐藏html元素的两种方式？它们的区别是什么？

【display: none】：隐藏元素及元素内的所有内容，并且该元素的位置、宽高等其他属性值一并“消失”；
【visibility: hidden】：隐藏元素及元素内的所有内容，但是该元素的位置、宽高等属性值仍然还在。

2.$.each和$(selector).each()的区别？

$.each和$(selector).each()不同，后者专用于jQuery对象的遍历，前者可用于遍历任何集合（无论是数组还是对象），如果是数组，回调函数每次传入数组的索引值和对应值（值亦可以通过this关键字获取，但JavaScript总会包装this值作为一个对象），方法会返回被遍历对象的第一参数。

3.$.ajax的必要参数是什么？ Success和complete那个先执行？

Function) success - 当请求成功时调用的函数。这个函数会得到一个参数：从服务器返回的数据（根据“dataType”进行了格式化）。
Function) complete - 当请求完成时调用的函数。这个函数会得到两个参数：XMLHttpRequest对象和一个描述请求成功的类型的字符串。
jquery中各个事件执行顺序如下：
1.ajaxStart(全局事件)
2.beforeSend
3.ajaxSend(全局事件)
4.success
5.ajaxSuccess(全局事件)
6.error
7.ajaxError (全局事件)
8.complete
9.ajaxComplete(全局事件)
10.ajaxStop(全局事件)

4.列举浏览器对象模型BOM里常用的4个对象，并列举window对象的常用方法至少5个。

Window  document  location  screen  history  navigator
方法：Alert()  confirm()  prompt()  open()  close()

5.简述列举文档对象模型DOM里document的常用的查询访问节点的方法并做简单说明。

1.通过ID,使用 getElementById() 获得标签节点

2.通过标签的名称,使用getElementsByTagName() 获得元素节点或标签节点
注意：以上的查找方式都会忽略文档的结构

3.通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性

4.节点名称nodeName
a)如果节点是标签，nodeName是标签名称
b)如果节点是属性，nodeName是属性名称
c)如果节点是文本节点，nodeName是#text
d)如果节点是文档，nodeName是#document

5.节点值nodeValue
6.节点类型nodeType

6.Ajax的优缺点是什么（至少各3个）？同步异步的区别？

ajax的优点

1.异步的与服务器通信
2.无刷新更新数据
3.基于标准广泛支持
4.前后端负载平衡
5.界面与应用分离

ajax的缺点

1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
2.AJAX的安全问题。
3.对搜索引擎支持较弱。
4.破坏程序的异常处理机制。
5.违背URL和资源定位的初衷。
6.AJAX不能很好支持移动设备。
7.客户端过肥，太多客户端代码造成开发上的成本。

同步与异步的区别

1、同步
发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

例如：用户填写所有信息后，提交给服务器，等待服务器的回应（检验数据），是一次性的。信息错误又要重新填写！

2、异步
是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

例如：当用户填写完一条信息后，该信息会自动向服务器提交，然后服务器响应客户端，在此过程中，用户依然在填写表格的信息，即向服务器请求多次，节省了用户的时间，提高了用户的体验。

3、区别：

同步请求比着异步请求少了个XMLhttpRequest对象。在用户体验方面，异步的用户体验更好一些。

7.前端开发的优化问题。

（1）减少http请求次数：css spirit,data uri
（2） JS，CSS源码压缩
（3）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（4）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
（5）用setTimeout来避免页面失去响应
（6）用hash-table来优化查找
（7）当需要设置的样式很多时设置className而不是直接操作style
（8）少用全局变量
（9）缓存DOM节点查找的结果
（10）避免使用CSS Expression
（11）图片预载
（12）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

8.什么是闭包？

简言之，闭包是由函数引用其周边状态（词法环境）绑在一起形成的（封装）组合结构。在 JavaScript 中，闭包在每个函数被创建时形成。

这是基本原理，但为什么我们关心这些？实际上，由于闭包与它的词法环境绑在一起，因此 闭包让我们能够从一个函数内部访问其外部函数的作用域。

要使用闭包，只需要简单地将一个函数定义在另一个函数内部，并将它暴露出来。要暴露一个函数，可以将它返回或者传给其他函数。

内部函数将能够访问到外部函数作用域中的变量，即使外部函数已经执行完毕。

闭包的用途之一是实现对象的私有数据。

9.Doctype作用？标准模式和兼容模式各有什么区别？

DOCTYPE是document type(文档类型)的简写,用来告诉浏览器的解析器使用哪种HTML或XHTML规范解析页面。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

为什么HTML5只要写

HTML 4.01 基于 SGML，需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。
HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。
SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。但是，HTML5不是的。

标准模式与兼容模式（怪异模式）各有什么区别?

Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（兼容）模式（也就是松散呈现模式或者怪异模式）用于呈现为传统浏览器而设计的网页。

标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。
兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。简单说就是尽可能的显示能显示的东西给用户看。

具体区别：
1.盒模型
在严格模式中：width是内容宽度，元素真正的宽度 = width;
在兼容模式中：width则是=width+padding+border

2.兼容模式下可设置百分比的高度和行内元素的高宽
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

3.用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）
body{text-align:center};#content{text-align:left}

4.兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效

10.常见的浏览器内核有哪些？

Trident-IE浏览器内核
Gecko-火狐浏览器内核Mozilla
Blink(Webkit的分支)-谷歌浏览器内核
Presto，现为Blink-Opera浏览器内核

11.HTML5的新特性？

1.语意特性,添加<header><header/><nav><nav>等标签
2.多媒体，用于媒介回放的 video 和 audio 元素
3.图像效果，用于绘画的 canvas 元素，svg元素等
4.离线 & 存储,对本地离线存储的更好的支持,local Store,Cookies等
5.设备兼容特性，HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，
6.连接特性，更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能
7.性能与集成特性，HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作

12.如何处理HTML5新标签的浏览器兼容问题？

document.createElement（‘新标签’）; / /新增创建新标签
再者还有一种办法就是用框架的方法，用到条件注释加JS代码实现

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

直接加入这一句代码就可实现兼容问题，关于条件注意中的

<!--if lt IE9>

13.如何区分HTML和HTML5？

1.在文档类型声明上

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

HTML5:

<!DOCTYPE html>

由这两者对比可见：在文档声明上，html有很长的一段代码，并且很难记住这段代码，想必很多人都是靠工具直接生成的吧？而html5却是不同，只有简简单单的声明，这也方便人们的记忆，更加精简。

2.在结构语义上

html4.0：没有体现结构语义化的标签，我们通常都是这样来命名的

<divid="header"></div>

这样表示网站的头部。

html5：在语义上却有很大的优势。提供了一些新的html5标签，比如:

<header> 、<nav>、<article>、<aside>、<footer>..

3.强大的HTML5的新功能

（1）强大的绘图功能
（2）新增视频标签

14.描述cookie，sessionStorage和localStorage的区别？

三者的异同

特性 Cookie localStorage sessionStorage
数据的生命期一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效除非被清除，否则永久保存仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小 4K左右一般为5MB
与服务器端通信每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性需要程序员自己封装，源生的Cookie接口不友好源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

15.如何实现浏览器内多个标签页之间的通信？

本题主要考察数据存储的知识，数据存储有本地和服务器存储两种方式。这里主要讲解用本地存储方式解决。即调用 localStorage、Cookie等本地存储方式。

第一种——调用localStorage
第二种——调用cookie+setInterval()

16.Strong和em的异同？

在浏览器中，<em> 默认用斜体表示，<strong> 用粗体表示。从样式表现上，<strong> 更加突出，更容易吸引眼光。显然，这种视觉上的差异设计是有目的的。

em 表示内容的着重点（stress emphasis），放置的位置会改变所在句子的含义。
strong 表示内容的重要性（strong importance），强调句子的重要性而不会改变所在句子的语意。

17.简述src和href的区别？

href 时指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src 时指向外部的资源位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。** 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕 **，图片和框架等元素也是如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。

18.Css选择器的优先级是怎样定义的？

关于优先级的规定，常用的方法是给不同的选择器分配权值：

id选择器优先级很高，权值为100
class、属性和伪类选择器的权值为10
标签选择器权值为1
在比较样式的优先级时，只需统计选择符中的id、class和标签名的个数，然后把相应的权值相加即可，最后根据结果排出优先级
权值较大的优先级越高
权值相同的，后定义的优先级较高
样式值含有!important，优先级最高

19.超链接访问过后hover样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

20.行内样式和块级元素的区别是什么？

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.
块级元素可以设置width,height属性.行内元素设置width,height属性无效.

20.行内元素可以的padding和margin可设置么？

只能设置左右的padding和margin。

21.Css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

text-align: center;
vertical-align: middle;

22.Px和em,rem的区别？

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

EM特点

em的值并不是固定的；
em会继承父级元素的字体大小。

所以我们在写CSS的时候，需要注意两点：

body选择器中声明Font-size=62.5%；
将你的原来的px数值除以10，然后换上em作为单位；
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？

区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应

23.说出你熟悉的两个css预处理器的区别？Sass与less

下面从特性上比较三者异同：
1.变量：

Sass声明变量必须是『$』开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号：分隔开。
Less 声明变量用『@』开头，其余等同 Sass。
Stylus 中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有『等号』。但需要注意的是，如果用“@”符号来声明变量，Stylus会进行编译，但不会赋值给变量。就是说，Stylus 不要使用『@』声明变量。Stylus 调用变量的方法和Less、Sass完全相同。
2.作用域：

css 预编译器把变量赋予作用域，也就是存在生命周期。就像 js 一样，它会先从局部作用域查找变量，依次向上级作用域查找。

Sass：三者最差，不存在全局变量的概念。也就是说在 Sass 中定义了相同名字的变量时你就要小心蛋疼了。
Less：我认为跟 JS 一样，逐级查找，向上冒泡。
Stylus：完全等同 Less。Stylus 和 Sass 则更倾向于指令式。

3.嵌套：

十分真诚的说，三种 css 预编译器的「选择器嵌套」在使用上来说没有任何区别（也可能是我没发现）。Sass 除了常规的采用『&』替代父级选择器之外，还提供了「奇葩的属性嵌套」：

/*style.sass*/
.footer {
  font: {
    family:  微软雅黑;
    size: 5rem;
    weight: bolder;
  }
}

4.继承：

css 属性的继承是一个非常重要的特性，好消息是三种预编译器都对此做出了改善。

Sass和Stylus的继承非常像，能把一个选择器的所有样式继承到另一个选择器上。使用『@extend』开始，后面接被继承的选择器。

.shit {
  margin: 10px 5px;
  padding: 2px;
}
p {
  @extend .shit;/*继承.block*/
  border: 1px solid #aaa;
}
ul,li {
  @extend .shit; /*继承.block*/
  color: #aaa;
}

将被编译成标准 css：

.shit,p,ul,ol {
  margin: 10px 5px;
  padding:2px;
}
p {
  border: 1px solid #aaa
}
ul,li {
  color:#aaa;
}

Less 继承：与前两者继承方式有所区别，它不是在选择器上继承，而是将Mixins中的样式嵌套到每个选择器里面。然而这样会带来一个明显的缺点：每个选择器中会出现重复的样式。

5.导入@Import：

CSS中，不建议用@import导入css，因为会增加http请求。但 CSS 预处理器中的导入和CSS的有hhe很大区别，它是将不同 css 是在语义上导入，最终编译结果会生成一个CSS文件。

值得注意的是，如果不同文件相互引入的时候，出现相同变量名时可能会引起错误。所以我的建议是单独有一个 var.sass/less/styl 文件来记录所有你定义的变量。

Less 为@Import 扩展了语法，而 Sass 和 Stylus 并没有。具体扩展的 import 语法请见：Less 的 Import 扩展

24.“user strict”有什么作用？

　　- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

　　- 消除代码运行的一些不安全之处，保证代码运行的安全；

　　- 提高编译器效率，增加运行速度；

　　- 为未来新版本的Javascript做好铺垫。

25.JavaScript如何实现继承？

继承

26.对this指针的理解，可以列举几种情况？

this指的是：调用函数的那个对象。

a. 纯粹的函数调用，属于全局性调用，因此this就代表全局对象Global。

b. 作为对象方法的调用，这时this就指这个上级对象。

c. 作为构造函数调用，就是通过这个函数new一个新对象（object）。这时，this就指这个新对象。

d. apply与call的调用，它们的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。

27.Mvvm框架和mvc有什么不同？

在MVC里，View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变，所以，在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的。
MVVM在概念上是真正将页面与数据逻辑分离的模式，它把数据绑定工作放到一个JS里去实现，而这个JS文件的主要功能是完成数据的绑定，即把model绑定到UI的元素上。
有人做过测试：使用Angular（MVVM）代替Backbone（MVC）来开发，代码可以减少一半。
此外，MVVM另一个重要特性，双向绑定。它更方便你同时维护页面上都依赖于某个字段的N个区域，而不用手动更新它们。

28.如何获取JavaScript变量的类型？

1、typeof
typeof 是一个操作符，其右侧跟一个一元表达式，并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示，包括以下 7 种：number、boolean、symbol、string、object、undefined、function 等。

2、instanceof
instanceof 是用来判断 A 是否为 B 的实例，表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true,否则返回 false。在这里需要特别注意的是：instanceof 检测的是原型，我们用一段伪代码来模拟其内部执行过程：

instanceof (A,B) = {
    var L = A.__proto__;
    var R = B.prototype;
    if(L === R) {
        // A的内部属性 __proto__ 指向 B 的原型对象
        return true;
    }
    return false;
}

3、constructor
当一个函数 F被定义时，JS引擎会为F添加 prototype 原型，然后再在 prototype上添加一个 constructor 属性，并让其指向 F 的引用。如下所示：

constructor

可以看出，F 利用原型对象上的 constructor 引用了自身，当 F 作为构造函数来创建对象时，原型上的 constructor 就被遗传到了新创建的对象上，从原型链角度讲，构造函数 F 就是新对象的类型。这样做的意义是，让新对象在诞生以后，就具有可追溯的数据类型。

null 和 undefined 是无效的对象，因此是不会有 constructor 存在的，这两种类型的数据需要通过其他方式来判断。

函数的 constructor 是不稳定的，这个主要体现在自定义对象上，当开发者重写 prototype 后，原有的 constructor 引用会丢失，constructor 会默认为 Object

4、toString
toString() 是 Object 的原型方法，调用该方法，默认返回当前对象的 [[Class]] 。这是一个内部属性，其格式为 [object Xxx] ，其中 Xxx 就是对象的类型。

对于 Object 对象，直接调用 toString() 就能返回 [object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。

29.JavaScript如何模拟块级作用域？

用匿名的函数表达式立即执行的方式来模仿块级作用域

(function() { 
// 这里是块级作用域 
})();

这样就是私有作用域，在匿名函数中定义的私有变量，都会在执行结束时被销毁。在一个由很多开发人员共同参与的大型应用程序中，过多的全局变量和函数很容易导致命名冲突。而通过创建私有作用域，每个开发人员既可以使用自己的变量，又不必担心搞乱全局作用域。

30.JavaScript如何模拟私有变量？

基于闭包的实现方式
另外一种比较普遍的方式是利用JavaScript的闭包特性。构造函数内定义局部变量和特权函数，其实例只能通过特权函数访问此变量，如下：

function Person(name){
  var _name = name;
  this.getName = function(){
    return _name;
  }
}

var person = new Person('Joe');

这种方式的优点是实现了私有属性的隐藏，Person 的实例并不能直接访问_name属性，只能通过特权函数getName获取：

alert(person._name); // undefined
alert(person.getName()); //'Joe'

使用闭包和特权函数实现私有属性的定义和访问是很多开发者采用的方式，Douglas Crockford也曾在博客中提到过这种方式。但是这种方式存在一些缺陷：

私有变量和特权函数只能在构造函数中创建。通常来讲，构造函数的功能只负责创建新对象，方法应该共享于prototype上。特权函数本质上是存在于每个实例中的，而不是prototype上，增加了资源占用。

31.Call（）和apply（）的区别？

call 和 apply 就是为了改变函数体内部 this 的指向。

区别是从第二个参数起，call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

当参数明确时用call与apply都行, 当参数不明确时可用apply给合arguments

32.get和post的区别？

GET后退按钮/刷新无害，POST数据会被重新提交（浏览器应该告知用户数据会被重新提交）。GET书签可收藏，POST为书签不可收藏。GET能被缓存，POST不能缓存。GET编码类型application/x-www-form-url，POST编码类型encodedapplication/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中。GET对数据长度有限制，当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST无限制。GET只允许 ASCII 字符。POST没有限制。也允许二进制数据。与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。GET的数据在 URL 中对所有人都是可见的。POST的数据不会显示在 URL 中。

33.描述下标准盒模型？

content-box（标准盒模型）

width = 内容的宽度

height = 内容的高度

border-box（怪异盒模型）

width = border + padding + 内容的宽度

height = border + padding + 内容的高度

34.Css3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
增加了更多的CSS选择器多背景 rgba
在CSS3中唯一引入的伪元素是 ::selection.
媒体查询，多栏布局
border-image

35.文档流

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)。文档流是文档中可显示对象在排列时所占用的位置。

36.在移动端与pc端做项目有什么区别?On事件的不同；先说布局方面：

js事件不同：click事件在移动端反应有300ms延迟，点击反应慢还会出现点透的bug。应尝试使用touch事件，或者使用fastclick.js库，也可以使用zeptojs中的tap事件。
调试页面：使用chrome的模拟移动端工具，有时还要使用eruda、weinre真机调试工具。微信开发或者小程序请选择微信开发者工具。
需要设置viewport：在header里使用<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">来控制屏幕全屏显示，且不能被缩放。
字体规则：pc端使用的px在移动屏幕上不能很好的适应多分辨率，移动端改用rem字体单位。令 html{ font-size:62.5%; }，则1rem=10px。然后使用css3的媒体查询控制不同分辨率下html显示的倍数。
最小点击区域44px：移动端是有最小点击识别区的，元素大小低于这个值时被点击是不会触发click事件的。
可以调用硬件功能：可以通过设置a标签href类型来实现拨打电话、发送短信和邮件等功能。可以通过<input type="file">的accept 属性，调用本地图片或拍照。还可以使用html5的运动传感器数据事件实现微信摇一摇功能。

37.什么面向对象

面向对象的三个基本特征是：封装、继承、多态。

38.Html5有哪些标签：

header、footer、section、nav、audio、canvas

37.一个页面从输入URL到页面加载显示完成，这个过程都发生什么

1、首先，在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器
7、浏览器收到HTTP响应
8、读取页面内容，浏览器渲染，解析html源码
9、生成Dom树、解析css样式、js交互
10、客户端和服务器交互
11、ajax查询

Comments