Fork me on GitHub

Any application that can be written in JavaScript, will eventually be written in JavaScript.

web 前端常见面试题

前端技术变化这么大，但是面试爱好者总喜欢面试一些重复的内容，整理了一些面试官经常问的问题，无非一些闭包的理解，继承，call 和 apply的区别，get 和 post 的区别，等等，js框架怎么日新月异，真正的本质还是不变，以下面试题可参考。

1.img 标签中的 title 和 alt 有什么区别

alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

title 表示鼠标在图片上停留时，显示一个悬浮框，其中显示的文字。HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的。

2.call() 和 apply()方法

1
2
obj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);

两者作用一致，都是把obj(即this)绑定到thisObj，这时候thisObj具备了obj的属性和方法。或者说thisObj『继承』了obj的属性和方法。
唯一区别是apply接受的是数组参数，call接受的是连续参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function add(j, k){
  return j+k;
}

function sub(j, k){
  return j-k;
}

add(5,3); //8
add.call(sub, 5, 3); //8
add.apply(sub, [5, 3]); //8
sub(5, 3); //2
sub.call(add, 5, 3); //2
sub.apply(add, [5, 3]); //2

通过call和apply，我们可以实现对象继承。示例：

1
2
3
4
var Parent = function(){ this.name = "yjc"; this.age = 22; }
var child = {}; console.log(child); //Object {}
Parent.call(child);
console.log(child); //Object {name: "yjc", age: 22}

3.HTML5 新特性

（1）新的文档类型 (New Doctype) <!DOCTYPE html>

（2）脚本和链接无需type (No More Types for Scripts and Links)

（3）语义Header和Footer (The Semantic Header and Footer)

（4）Audio 支持 (Audio Support)

（5）Video 支持 (Video Support)

（6）视频预载 (Preload attribute in Videos element) 当用户访问页面时这一属性使得视频得以预载。为了实现这个功能，可以在 video 元素中加上 preload=”preload” 或者只是 preload。

（7）增加画布 canvas

4.为什么利用多个域名来存储网站资源会更有效

除了节约cookie带宽的因素，另一个重要因素是节约主域名的连接数，从而提高客户端网络带宽的利用率，优化页面响应。因为老的浏览器（IE6是典型），针对同一个域名只允许同时保持两个HTTP连接。将图片等资源请求分配到其他域名上，避免了大图片之类的并不一定重要的内容阻塞住主域名上其他后续资源的连接（比如ajax请求)。

5.写一个11为电话号码正则表达式

1
/^1[34578]\d{9}$/.test(phone)

6.html块级元素和内联元素区别详解

块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的(padding)和外边距的(margin)都不可改变，就是里面文字或图片的大小;

7. 事件模型

冒泡型事件：当你使用事件冒泡时，子级元素先触发，父级元素后触发
捕获型事件：当你使用事件捕获时，父级元素先触发，子级元素后触发
DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件
阻止冒泡：在W3c中，使用stopPropagation（）方法；在IE下设置cancelBubble = true
阻止捕获：阻止事件的默认行为，在W3c中，使用preventDefault（）方法，在IE下设置window.event.returnValue = false

8.你有哪些性能优化的方法？

（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适。

（2）网页Gzip，CDN托管，data缓存 ，图片服务器。

(3). 资源合并与压缩：如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。另外， CSS、 Javascript、Image 都可以用相应的工具进行压缩，压缩后往往能省下不少空间，图片较多的页面也可以使用 lazyLoad 等技术进行优化。

（4） 图片预加载，将样式表放在顶部，将脚本放在底部。

（5） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示div+css布局慢。

（6） 少用iframe：搜索引擎不会抓取iframe中的内容，iframe会阻塞主页面的 Onload 事件

（7） 减小cookie大小

9.http状态码

信息状态码1××

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

成功2×× 成功处理了请求的状态码。

200 服务器已成功处理了请求并提供了请求的网页。
204 服务器成功处理了请求，但没有返回任何内容。

重定向3×× 每次请求中使用重定向不要超过 5 次。

301 请求的网页已永久移动到新位置。当URLs发生变化时，使用301代码。搜索引擎索引中保存新的URL。
302 请求的网页临时移动到新位置。搜索引擎索引中保存原来的URL。
304 如果网页自请求者上次请求后没有更新，则用304代码告诉搜索引擎机器人，可节省带宽和开销。

客户端错误4×× 表示请求可能出错，妨碍了服务器的处理。

400 服务器不理解请求的语法。
403 服务器拒绝请求。
404 服务器找不到请求的网页。服务器上不存在的网页经常会返回此代码。
410 请求的资源永久删除后，服务器返回此响应。该代码与 404（未找到）代码相似，但在资源以前存在而现在不存在的情况下，有时用来替代404 代码。如果资源已永久删除，应当使用 301 指定资源的新位置。

服务器错误5×× 表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

500 服务器遇到错误，无法完成请求。
503 服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。

10.闭包是什么，有什么特性，对页面有什么影响?简要介绍你理解的闭包

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域

闭包的特性：
函数内再嵌套函数；
内部函数可以引用外层的参数和变量；
参数和变量不会被垃圾回收机制回收。

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念。

11.数组方法pop() push() unshift() shift()

Push()尾部添加
pop()尾部删除
Unshift()头部添加
shift()头部删除

12.post和get的区别

####（1）Get 方法通过 URL 请求来传递用户的数据，将表单内各字段名称与其内容，以成对的字符串连接，置于 action 属性所指程序的 url 后，数据都会直接显示在 url 上；
Post 方法通过 HTTP post 机制，将表单内各字段名称与其内容放置在 HTML 表头(header)内一起传送给服务器端交由 action 属性能所指的程序处理，该程序会通过标准输入(stdin)方式，将表单的数据读出并加以处理。

####（2） Get 方式需要使用 Request.QueryString 来取得变量的值；而 Post 方式通过 Request.Form 来访问提交的内容

####（3）Get 方式传输的数据量非常小，一般限制在 2 KB 左右，但是执行效率却比 Post 方法好；
而 Post 方式传递的数据量相对较大，它是等待服务器来读取数据，不过也有字节限制。

####（4）Get 方式提交数据，会带来安全问题，比如一个登陆页面，通过 Get 方式提交数据时，用户名和密码将出现在 URL 上，如果页面可以被缓存或者其他人可以访问客户这台机器，就可以从历史记录获得该用户的帐号和密码，所以表单提交建议使用 Post 方法；Post 方法提交的表单页面常见的问题是，该页面如果刷新的时候，会弹出一个对话框

建议：出于安全性考虑，建议最好使用 Post 提交数据

13.什么是语义化的HTML?

  • 直观的认识标签 对于搜索引擎的抓取有好处，用正确的标签做正确的事情！
  • html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
  • 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
  • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

14.从浏览器地址栏输入url到显示页面的步骤

####（1）浏览器根据请求的URL交给DNS域名解析，找到真实IP，通过互联网向服务器发起请求；

####（2）服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；

####（3）浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；

####（4）载入解析到的资源文件，渲染页面，完成。

15.::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素
用于区分伪类和伪元素

16.说说你对作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。
简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。

17.JavaScript 原型，原型链 ? 有什么特点？

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时
如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念

关系：instance.constructor.prototype = instance.proto

特点：
JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变
当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的
就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象

18.谈谈This对象的理解

this总是指向函数的直接调用者（而非间接调用者）
如果有new关键字，this指向new出来的那个对象
在事件中，this指向触发这个事件的对象

19.常见web安全及防护原理

（1）sql注入原理：通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。

总的来说有以下几点:

  • 永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双”-“进行转换等；
  • 永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取；
  • 永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接；
  • 不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。

（2）Xss(cross-site scripting)攻击：指的是攻击者往Web页面里插入恶意html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。

20.为什么要有同源限制？

同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议
举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

21.eval是做什么的？

它的功能是把对应的字符串解析成JS代码并运行
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）
由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval(‘(‘+ str +’)’)

22.Session 和 Cookies 的区别

我所知道的有以下区别：

1、session保存在服务器，客户端不知道其中的信息；cookie保存在客户端，服务器能够知道其中的信息。

2、session中保存的是对象，cookie中保存的是字符串。

3、session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到。而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的。

4、session需要借助cookie才能正常。如果客户端完全禁止cookie，session将失效。

http是无状态的协议，客户每次读取web页面时，服务器都打开新的会话，而且服务器也不会自动维护客户的上下文信息，那么要怎么才能实现网上商店中的购物车呢，session就是一种保存上下文信息的机制，它是针对每一个用户的，变量的值保存在服务器端，通过SessionID来区分不同的客户,session是以cookie或URL重写为基础的，默认使用cookie来实现，系统会创造一个名为JSESSIONID的输出cookie，我们叫做session cookie,以区别persistent cookies,也就是我们通常所说的cookie,注意session cookie是存储于浏览器内存中的，并不是写到硬盘上的，这也就是我们刚才看到的JSESSIONID，我们通常情是看不到JSESSIONID的，但是当我们把浏览器的cookie禁止后，web服务器会采用URL重写的方式传递Sessionid，我们就可以在地址栏看到 sessionid=KWJHUG6JJM65HS2K6之类的字符串。

明白了原理，我们就可以很容易的分辨出persistent cookies和session cookie的区别了，网上那些关于两者安全性的讨论也就一目了然了，session cookie针对某一次会话而言，会话结束session cookie也就随着消失了，而persistent cookie只是存在于客户端硬盘上的一段文本（通常是加密的），而且可能会遭到cookie欺骗以及针对cookie的跨站脚本攻击，自然不如 session cookie安全了。

通常session cookie是不能跨窗口使用的，当你新开了一个浏览器窗口进入相同页面时，系统会赋予你一个新的sessionid，这样我们信息共享的目的就达不到了，此时我们可以先把sessionid保存在persistent cookie中，然后在新窗口中读出来，就可以得到上一个窗口SessionID了，这样通过session cookie和persistent cookie的结合我们就实现了跨窗口的session tracking（会话跟踪）。

23.AJAX实现原理

（1）创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

1
variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

1
variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

1
2
3
4
5
6
var xmlhttp;
if (window.XMLHttpRequest){
	xmlhttp = new XMLHttpRequest();   // code for IE7+, Firefox, Chrome, Opera, Safari
} else {
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");   // code for IE6, IE5
}

（2）向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

1
2
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。

  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）

send(string) 将请求发送到服务器。

  • string：仅用于 POST 请求

e.g.1：

1
2
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

e.g.2：

1
2
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

1
2
3
4
5
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

setRequestHeader(header,value) 向请求添加 HTTP 头。
  • header: 规定头的名称
  • value: 规定头的值

（3）服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText ：获得字符串形式的响应数据。
responseXML ：获得 XML 形式的响应数据。

responseText 属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。
responseText 属性返回字符串形式的响应，因此您可以这样使用：

1
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 属性

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性。

（4）onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：

onreadystatechange：
存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState:
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status:
200: “OK”
404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

1
2
3
4
5
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}

总结demo：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
<script type="text/javascript">
  function loadXMLDoc() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
       // code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
    } else {
      // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","/ajax/test1.txt",true);
    xmlhttp.send();
  }
</script>
</head>
<body>
  <div id="myDiv"><h2>Let AJAX change this text</h2></div>
  <button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>
</body>
</html>

24.HTML 不常见标签

（1）abbr 及 acronym

abbr 及 acronym 标记表示网页中呈现的文字缩写与简称，都通过title属性来给出缩写的完整名称。二者的区别在于 acronym 标记用来表示首字母缩略词，并且往往缩写形式是一个可发音的单词。例如：

1
2
3
4
5
6
<abbr title="United Nations">U.N</abbr><br>
Jack weighs 90 <abbr title="kilograms">kg.</abbr><br>
<abbr title="Save Our Soul">SOS</abbr><br>
<acronym title="North Atlantic Treaty Organization">NATO</acronym><br>
<acronym title="radio detecting and ranging">radar</acronym><br>
<abbr title="Federal Bureau of Investigation">FBI</abbr>

显示结果为：

U.N
Jack weighs 90 kg.
SOS
NATO
radar
FBI
有些缩写，像URL和SQL，可作为一个词发音，也可以按照一个一个字母发音，在这种情况下，使用标记要比好。样式表单此时可以被用来指定口头的发音，例如可以把

1
<abbr title="Structured Query Language">SQL</abbr>

和

1
abbr[title="Structured Query Language"]{speak:spell-out;}

一块使用。

[这个标签对于单纯浏览没什么用，但是如果想要文本能被搜索，就可以用到]

（2）ins 和 del

如果你想使用标签来显示编辑版本，ins 和 del 正好适合。顾名思义，ins 用下划线高亮显示添加进来的内容，而 del 用删除线显示被移除的信息。

（3）address

address 标签定义文档或文章的作者/拥有者的联系信息。是语义化标签，会使文本斜体。
如果 address 元素位于 body 元素内，则它表示文档联系信息。
如果 address 元素位于 article 元素内，则它表示文章的联系信息。
address 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。

1
2
3
4
5
6
7
<address>
	Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
	Visit us at:<br>
	Example.com<br>
	Box 564, Disneyland<br>
	USA
</address>

（4）area

area 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。
area 元素总是嵌套在 map 标签中。

带有可点击区域的图像映射：

1
2
3
4
5
6
7
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

（5）base

base 标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 base 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 a、img、link、form 标签中的 URL。

标签必须位于 head 元素内部。

e.g.

1
2
3
4
5
6
7
8
9
<head>
  <base href="http://www.w3school.com.cn/i/" />
  <base target="_blank" />
</head>

<body>
  <img src="eg_smile.gif" />
  <a href="http://www.w3school.com.cn">W3School</a>
</body>

（6）blockquote

blockquote 标签定义块引用。
blockquote 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

（7）caption

caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

1
2
3
4
5
6
7
8
9
10
11
<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

（8）cite

cite 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
按照惯例，引用的文本将以斜体显示。